* add score on top of the game
* reuse already created cones
This commit is contained in:
parent
b540776077
commit
8d61067ee2
4 changed files with 32 additions and 11 deletions
|
@ -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>
|
||||
|
||||
|
|
20
js/Env.js
20
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);
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
14
js/main.js
14
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);
|
||||
};
|
||||
|
||||
|
|
Reference in a new issue