* add score on top of the game

* reuse already created cones
This commit is contained in:
Mylloon 2022-11-24 21:33:38 +01:00
parent b540776077
commit 8d61067ee2
Signed by: Anri
GPG key ID: A82D63DFF8D1317F
4 changed files with 32 additions and 11 deletions

View file

@ -16,6 +16,7 @@
</head>
<body>
<div id="score"></div>
<script src="./js/lib/three.min.js"></script>
<script src="./js/lib/dat.gui.min.js"></script>

View file

@ -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);
}
};

View file

@ -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;
}
}

View file

@ -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);
};