Did you know that you can create the famous Flappy Bird game within seconds using ChatGPT? Here, we will explain how you can create a Flappy Bird game with the help of ChatGPT.
I have been involved in computer programming for approximately 7 years, and I have closely witnessed the development of ChatGPT since its inception. As I have used ChatGPT in various fields, I have found it to be highly successful in processing texts and generating code. I will explain how you can use ChatGPT to develop the Flappy Bird game. You can also use this guide as a reference for developing similar games.
Things You Should Know Before Starting
Before we begin, there are some points we need to clarify.
- ChatGPT doesn’t always provide the correct answer, and it doesn’t always generate the most accurate code. The code generated by ChatGPT may contain errors or ineffective parts. The true strength of the model lies in its ability to engage in interactive dialogue with you, much like a human conversation. It can learn and improve itself based on your feedback and interactions.
- Therefore, think of ChatGPT as a developer on your team who is striving to fulfill your requests and also trying to improve based on the feedback you provide. It acts as a highly cost-effective (even free) developer, occasionally serving as an editor, personal trainer, or even a mental coach. Our approach to ChatGPT should align with this understanding.
- While ChatGPT is capable of handling various tasks without requiring coding knowledge, your overall productivity may be limited without coding skills. ChatGPT might not convey all the necessary information in one response, even if it has the relevant knowledge. Therefore, having coding knowledge still remains important as it increases your efficiency and productivity.
Developing Flappy Bird Game With ChatGPT
We will create the game using JavaScript. Although it can be developed in other languages such as Unity, we have chosen JavaScript today.
We’ll not only code with ChatGPT, but also deploy it on a live website for accessibility. This allows you to see and experience the game generated by ChatGPT.
Before seeking help from ChatGPT, I am setting up my own working platform. I’ll be using VSCode. I aim to delegate as much work as possible to ChatGPT.
- Open VSCode
- Create a new folder named “chatgpt-flappy-bird”.
Getting Help From ChatGPT
I would like to use ChatGPT to generate the complete code for the Flappy Bird game. To do so, I will open my ChatGPT account, select the latest and most advanced model, which is the GPT-4 model, and instruct it to generate the JavaScript code for the Flappy Bird game.
If you don’t know yet, learn how to use GPT-4 model in ChatGPT.
There are several main reasons why I choose to use the GPT-4 model.
- It has a higher character limit, allowing me to receive longer code responses and better understanding of longer prompts I provide.
- As a more advanced and up-to-date model, I expect GPT-4’s code generation capabilities to be in a much better state compared to GPT-3.5.
Learn More: What are the differences between GPT-4 and GPT-3?
1. Starting From Scratch
Let’s start by sending our first prompt to ChatGPT. This prompt is not the most effective or accurate one, but I just wanted to express my thoughts and share what I want with ChatGPT.
Instead of striving for the most effective prompt, focus on expressing yourself clearly and provide feedback based on the received responses.
You can use Whisper AI for its voice typing feature. This helps you express yourself easily.
ChatGPT quickly provided me with the HTML and JavaScript files I needed for this game.
The feedback from ChatGPT was really useful. It pointed out that this version is missing some features but can be a solid starting point for learning how to create a game like Flappy Bird.
All I need to do now is to copy and create these files in the folder I have opened in VSCode.
That’s it. Now let’s move on to the next step.
2. Testing The Flappy Bird Game
We directly copied and pasted the code provided by ChatGPT, but we don’t know what kind of game we’re dealing with. We should examine the game by testing the code and identify any shortcomings. If we notice any deficiencies, we can provide feedback to ChatGPT and ask for improvements.
To test this, I will use the Live Server extension in VSCode. After installing the extension, I can right-click on my index.html file and select “Open with Live Server” to test the code.
I noticed a few issues while testing the game.
- The character was falling too quickly when the game started.
- After passing the first pipe, no further pipes were appearing.
- The game did not have a start or end screen. When I wanted to restart, I realized that I needed to refresh the page.
While these flaws need to be addressed, I won’t be addressing them myself. Instead, I will provide feedback to ChatGPT for necessary corrections and request a revised code from it.
I notified ChatGPT about the errors in the code it provided and requested corrections.
After receiving the revised code based on my requests, I will replace the relevant file in VSCode with the updated code. Then, I will continue my testing process.
During the test, I noticed a couple of new issues.
- Pressing the space key didn’t start the game as expected.
- When the game did start, the first pipe appeared too late.
As before, I will communicate these issues to ChatGPT and request it to make the necessary corrections.
3. Requesting New Iterations From ChatGPT
As mentioned at the beginning, there is never a guarantee that the code provided by ChatGPT will work perfectly or align exactly with your requests. It is important to test the code, identify any shortcomings, and communicate those to ChatGPT for corrections.
While testing, I noticed that the new code provided by ChatGPT has fixed the previous issues. However, I encountered a new problem. The game doesn’t end when the character collides with the pipes; it only ends when the character falls to the ground.
This is a significant problem, and I requested ChatGPT to address this issue by making the game end when the character collides with the pipes.
After receiving the updated code, I realized that this iteration is reasonably successful for a starting point. I didn’t encounter any significant issues in the game.
There are lots of graphical improvements that could be made, but to keep things simple and focused, I won’t request those enhancements for now.
I am sharing the HTML and JavaScript codes provided by ChatGPT in the section below.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Flappy Bird Game</title>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script src="game.js"></script>
</body>
</html>
Javascript
// Get the canvas element and context
var canvas = document.getElementById('gameCanvas');
var ctx = canvas.getContext('2d');
// Game variables
var bird = {
x: 150,
y: 300,
radius: 15,
gravity: 0.5,
velocity: 0,
jump: -10,
};
var pipes = [];
var pipeWidth = 100;
var pipeGap = 200;
var pipeDistance = 300; // Distance between pipes
var gameScore = 0;
var gameStarted = false;
var gameOver = false;
var pipeTimer = 0; // New variable for pipe timing
// Function to draw bird
function drawBird() {
ctx.beginPath();
ctx.arc(bird.x, bird.y, bird.radius, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
ctx.closePath();
}
// Function to draw pipes
function drawPipes() {
for(var i=0; i < pipes.length; i++) {
var p = pipes[i];
ctx.beginPath();
ctx.rect(p.x, p.y, pipeWidth, p.height);
ctx.fillStyle = 'green';
ctx.fill();
ctx.closePath();
}
}
// Function to update game state
function updateGame() {
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw bird
drawBird();
// Draw pipes
drawPipes();
// Start game on space press
if (!gameStarted) {
ctx.font = '30px Arial';
ctx.fillText('Press Space to start', canvas.width / 2 - 100, canvas.height / 2);
return;
}
// Update bird position
bird.velocity += bird.gravity;
bird.y += bird.velocity;
// Create new pipes after a certain distance
pipeTimer++;
if (pipeTimer === pipeDistance) {
var pipeHeight = Math.random() * (canvas.height - pipeGap);
pipes.push({
x: canvas.width,
y: 0,
height: pipeHeight,
});
pipes.push({
x: canvas.width,
y: pipeHeight + pipeGap,
height: canvas.height - pipeHeight - pipeGap,
});
pipeTimer = 0;
}
// Move pipes
for(var i=0; i < pipes.length; i++) {
var p = pipes[i];
p.x -= 1;
}
// Increase score
gameScore++;
// Game over condition
if (bird.y + bird.radius > canvas.height) {
gameOver = true;
ctx.font = '30px Arial';
ctx.fillText('Game Over! Your score was: ' + gameScore, canvas.width / 2 - 100, canvas.height / 2);
return;
}
// Collision detection
for (var i = 0; i < pipes.length; i++) {
var p = pipes[i];
// Collision with top pipe
if (p.y === 0 && bird.y - bird.radius < p.height && bird.x + bird.radius > p.x && bird.x - bird.radius < p.x + pipeWidth) {
gameOver = true;
}
// Collision with bottom pipe
if (p.y !== 0 && bird.y + bird.radius > p.y && bird.x + bird.radius > p.x && bird.x - bird.radius < p.x + pipeWidth) {
gameOver = true;
}
if (gameOver) {
ctx.font = '30px Arial';
ctx.fillText('Game Over! Your score was: ' + gameScore, canvas.width / 2 - 100, canvas.height / 2);
return;
}
}
// If game is not over, request next frame
if (!gameOver) {
requestAnimationFrame(updateGame);
}
}
// Function to make bird jump and start game
function birdJump() {
if (!gameOver) {
bird.velocity = bird.jump;
if (!gameStarted) {
gameStarted = true;
createInitialPipes(); // Create first pipes as soon as the game starts
updateGame();
}
}
}
// Function to create the first pipes
function createInitialPipes() {
var pipeHeight = Math.random() * (canvas.height - pipeGap);
pipes.push({
x: canvas.width,
y: 0,
height: pipeHeight,
});
pipes.push({
x: canvas.width,
y: pipeHeight + pipeGap,
height: canvas.height - pipeHeight - pipeGap,
});
}
// Listen for space key press
window.addEventListener('keydown', function(e) {
if(e.code === 'Space') {
birdJump();
}
});
// Start the game
updateGame();
The game we generated with ChatGPT appears visually lacking and requires enhancement. Yet, just as we addressed the bugs to ChatGPT and continuously iterated, we can enhance the visuals by specifying our requests to ChatGPT until we achieve the desired state.
4. Publishing Flappy Bird Game
In this section, we’ll describe the process of publishing the game. However, publishing the game live on a website deserves an article of its own. We have an easy way, though.
To summarize briefly, we can publish the game for free by moving the prepared code to GitHub and using the Netlify platform.
Below, you can access the website after deploying the game for free on Netlify platform. This game was entirely created by ChatGPT within short time.
chatgpt-flappy-bird.netlify.com
Conclusion
ChatGPT is not a wizard when it comes to coding, but it is a successful developer or assistant that can accomplish great things. With its help, we were able to code a simplified version of the Flappy Bird game within seconds. We even went a step further and deployed this project live, making it playable for everyone.
One of its most important features of ChatGPT is the ability to engage in interactive dialogue and its capability to remember past conversations. This allows ChatGPT to understand your feedback and requests effectively, providing appropriate responses and making adjustments and improvements accordingly in the topic at hand.
The concepts described in this article can be applied not only to this game but also to any project you plan to start. Instead of writing the code on your own, you can communicate your intentions to ChatGPT and make adjustments and improvements based on the code it generates. This way, you can save time and effort.
We are experiencing a rapid transformation with the help of artificial intelligence. While AI may not replace developers entirely, developers who leverage AI can easily achieve this.