Add flappy-dante contents and update meta tags

flappy-dante/JS/bird.js

@@ -0,0 +1,107 @@
+import Canvas from "./canvas.js";
+import Config from "./config.js";
+
+export default class Bird {
+  constructor() {
+    this.canvas = new Canvas();
+    this.config = new Config();
+
+    this.imageBird = new Image();
+    this.imageBird.src = "Images/bird.png";
+
+    this.flyBird = new Audio();
+    this.flyBird.src = "audio/fly.wav";
+
+    this.dieBird = new Audio();
+    this.dieBird.src = "audio/die.wav";
+
+    this.birdWidth = 35;
+    this.birdHeight = 25;
+    this.birdJump = 1;
+
+    this.birdX = 0;
+    this.birdPositionX = this.canvas.element.width / 2 - this.birdWidth / 1.5;
+
+    this.birdY;
+    this.birdPositionY = 239;
+
+    this.targetBirdPositionY = this.canvas.height; // Set the initial target position to be the bottom of the screen
+    this.lerpRate = 0.3;
+    this.velocityY = 0;
+    this.lift = -8; // The force of the jump (negative because it goes up)
+    this.maxDownwardsSpeed = 5;
+    this.maxUpwardsSpeed = -10;
+
+    this.control();
+  }
+
+  lerp(start, end, t) {
+    return start * (1 - t) + end * t;
+  }
+
+  update() {
+    // Apply gravity
+    this.velocityY += this.config.gravity;
+    this.birdPositionY += this.velocityY;
+
+    // Limit speed
+    if (this.velocityY > this.maxDownwardsSpeed) {
+      this.velocityY = this.maxDownwardsSpeed;
+    } else if (this.velocityY < this.maxUpwardsSpeed) {
+      this.velocityY = this.maxUpwardsSpeed;
+    }
+
+    // Prevent bird from going off the top of the screen
+    if (this.birdPositionY < 0) {
+      this.birdPositionY = 0;
+      this.velocityY = 0;
+    }
+  }
+
+  draw() {
+    this.config.index += 0.3;
+    this.birdY = Math.floor((this.config.index % 9) / 3) * (this.birdWidth - 9);
+
+    let scaledBirdWidth = this.birdWidth * this.canvas.scaleFactor;
+    let scaledBirdHeight = this.birdHeight * this.canvas.scaleFactor;
+    let scaledPositionX = this.birdPositionX;
+    let scaledPositionY = this.birdPositionY * this.canvas.scaleFactor;
+
+    this.canvas.context.drawImage(
+      this.imageBird,
+      this.birdX,
+      this.birdY,
+      this.birdWidth, // Original sprite crop width (if using sprite sheet)
+      this.birdHeight, // Original sprite crop height
+      scaledPositionX,
+      scaledPositionY,
+      scaledBirdWidth,
+      scaledBirdHeight
+    );
+  }
+
+  jump() {
+    this.velocityY = this.lift;
+    this.flyBird.play();
+  }
+
+  control() {
+    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+
+    if (isMobile) {
+      this.canvas.element.addEventListener("touchstart", () => {
+        this.jump();
+      });
+    } else {
+      this.canvas.element.addEventListener("click", () => {
+        this.jump();
+      });
+
+      document.addEventListener("keydown", (event) => {
+        if (event.code === "Space") {
+          this.jump();
+        }
+      });
+    }
+  }
+}

flappy-dante/JS/canvas.js

@@ -0,0 +1,39 @@
+import Config from "./config.js";
+
+export default class Canvas {
+  constructor() {
+    this.element = document.getElementById("flappy-bird");
+    this.context = this.element.getContext("2d");
+
+    this.element.width = window.innerWidth;
+    this.element.height = window.innerHeight;
+    this.originalHeight = 630; // Original design height
+    this.originalWidth = 288; // Original design height
+    this.scaleFactor = this.element.height / this.originalHeight; // Scale to fit the screen
+
+    this.background = new Image();
+    this.background.src = "Images/background.png";
+
+    this.foreground = new Image();
+    this.foreground.src = "Images/foreground.png";
+
+    this.backgroundX = 0;
+    this.backgroundY = 0;
+
+    this.config = new Config();
+  }
+
+  draw() {
+    this.backgroundX = -(
+      (this.config.index * this.config.speedBackground) %
+      this.element.width
+    );
+
+    this.context.drawImage(this.background, this.backgroundX, this.backgroundY);
+    this.context.drawImage(
+      this.background,
+      this.backgroundX + this.element.width,
+      this.backgroundY
+    );
+  }
+}

