update flappydante

flappy-dante/JS/canvas.js

@@ -2,7 +2,7 @@ import Config from "./config.js";
 
 export default class Canvas {
   constructor() {
-    this.element = document.getElementById("flappy-bird");
+    this.element = document.getElementById("flappy-dante");
     this.context = this.element.getContext("2d");
 
     this.element.width = window.innerWidth;

flappy-dante/JS/bird.js → flappy-dante/JS/dante.js

@@ -1,31 +1,31 @@
 import Canvas from "./canvas.js";
 import Config from "./config.js";
 
-export default class Bird {
+export default class dante {
   constructor() {
     this.canvas = new Canvas();
     this.config = new Config();
 
-    this.imageBird = new Image();
-    this.imageBird.src = "Images/bird.png";
+    this.imageDante = new Image();
+    this.imageDante.src = "Images/dante.png";
 
-    this.flyBird = new Audio();
-    this.flyBird.src = "audio/fly.wav";
+    this.flyDante = new Audio();
+    this.flyDante.src = "audio/fly.wav";
 
-    this.dieBird = new Audio();
-    this.dieBird.src = "audio/die.wav";
+    this.dieDante = new Audio();
+    this.dieDante.src = "audio/die.wav";
 
-    this.birdWidth = 35;
-    this.birdHeight = 25;
-    this.birdJump = 1;
+    this.danteWidth = 35;
+    this.danteHeight = 25;
+    this.danteJump = 1;
 
-    this.birdX = 0;
-    this.birdPositionX = this.canvas.element.width / 2 - this.birdWidth / 1.5;
+    this.danteX = 0;
+    this.dantePositionX = this.canvas.element.width / 2 - this.danteWidth / 1.5;
 
-    this.birdY;
-    this.birdPositionY = 239;
+    this.danteY;
+    this.dantePositionY = 239;
 
-    this.targetBirdPositionY = this.canvas.height; // Set the initial target position to be the bottom of the screen
+    this.targetDantePositionY = 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)
@@ -42,7 +42,7 @@ export default class Bird {
   update() {
     // Apply gravity
     this.velocityY += this.config.gravity;
-    this.birdPositionY += this.velocityY;
+    this.dantePositionY += this.velocityY;
 
     // Limit speed
     if (this.velocityY > this.maxDownwardsSpeed) {
@@ -51,38 +51,39 @@ export default class Bird {
       this.velocityY = this.maxUpwardsSpeed;
     }
 
-    // Prevent bird from going off the top of the screen
-    if (this.birdPositionY < 0) {
-      this.birdPositionY = 0;
+    // Prevent dante from going off the top of the screen
+    if (this.dantePositionY < 0) {
+      this.dantePositionY = 0;
       this.velocityY = 0;
     }
   }
 
   draw() {
     this.config.index += 0.3;
-    this.birdY = Math.floor((this.config.index % 9) / 3) * (this.birdWidth - 9);
+    this.danteY =
+      Math.floor((this.config.index % 9) / 3) * (this.danteWidth - 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;
+    let scaledDanteWidth = this.danteWidth * this.canvas.scaleFactor;
+    let scaledDanteHeight = this.danteHeight * this.canvas.scaleFactor;
+    let scaledPositionX = this.dantePositionX;
+    let scaledPositionY = this.dantePositionY * 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
+      this.imageDante,
+      this.danteX,
+      this.danteY,
+      this.danteWidth,
+      this.danteHeight,
       scaledPositionX,
       scaledPositionY,
-      scaledBirdWidth,
-      scaledBirdHeight
+      scaledDanteWidth,
+      scaledDanteHeight
     );
   }
 
   jump() {
     this.velocityY = this.lift;
-    this.flyBird.play();
+    this.flyDante.play();
   }
 
   control() {

flappy-dante/JS/main.js

@@ -1,7 +1,7 @@
 import Canvas from "./canvas.js";
 import GameLoop from "./gameLoop.js";
 import Pipe from "./pipe.js";
-import Bird from "./bird.js";
+import Dante from "./dante.js";
 import Score from "./score.js";
 import WindowGameOver from "./windowGameOver.js";
 import Medal from "./medal.js";
@@ -12,7 +12,7 @@ class Game {
   constructor() {
     this.canvas = new Canvas();
     this.pipe = new Pipe();
-    this.bird = new Bird();
+    this.dante = new Dante();
     this.score = new Score();
     this.windowGameOver = new WindowGameOver();
     this.medal = new Medal(this.score);
@@ -40,20 +40,20 @@ class Game {
   update() {
     if (this.config.gamePlaying) {
       this.pipe.update(
-        this.bird,
+        this.dante,
         this.gameLoop,
         this.windowGameOver,
         this.score,
         this.medal
       );
-      this.bird.update();
+      this.dante.update();
     }
   }
 
   draw() {
     this.canvas.draw();
     this.pipe.draw();
-    this.bird.draw();
+    this.dante.draw();
     if (this.config.gamePlaying) this.score.draw();
     if (!this.config.gamePlaying) this.windowGameStart.draw();
   }

flappy-dante/JS/pipe.js

@@ -34,51 +34,51 @@ export default class Pipe {
       },
     ];
 
-    this.btnRestart = document.querySelector(".btn-flappy-bird");
+    this.btnRestart = document.querySelector(".btn-flappy-dante");
 
-    this.birdCollisionPositionY = 485;
+    this.danteCollisionPositionY = 485;
   }
 
-  didCollide(bird, pipe) {
+  didCollide(dante, pipe) {
     const scaledForegroundHeight =
       this.canvas.foreground.height * this.canvas.scaleFactor;
 
-    const birdBottomEdge = bird.birdPositionY + bird.birdHeight;
+    const danteBottomEdge = dante.dantePositionY + dante.danteHeight;
 
     const playableAreaHeight =
       (this.canvas.element.height - scaledForegroundHeight) /
       this.canvas.scaleFactor;
 
-    const hitGround = birdBottomEdge >= playableAreaHeight;
+    const hitGround = danteBottomEdge >= playableAreaHeight;
 
-    const birdHitsPipeHorizontally =
-      bird.birdPositionX + bird.birdWidth * this.canvas.scaleFactor >= pipe.x &&
-      bird.birdPositionX <= pipe.x + this.pipeUp.width;
-    const birdHitsTopPipeVertically =
-      bird.birdPositionY <= pipe.y - 5 + this.pipeUp.height - 200;
-    const birdHitsBottomPipeVertically =
-      bird.birdPositionY + bird.birdHeight >=
+    const danteHitsPipeHorizontally =
+      dante.dantePositionX + dante.danteWidth * this.canvas.scaleFactor >=
+        pipe.x && dante.dantePositionX <= pipe.x + this.pipeUp.width;
+    const danteHitsTopPipeVertically =
+      dante.dantePositionY <= pipe.y - 5 + this.pipeUp.height - 200;
+    const danteHitsBottomPipeVertically =
+      dante.dantePositionY + dante.danteHeight >=
       pipe.y + this.pipeUp.height + this.gap - 200;
     return (
-      (birdHitsPipeHorizontally &&
-        (birdHitsTopPipeVertically || birdHitsBottomPipeVertically)) ||
+      (danteHitsPipeHorizontally &&
+        (danteHitsTopPipeVertically || danteHitsBottomPipeVertically)) ||
       hitGround
     );
   }
 
-  doGameOver(gameLoop, bird, score, windowGameOver, medal) {
+  doGameOver(gameLoop, dante, score, windowGameOver, medal) {
     gameLoop.cancelAnimation();
 
     document.addEventListener("click", () => {
-      bird.flyBird.pause();
+      dante.flyDante.pause();
     });
 
     document.addEventListener("touchstart", () => {
-      bird.flyBird.pause();
+      dante.flyDante.pause();
     });
 
-    bird.birdPositionY = this.birdCollisionPositionY;
-    bird.dieBird.play();
+    dante.dantePositionY = this.danteCollisionPositionY;
+    dante.dieDante.play();
 
     score.bestScoreRecord();
     windowGameOver.draw(score._score, score._bestScore, medal);
@@ -94,7 +94,7 @@ export default class Pipe {
     });
   }
 
-  update(bird, gameLoop, windowGameOver, score, medal) {
+  update(dante, gameLoop, windowGameOver, score, medal) {
     this.pipes.forEach((pipe) => {
       pipe.x -= this.speed;
       if (pipe.x < this.spaceBetweenPipe && !pipe.newPipeAdded) {
@@ -111,16 +111,16 @@ export default class Pipe {
         this.pipes.shift();
       }
 
-      if (pipe.x < bird.birdPositionX && !pipe.hasBeenScored) {
+      if (pipe.x < dante.dantePositionX && !pipe.hasBeenScored) {
         score.increaseScore();
         score.audioScore.play();
         pipe.hasBeenScored = true;
       }
 
-      const didCollide = this.didCollide(bird, pipe);
+      const didCollide = this.didCollide(dante, pipe);
 
       if (didCollide) {
-        this.doGameOver(gameLoop, bird, score, windowGameOver, medal);
+        this.doGameOver(gameLoop, dante, score, windowGameOver, medal);
       }
     });
   }

flappy-dante/index.html

@@ -30,8 +30,8 @@
   </head>
 
   <body>
-    <canvas id="flappy-bird"></canvas>
-    <button class="btn-flappy-bird"></button>
+    <canvas id="flappy-dante"></canvas>
+    <button class="btn-flappy-dante"></button>
 
     <script src="./JS/main.js" type="module"></script>
   </body>

flappy-dante/style/style.css

@@ -10,7 +10,7 @@ body {
     align-items: center;
 }
 
-.btn-flappy-bird {
+.btn-flappy-dante {
     display: none;
     padding: 20px 60px;
     background: url('../Images/btnStartGame.png') no-repeat center / cover;
@@ -26,10 +26,10 @@ body {
     position: absolute;
 }
 
-.btn-flappy-bird:active {
+.btn-flappy-dante:active {
     transform: translateY(5%);
 }
 
-.btn-flappy-bird.active {
+.btn-flappy-dante.active {
     display: inline-block
 }