From 8d61067ee2d68ea11f1f9701a35e23d89b7fb92c Mon Sep 17 00:00:00 2001 From: Mylloon Date: Thu, 24 Nov 2022 21:33:38 +0100 Subject: [PATCH] * add score on top of the game * reuse already created cones --- index.html | 1 + js/Env.js | 20 +++++++++++--------- js/Spade.js | 8 ++++++-- js/main.js | 14 ++++++++++++++ 4 files changed, 32 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 122566d..0cfff13 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,7 @@ +
diff --git a/js/Env.js b/js/Env.js index 5c86124..6d1e74c 100644 --- a/js/Env.js +++ b/js/Env.js @@ -113,12 +113,16 @@ export class Env { }); // Enemy animation - this.elements + const ennemies = this.elements .filter((entityData) => entityData[1] == TypeEntity.ennemy) - .map((ennemyData) => ennemyData[0]) - .forEach((ennemy) => { - ennemy.data.position.x -= 0.02; - }); + .map((ennemyData) => ennemyData[0]); + + ennemies.forEach((ennemy) => { + ennemy.data.position.x -= 0.05; + if (ennemy.data.position.x <= -10) { + ennemy.data.position.x = ennemy.startPos + Math.random() * 20; + } + }); }; /** @@ -146,12 +150,10 @@ export class Env { for (let index = 1; index < numberOfEnnemies + 1; index++) { const spade = new Spade( Math.random() * 0xffffff, - Math.round(Math.random()) ? Size.little : Size.big + Math.round(Math.random()) ? Size.little : Size.big, + startDelta + index + Math.random() * 20 ); - // Space ennemy randomly - spade.data.position.x += startDelta + index + Math.random() * 20; - this.addToScene(spade, TypeEntity.ennemy); } }; diff --git a/js/Spade.js b/js/Spade.js index 115a979..51f7723 100644 --- a/js/Spade.js +++ b/js/Spade.js @@ -1,7 +1,11 @@ import { Cone } from "./Cone.js"; export class Spade extends Cone { - constructor(color, level) { - super(color, level); + constructor(color, level, startPos) { + super(color, level, startPos); + + this.startPos = this.data.position.x + startPos; + + this.data.position.x = this.startPos; } } diff --git a/js/main.js b/js/main.js index 45ed9d1..59273e6 100644 --- a/js/main.js +++ b/js/main.js @@ -38,6 +38,18 @@ const main = () => { }); } + let score = document.getElementById("score"); + score.style = + "position: absolute; \ + top: 10px; \ + width: 100%; \ + text-align: center; \ + z-index: 100; \ + display: block; \ + color: white; \ + font-size: xx-large; \ + font-family: sans-serif;"; + /** * Run the game */ @@ -48,6 +60,8 @@ const main = () => { env.update(); } + score.textContent = `Score : ${Math.floor(env.clock.elapsedTime)}`; + requestAnimationFrame(animate); };