flappy-dante/JS/config.js

@@ -0,0 +1,8 @@
+export default class Config {
+  constructor() {
+    this.index = 0;
+    this.speedBackground = 3;
+    this.gravity = 0.6;
+    this.gamePlaying = false;
+  }
+}

flappy-dante/JS/gameFeatures.js

@@ -0,0 +1,7 @@
+class RefreshGame {
+  restart() {
+    location.reload();
+  }
+}
+
+export default RefreshGame;

flappy-dante/JS/gameLoop.js

@@ -0,0 +1,19 @@
+export default class GameLoop {
+  constructor(update, draw) {
+    this.update = update;
+    this.draw = draw;
+
+    this.idAnimation = this.animation();
+  }
+
+  animation() {
+    this.idAnimation = requestAnimationFrame(this.animation.bind(this));
+
+    this.update();
+    this.draw();
+  }
+
+  cancelAnimation() {
+    cancelAnimationFrame(this.idAnimation);
+  }
+}

flappy-dante/JS/main.js

@@ -0,0 +1,61 @@
+import Canvas from "./canvas.js";
+import GameLoop from "./gameLoop.js";
+import Pipe from "./pipe.js";
+import Bird from "./bird.js";
+import Score from "./score.js";
+import WindowGameOver from "./windowGameOver.js";
+import Medal from "./medal.js";
+import Config from "./config.js";
+import WindowGameStart from "./windowGameStart.js";
+
+class Game {
+  constructor() {
+    this.canvas = new Canvas();
+    this.pipe = new Pipe();
+    this.bird = new Bird();
+    this.score = new Score();
+    this.windowGameOver = new WindowGameOver();
+    this.medal = new Medal(this.score);
+    this.config = new Config();
+    this.windowGameStart = new WindowGameStart();
+
+    this.gameLoop = new GameLoop(this.update.bind(this), this.draw.bind(this));
+    this.score.localStorageScore();
+
+    this.canvas.element.addEventListener("click", () => {
+      this.config.gamePlaying = true;
+    });
+
+    document.addEventListener("keydown", (event) => {
+      if (event.code === "Space") {
+        this.config.gamePlaying = true;
+      }
+    });
+
+    this.canvas.element.addEventListener("touchstart", () => {
+      this.config.gamePlaying = true;
+    });
+  }
+
+  update() {
+    if (this.config.gamePlaying) {
+      this.pipe.update(
+        this.bird,
+        this.gameLoop,
+        this.windowGameOver,
+        this.score,
+        this.medal
+      );
+      this.bird.update();
+    }
+  }
+
+  draw() {
+    this.canvas.draw();
+    this.pipe.draw();
+    this.bird.draw();
+    if (this.config.gamePlaying) this.score.draw();
+    if (!this.config.gamePlaying) this.windowGameStart.draw();
+  }
+}
+new Game();

flappy-dante/JS/medal.js

@@ -0,0 +1,49 @@
+import Canvas from "./canvas.js";
+
+export default class Medal {
+  constructor(score) {
+    this.canvas = new Canvas();
+
+    this.medalImg = new Image();
+    this.medalImg.src = "Images/medal.png";
+
+    this.medalWidth = 45;
+    this.medalHeight = 45;
+
+    this.medalPositionImgX;
+    this.medalPositionImgY;
+
+    this.medalPositionCanvasX = this.canvas.element.width / 2 - 90;
+
+    this.medalPositionCanvasY = 186;
+
+    this.score = score;
+  }
+
+  draw() {
+    if (this.score._bestScore > 0 && this.score._bestScore <= 15) {
+      this.medalPositionImgX = 0;
+      this.medalPositionImgY = 0;
+    } else if (this.score._bestScore > 15) {
+      this.medalPositionImgX = 48;
+      this.medalPositionImgY = 0;
+    } else if (this.score._bestScore > 30) {
+      this.medalPositionImgX = 0;
+      this.medalPositionImgY = 45;
+    } else if (this.score._bestScore > 50) {
+      this.medalPositionImgX = 48;
+      this.medalPositionImgY = 45;
+    }
+    this.canvas.context.drawImage(
+      this.medalImg,
+      this.medalPositionImgX,
+      this.medalPositionImgY,
+      this.medalWidth,
+      this.medalHeight,
+      this.medalPositionCanvasX,
+      this.medalPositionCanvasY,
+      this.medalWidth,
+      this.medalHeight
+    );
+  }
+}