GENERATIVE AI

CAPSTONE PROJECT REPORT

FLAPPY BIRD GAME

SUBMITTED BY:

Abhishek RA - abhishekra.bba21@rvu.edu.in
Aisiri Hegde - aisirih.bcom21@rvu.edu.in
Meghana M - meghanam.bcom21@rvu.edu.in

SUBMITTED TO:

Prof. Manjul Krishna Gupta

SUBMITTED ON:

Dec 3, 2023
 2

Executive Summary

The Flappy Bird Game Capstone Project aimed to create an engaging and visually
appealing version of the classic Flappy Bird game. The project focused on
implementing key features such as a bird character, animated pipes, scoring system, and
a game-over screen. The game was developed using HTML, CSS, and JavaScript to
ensure cross-browser compatibility and responsiveness.
 3

About Our Project

Title: Flappy Bird Game Project

Description:

The Flappy Bird Game Project is a web-based implementation of the classic Flappy Bird game
using HTML, CSS, and JavaScript. This project showcases your programming skills and
creativity in designing an interactive and engaging gaming experience.

Key Features:

1. HTML Structure:

The project utilizes HTML for structuring the game interface, providing a foundation for the
layout and elements.

2. CSS Styling:

CSS is employed for styling the game components, ensuring an attractive and visually
appealing user interface. The styling contributes to the overall gaming experience.

3. JavaScript Functionality:

The core game mechanics are implemented using JavaScript. This includes handling user
input, managing game state, and updating the game loop.

4. Game Logic:

The Flappy Bird game logic is faithfully recreated, featuring a bird that responds to user input
(clicks or taps) to navigate through a series of pipes. The goal is to navigate the bird through
the pipes without colliding.
 4

5. Collision Detection:

A critical aspect of the game is the implementation of collision detection. The game accurately
detects collisions between the bird and the pipes, triggering the appropriate actions when a
collision occurs.

6. Score Tracking:

The project includes a scoring system that tracks and displays the player's progress as they
successfully navigate through the pipes. This adds a competitive element to the game,
encouraging players to improve their scores.

7. Responsive Design:

The game is designed to be responsive, ensuring an optimal experience across various devices
and screen sizes. This allows users to enjoy the game seamlessly on both desktop and mobile
platforms.

8. User-Friendly Interface:

The user interface is intuitive, providing clear instructions on how to play and displaying
relevant information such as the current score. This enhances the overall user experience and
accessibility of the game.

9. Project Structure and Organization:

The code is well-organized, with modular structures and comments that enhance readability
and maintainability. This makes the project a valuable learning resource for others interested in
web development and game programming.
 5

Source Of Our Code

Flappy Bird Game Project by ChatGPT

Description: Embark on a journey into the world of game development with the Flappy Bird
Game Project, a unique creation generated entirely by the cutting-edge AI language model,
ChatGPT. Witness the convergence of artificial intelligence and creativity as ChatGPT takes
the reins in crafting the HTML, CSS, and JavaScript code that powers this engaging and
nostalgic gaming experience.

AI-Generated Code: The entire structure of the game, from the HTML layout to the CSS
styling, and the intricate JavaScript logic, is the brainchild of ChatGPT. Leveraging its vast
knowledge base and intricate understanding of web development, ChatGPT seamlessly weaves
together the different components, creating a cohesive and functional Flappy Bird game.

Dynamic HTML Structure: ChatGPT dynamically generates the HTML structure, defining
the canvas for the game interface and strategically placing elements for an immersive
experience. The result is a visually appealing and responsive layout that adapts effortlessly to
various screen sizes.

Elegant CSS Styling: The CSS styling is a testament to ChatGPT's design prowess. It
effortlessly applies styles to elements, creating a visually stunning representation of the Flappy
Bird world. From the charming bird sprite to the smoothly animated pipes, every detail is
meticulously crafted through AI-generated style sheets.

Intelligent JavaScript Gameplay: The heart of the project lies in the JavaScript code, where
ChatGPT flexes its programming muscles. The game logic, user input handling, collision
detection, and scoring mechanisms are all intricately woven into the code, creating a seamless
and challenging gaming experience that mirrors the original Flappy Bird.
 6

Organized Code Architecture: ChatGPT doesn't just stop at functionality; it excels in

code organization. The generated code is well-commented, modular, and easy to understand,
allowing developers to delve into the intricacies of game development with ease.

Educational Resource: The Flappy Bird Game Project becomes more than just a game; it
stands as a testament to the potential of AI in creative endeavors. It serves not only as an
entertaining game for players but also as an educational resource for developers looking to
understand the synergy between AI and game development.

