* 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>
|
</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>
|
||||||
|
|
||||||
|
|
20
js/Env.js
20
js/Env.js
|
@ -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);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
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
|
* 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);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Reference in a new issue