commit 60509a00ffbefdabc6322642621ccbc4fabc7dd4 Author: Marklogo Date: Thu Mar 21 01:53:12 2024 +0100 first commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 diff --git a/assets/PngItem_2298804.png b/assets/PngItem_2298804.png new file mode 100644 index 0000000..e6d3bb7 Binary files /dev/null and b/assets/PngItem_2298804.png differ diff --git a/assets/bg.png b/assets/bg.png new file mode 100644 index 0000000..cd01e03 Binary files /dev/null and b/assets/bg.png differ diff --git a/assets/flappybird.png b/assets/flappybird.png new file mode 100644 index 0000000..1481095 Binary files /dev/null and b/assets/flappybird.png differ diff --git a/assets/suelo.png b/assets/suelo.png new file mode 100644 index 0000000..ee3a4c0 Binary files /dev/null and b/assets/suelo.png differ diff --git a/flappy-bird-master.zip b/flappy-bird-master.zip new file mode 100644 index 0000000..5867ac9 Binary files /dev/null and b/flappy-bird-master.zip differ diff --git a/game.js b/game.js new file mode 100644 index 0000000..06d1f9a --- /dev/null +++ b/game.js @@ -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(); +}; diff --git a/index.html b/index.html new file mode 100644 index 0000000..517069e --- /dev/null +++ b/index.html @@ -0,0 +1,15 @@ + + + + + + + + + Flappy bird + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..0d7cc68 --- /dev/null +++ b/style.css @@ -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%; +} \ No newline at end of file