104 lines
3 KiB
JavaScript
104 lines
3 KiB
JavaScript
import { Env, TypeEntity } from "./Env.js";
|
|
import { Plane } from "./Plane.js";
|
|
import { Player } from "./Player.js";
|
|
import { Quality } from "./utils.js";
|
|
|
|
window.addEventListener("load", () => main());
|
|
|
|
const main = () => {
|
|
// THREE.js
|
|
const env = new Env();
|
|
document.body.appendChild(env.getDomElement());
|
|
|
|
// World
|
|
const plan = new Plane(
|
|
window.innerWidth / 50,
|
|
10,
|
|
THREE.Color.NAMES.white,
|
|
THREE.Color.NAMES.black
|
|
);
|
|
env.addToScene(plan);
|
|
|
|
// Player
|
|
const player = new Player(THREE.Color.NAMES.pink);
|
|
env.addToScene(player, TypeEntity.player);
|
|
addEventListener("keypress", player.controlUser);
|
|
|
|
// Generate random map
|
|
env.generateRandomMap(10);
|
|
|
|
// GUI
|
|
const gui = new dat.gui.GUI({ closeOnTop: true });
|
|
const menu = Quality.buildGUI(env.quality);
|
|
for (const quality in menu) {
|
|
gui.add(menu, quality)
|
|
.listen()
|
|
.onFinishChange(() => {
|
|
Quality.update(env.setQuality, menu, quality);
|
|
});
|
|
}
|
|
|
|
let score = document.getElementById("score");
|
|
score.style =
|
|
"position: absolute; \
|
|
top: 10px; \
|
|
width: 100%; \
|
|
text-align: center; \
|
|
display: block; \
|
|
color: white; \
|
|
font-size: xx-large; \
|
|
font-family: sans-serif;";
|
|
|
|
/**
|
|
* Run the game
|
|
*/
|
|
const animate = () => {
|
|
const delta = env.clock.getDelta();
|
|
const ticks = Math.round(delta / (1 / 120));
|
|
for (let i = 0; i < ticks; i++) {
|
|
if (env.update()) {
|
|
let end = document.createElement("p");
|
|
end.textContent = "Partie terminée !";
|
|
end.style =
|
|
"margin: 0; \
|
|
position: absolute; \
|
|
top: 50%; \
|
|
left: 35%; \
|
|
font-size: 400%; \
|
|
font-family: sans-serif; \
|
|
color: white; \
|
|
transform: translate(-50%, -50%) }";
|
|
document.body.appendChild(end);
|
|
|
|
let restart = document.createElement("button");
|
|
restart.textContent = "Cliquez ici pour redémarrer";
|
|
restart.style =
|
|
"margin: 0; \
|
|
position: absolute; \
|
|
top: 60%; \
|
|
left: 27%; \
|
|
border: none; \
|
|
background: none; \
|
|
color: white; \
|
|
font-size: 400%; \
|
|
font-family: sans-serif; \
|
|
transform: translate(-50%, -50%) }";
|
|
document.body.appendChild(restart);
|
|
|
|
restart.addEventListener("click", () => {
|
|
location.href = location.href;
|
|
});
|
|
|
|
gui.destroy();
|
|
return;
|
|
}
|
|
}
|
|
|
|
score.textContent = `Score : ${Math.floor(env.clock.elapsedTime)}`;
|
|
|
|
requestAnimationFrame(animate);
|
|
};
|
|
|
|
// Run it
|
|
animate();
|
|
};
|