Embark on this AI-powered adventure and experience the Flappy Bird Game Project, where
ChatGPT's creativity meets your gaming pleasure.

Link To Our Game

https://genai1sampleflappybird.w3spaces.com/
 7

Platform Which We Used Our Code

To Run On
Flappy Bird on W3Schools

Description:

We used w3schools to run our HTML, CSS and Java Script code and created a website with
the help of w3schools in order to run and simulate our game.

The Flappy Bird Game Project, brought to life with ChatGPT's creativity, found a home on
W3Schools. W3Schools' user-friendly platform and comprehensive guides facilitated seamless
development, providing real-time feedback, responsive design tips, and a supportive
community. This collaboration showcases the power of combining AI innovation with
accessible learning resources.
 8

Code
CSS Code:
body {
margin: 0;
overflow: hidden;
background-color: #8B008B; /* Purple background */
font-family: 'Arial', sans-serif;
}

#game-container {
position: relative;
height: 400px;
overflow: hidden;
}

#sky,
#ground {
position: absolute;
left: 0;
width: 100%;
height: 50%;
}

#sky {
top: 0;
background-color: #8B008B; /* Purple sky */
}

#ground {
bottom: 0;
background-color: #008000; /* Green grass */
}

#bird {
position: absolute;
left: 50px;
 9

top: 50%;
transform: translate(0, -50%);
width: 40px;
height: 30px; /* Adjusted height to make it look more like a bird */
background-color: #FFD700; /* Yellow bird */
border-radius: 10px; /* Rounded corners for a bird-like appearance */
background-image: url('bird.png'); /* Use an actual bird image if available */
background-size: cover;
}

#pipe {
position: absolute;
bottom: 0;
width: 50px;
height: 200px;
background-color: #008000; /* Green pipes */
}

#score,
#game-over {
position: absolute;
top: 10px;
left: 10px;
font-size: 18px;
color: #FFF;
}

#game-over {
display: none;
text-align: center;
font-size: 24px;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 10px;
}

#final-score {
font-weight: bold;
color: #FFD700;}
 10

Java Script Code:

Constants

onst CANVAS WIDTH = 400;

onst CANVAS HEIGHT = 500;
onst GRAVITY = 0.1;
onst JUMP SPEED = 4;
onst PIPE SPEED = 2;
onst PIPE GAP = 120;
onst PIPE WIDTH = 50;
onst PIPE COLOR = "#006600";
onst BIRD SIZE = 20;
onst BIRD COLOR = "#FFCC00";

Variables
ar canvas;
ar ctx;
ar bird;
ar pipes;
ar score;
ar isPlaying;

