marklogo/flappy_bird
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Marklogo 2024-03-21 01:53:12 +01:00
commit 60509a00ff
9 changed files with 127 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
README.md Normal file
View File

BIN
assets/PngItem_2298804.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
assets/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
assets/flappybird.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
assets/suelo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 961 B

BIN
flappy-bird-master.zip Normal file
View File

Binary file not shown.

88
game.js Normal file
View File

@ -0,0 +1,88 @@
const canvas = document.getElementById("lienzo");
const ctx = canvas.getContext("2d");
const width = (canvas.width = 288);
const height = (canvas.height = 512);
console.log(canvas.width, canvas.height);
const background = new Image();
background.src = "./assets/bg.png";
class Suelo {
constructor(ctx) {
this.ctx = ctx;
this.sueloImg = new Image();
this.sueloImg.src = "./assets/suelo.png";
this.posX = 0;
this.posY = height - this.sueloImg.height;
}
update() {
this.posX--;
if (this.posX + this.sueloImg.width === 0) this.posX = 0;
}
draw() {
ctx.drawImage(this.sueloImg, this.posX, this.posY);
ctx.drawImage(this.sueloImg, this.posX + width, this.posY);
}
}
class tuberia {
constructor(ctx, imagen) {
this.ctx = ctx;
this.posX;
this.posY;
}
update() {}
draw() {}
}
class Bird {
constructor(ctx) {
this.ctx = ctx;
this.birdImg = new Image();
this.birdImg.src = "./assets/flappybird.png";
this.posY = height / 2;
this.posX = width / 8;
this.width = 34;
this.height = 24;
}
update() {
}
draw() {
this.ctx.drawImage(
this.birdImg,
0,
0,
this.width,
this.height,
this.posX,
this.posY,
this.width,
this.height
);
}
}
function generaTuberia() {}
function gameLoop(timeStamp) {
ctx.clearRect(0, 0, width, height);
ctx.drawImage(background, 0, 0, width, height);
suelo.update();
suelo.draw();
bird.draw();
requestAnimationFrame(gameLoop); // Llamar a gameLoop de nuevo en el siguiente fotograma
}
const suelo = new Suelo(ctx);
const bird = new Bird(ctx);
window.onload = () => {
gameLoop();
};

15
index.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
<link rel="stylesheet" href="style.css">
<title>Flappy bird</title>
</head>
<body>
<canvas id="lienzo"></canvas>
</body>
<script src="./game.js"></script>
</html>

24
style.css Normal file
View File

@ -0,0 +1,24 @@
* {
box-sizing: border-box;
min-width: 0;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
padding: 2rem;
background: linear-gradient(to bottom right, #0f2027, #203a43, #2c5364);
color: white;
font-family: "Press Start 2P", cursive;
text-align: center;
}
#lienzo {
background-color: #2c5364;
width: auto;
height: 80%;
}