* 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> </head>
<body> <body>
<div id="score"></div>
<script src="./js/lib/three.min.js"></script> <script src="./js/lib/three.min.js"></script>
<script src="./js/lib/dat.gui.min.js"></script> <script src="./js/lib/dat.gui.min.js"></script>

View file

@ -113,12 +113,16 @@ export class Env {
}); });
// Enemy animation // Enemy animation
this.elements const ennemies = this.elements
.filter((entityData) => entityData[1] == TypeEntity.ennemy) .filter((entityData) => entityData[1] == TypeEntity.ennemy)
.map((ennemyData) => ennemyData[0]) .map((ennemyData) => ennemyData[0]);
.forEach((ennemy) => {
ennemy.data.position.x -= 0.02; 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++) { for (let index = 1; index < numberOfEnnemies + 1; index++) {
const spade = new Spade( const spade = new Spade(
Math.random() * 0xffffff, 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); this.addToScene(spade, TypeEntity.ennemy);
} }
}; };

View file

@ -1,7 +1,11 @@
import { Cone } from "./Cone.js"; import { Cone } from "./Cone.js";
export class Spade extends Cone { export class Spade extends Cone {
constructor(color, level) { constructor(color, level, startPos) {
super(color, level); 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 * Run the game
*/ */
@ -48,6 +60,8 @@ const main = () => {
env.update(); env.update();
} }
score.textContent = `Score : ${Math.floor(env.clock.elapsedTime)}`;
requestAnimationFrame(animate); requestAnimationFrame(animate);
}; };