Bird class
lass Bird {
constructor() {
this.x = CANVAS WIDTH / 2;
this.y = CANVAS HEIGHT / 2;
this.speed = 0;

draw() {
ctx.fillStyle = BIRD COLOR;
ctx.fillRect(this.x - BIRD SIZE / 2, this.y - BIRD SIZE / 2, BIRD SIZE, BIRD SIZE);

update() {
this.speed += GRAVITY;
this.y += this.speed;
11

ump() {
this.speed = -JUMP SPEED;

Pipe class
lass Pipe {
constructor(x, y) {
this.x = x;
this.y = y;
this.width = PIPE WIDTH;
this.height = CANVAS HEIGHT - y;

draw() {
ctx.fillStyle = PIPE COLOR;
ctx.fillRect(this.x, this.y, this.width, this.height);

update() {
this.x -= PIPE SPEED;

sColliding(bird) {
if (bird.x + BIRD SIZE / 2 > this.x && bird.x - BIRD SIZE / 2 < this.x + this.width) {
if (bird.y - BIRD SIZE / 2 < this.y || bird.y + BIRD SIZE / 2 > this.y + this.height) {
return true;
}
}
return false;

Initialize game
unction init() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
12

bird = new Bird();

pipes = [];
score = 0;
sPlaying = true;

/ Generate initial pipes

for (var i = 0; i < 3; i++) {
var x = CANVAS WIDTH + i * (PIPE WIDTH + PIPE GAP);
var y = Math.random() * (CANVAS HEIGHT - 200) + 100;
pipes.push(new Pipe(x, y));

/ Event listener for jumping

canvas.addEventListener("click", function() {
bird.jump();
);

/ Start game loop

setInterval(update, 10);

Main game loop

unction update() {
/ Clear canvas
ctx.clearRect(0, 0,)
13

HTMLCode:

ht
ml>

head>
title>Flappy Bird</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
rc="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script
rc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Permanent Marker'
el='stylesheet'>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min
css">
/head>
style>
div1 {
font-size:48px; }
body { background-color: #721bc4 ; font-family: 'Pacifico'; }
h1{ background-color: #a666e3 ; text-shadow:5px 5px 5px #dfd2ec ;
text-align:center;}
canvas{ animation: mymove 5s infinite; border: 5px solid #0a3cda ;
order-style:dotted; border-radius: 15px 50px; }
@keyframes mymove {
50% {box-shadow: 10px 20px 30px blue;} }
h3{ font-family:'Permanent Marker'; }
/style>
body>
<div id="div1" class="fa"></div>

canvas id="myCanvas" width=320 height=480

tyle="background:url('http://s2js.com/img/etc/flappyback.png'); background-size:
00%; height: 95% "
/canvas>
<h3> <i onclick="myFunction(this)" class="fa fa-thumbs-up"></i></h3>
script>
unction smile() {
14

var a;
a = document.getElementById("div1");
a.innerHTML = "&#xf118;";
setTimeout(function () {
a.innerHTML = "&#xf11a;";
}, 1000);
setTimeout(function () {
a.innerHTML = "&#xf119;";
}, 2000);
setTimeout(function () {
a.innerHTML = "&#xf11a;";
}, 3000);

mile();
etInterval(smile, 4000);

unction myFunction(x) {
x.classList.toggle("fa-thumbs-down");

/
-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
--------------------
/
var ctx = myCanvas.getContext("2d");
var FPS = 40;
var jump amount = -10;
var max fall speed= +10;
var acceleration = 1;
var pipe speed = -2;
var game mode = 'prestart';
var time game last running;
var bottom bar offset = 0;
var pipes = [];

unction MySprite (img url) {

this.x = 0;
this.y = 0;
this.visible= true;
15

this.velocity x = 0;
this.velocity y = 0;
this.MyImg = new Image();
this.MyImg.src = img url || '';
this.angle = 0;
this.flipV = false;
this.flipH = false;
}
MySprite.prototype.Do Frame Things = function() {
ctx.save();
ctx.translate(this.x + this.MyImg.width/2, this.y + this.MyImg.height/2);
ctx.rotate(this.angle * Math.PI / 180);
if (this.flipV) ctx.scale(1,-1);
if (this.flipH) ctx.scale(-1,1);
if (this.visible) ctx.drawImage(this.MyImg, -this.MyImg.width/2,
this.MyImg.height/2);
this.x = this.x + this.velocity x;
this.y = this.y + this.velocity y;
ctx.restore();
}
unction ImagesTouching(thing1, thing2) {
if (!thing1.visible || !thing2.visible) return false;
if (thing1.x >= thing2.x + thing2.MyImg.width || thing1.x + thing1.MyImg.width
= thing2.x) return false;
if (thing1.y >= thing2.y + thing2.MyImg.height || thing1.y + thing1.MyImg.height
= thing2.y) return false;
return true;
}
unction Got Player Input(MyEvent) {
switch (game mode) {
case 'prestart': {
game mode = 'running';
break;
}
case 'running': {
bird.velocity y = jump amount;
break;
}
case 'over': if (new Date() - time game last running > 1000) {
reset game();
game mode = 'running';
16

break;
}
}
MyEvent.preventDefault();
}
ddEventListener("touchstart", Got Player Input);
ddEventListener("mousedown", Got Player Input);
ddEventListener("keydown", Got Player Input);
unction make bird slow and fall() {
if (bird.velocity y < max fall speed) {
bird.velocity y = bird.velocity y + acceleration;
}
if (bird.y > myCanvas.height - bird.MyImg.height) {
bird.velocity y = 0;
game mode = 'over';
}
}
unction add pipe(x pos, top of gap, gap width) {
var top pipe = new MySprite();
top pipe.MyImg = pipe piece;
top pipe.x = x pos;
top pipe.y = top of gap - pipe piece.height;
top pipe.velocity x = pipe speed;
pipes.push(top pipe);
var bottom pipe = new MySprite();
bottom pipe.MyImg = pipe piece;
bottom pipe.flipV = true;
bottom pipe.x = x pos;
bottom pipe.y = top of gap + gap width;
bottom pipe.velocity x = pipe speed;
pipes.push(bottom pipe );
}
unction make bird tilt appropriately() {
if (bird.velocity y < 0) {
bird.angle= -15;
}
else if (bird.angle < 70) {
bird.angle = bird.angle + 4;
}
17

}
unction show the pipes() {
for (var i=0; i < pipes.length; i++) {
pipes[i].Do Frame Things();
}
}
unction check for end game() {
for (var i=0; i < pipes.length; i++)
if (ImagesTouching(bird, pipes[i])) game mode = "over";
}
unction display intro instructions () {
ctx.font= "25px Arial";
ctx.fillStyle= "red";
ctx.textAlign="center";
ctx.fillText("Press, touch or click to start", myCanvas.width / 2, myCanvas.height
4);
}
unction display game over () {
var score = 0;
for (var i=0; i < pipes.length; i++)
if (pipes[i].x < bird.x) score = score + 0.5;
ctx.font= "30px Arial";
ctx.fillStyle= "red";
ctx.textAlign="center";
ctx.fillText("Game Over", myCanvas.width / 2, 100);
ctx.fillText("Score: " + score, myCanvas.width / 2, 150);
ctx.font= "20px Arial";
ctx.fillText("Click, touch, or press to play again", myCanvas.width / 2, 300);
}
unction display bar running along bottom() {
if (bottom bar offset < -23) bottom bar offset = 0;
ctx.drawImage(bottom_bar, bottom_bar_offset, myCanvas.height -
ottom bar.height);
}
unction reset game() {
bird.y = myCanvas.height / 2;
bird.angle= 0;
pipes=[]; // erase all the pipes from the array
add_all_my_pipes(); // and load them back in their starting
ositions
}
18

unction add all my pipes() {

add pipe(500, 100, 140);
add pipe(800, 50, 140);
add pipe(1000, 250, 140);
add pipe(1200, 150, 120);
add pipe(1600, 100, 120);
add pipe(1800, 150, 120);
add pipe(2000, 200, 120);
add pipe(2200, 250, 120);
add pipe(2400, 30, 100);
add pipe(2700, 300, 100);
add pipe(3000, 100, 80);
add pipe(3300, 250, 80);
add pipe(3600, 50, 60);
var finish line = new MySprite("http://s2js.com/img/etc/flappyend.png");
finish line.x = 3900;
finish line.velocity x = pipe speed;
pipes.push(finish line);
}
var pipe piece = new Image();
ipe piece.onload = add all my pipes;
ipe piece.src = "http://s2js.com/img/etc/flappypipe.png" ;
unction Do a Frame () {
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
bird.Do Frame Things();
display bar running along bottom();
switch (game mode) {
case 'prestart': {
display intro instructions();
break;
}
case 'running': {
time game last running = new Date();
bottom bar offset = bottom bar offset + pipe speed;
show the pipes();
make bird tilt appropriately();
make bird slow and fall();
check for end game();
break;
19

}
case 'over': {
make bird slow and fall();
display game over();
break;
}
}
}
var bottom bar = new Image();
ottom bar.src = "http://s2js.com/img/etc/flappybottom.png" ;

var bird = new MySprite("http://s2js.com/img/etc/flappybird.png");

ird.x = myCanvas.width / 3;
ird.y = myCanvas.height / 2;

etInterval(Do a Frame, 1000/FPS);

/script>
/body>
/html>
 20

Prompts
Prompt 1:

generate a working flappy bird game code in Html , Css , JAvascript as seperate files . There should not be any
glitches.

Prompt 2:

can u generate it a more elaborately

I want a purple background with a yellow bird and green grass

Prompt 3:

the bird is not moving as per clicks , make it move as per the clicks

Prompt 4:

add pipes along the way for the bird instead of blocks and add few clouds in the background

Prompt 5:

adjust the gravity settings , it is very much sensitive to clicks

Prompt 6:

add some graphics to the bird :

white feathers and orange beak

Final Prompt:

now combine all the previous refinements and generate a fresh code.
 21

Screen Shots Of Our Project

 22

Conclusion
Future Enhancements

The Flappy Bird Game Capstone Project lays the foundation for potential future enhancements,
including:

Sound Effects: Integrate sound effects for bird movements, pipe collisions, and scoring events to
enhance the overall gaming experience.

Level Progression: Implement multiple levels with increasing difficulty to provide players with a more
challenging and rewarding gaming experience.

Mobile Optimization: Optimize the game for mobile devices, ensuring smooth gameplay on
smartphones and tablets.

Conclusion

The Flappy Bird Game Capstone Project successfully achieved its objectives by delivering a visually
appealing and engaging gaming experience. The project provided valuable insights into game
development, user interaction, and the importance of responsive design. Future enhancements can
further elevate the game and cater to a broader audience. This capstone project showcases the team's
proficiency in web development, creative design, and problem-solving. The Flappy Bird Game stands
as a testament to the team's commitment to delivering high-quality and enjoyable gaming experiences.