Fix restart

This commit is contained in:
Arne Keller 2022-01-31 18:45:39 +01:00
parent 711bc739ec
commit 99735c7ebf
2 changed files with 21 additions and 20 deletions

View File

@ -6,17 +6,12 @@
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="./main.css">
<link rel="icon" href="./favicon.png">
<script src="./gyronorm.complete.min.js"></script>
</head>
<body>
<div id="info">Score: <span id="score">0</span></div>
<button id="start">Start</button>
<div id="info">
Score: <span id="score">0</span><br/>
<button id="set_head">Calibrate neutral position</button>
<p id="log"></p>
</div>
<button id="start" disabled>Start</button>
<script src="./gyronorm.complete.min.js"></script>
<script src="./three.min.js"></script>
<script src="./game.js"></script>
</body>

28
game.js
View File

@ -156,7 +156,6 @@ function init_gn() {
start_gn();
}).catch(function(e) {
console.error(e);
document.getElementById("set_head").remove();
document.getElementById("start").disabled = false;
});
@ -204,20 +203,19 @@ function gnCallBack(data) {
}
function set_head_gn() {
gn.setHeadDirection();
try {
gn.setHeadDirection();
} catch (e) {
// fails if the sensor is not available
}
headSet = true;
}
document.getElementById("set_head").addEventListener("click", () => {
document.getElementById("set_head").remove();
set_head_gn();
document.getElementById("start").disabled = false;
});
init_gn();
// setup three.js: materials, geometries, scene, lighting and camera
let scene, renderer;
scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10000);
// obstacle geometry and material
@ -270,10 +268,12 @@ const material = new THREE.ShaderMaterial({
});
const borderGeometry = new THREE.PlaneGeometry(1, 1);
init();
animate();
document.getElementById("start").onclick = () => {
set_head_gn();
try {
document.body.requestFullscreen();
} catch (e) {
@ -289,12 +289,21 @@ document.getElementById("start").onclick = () => {
scene.remove(spheres[i]);
}
spheres.length = 0;
for (let i = 0; i < borders.length; i++) {
scene.remove(borders[i]);
}
borders.length = 0;
removed = 0;
lastSpawned = 0;
frameCount = 0;
camera.position.set(0, 10, 25);
camera.lookAt(scene.position);
running = true;
}
function gameOver() {
running = false;
headSet = false;
document.getElementById("score").innerText = document.getElementById("score").innerText + " - Game Over!";
document.getElementById("start").style.zIndex = 0;
document.getElementById("start").style.visibility = "visible";
@ -303,8 +312,6 @@ function gameOver() {
function init() {
scene = new THREE.Scene();
camera.position.set(0, 10, 25);
camera.lookAt(scene.position);
@ -435,7 +442,6 @@ function animate() {
const newZ = borders.length == 0 ? -200 : borders[borders.length - 1].position.z - tunnelRadius * 2;
let border = new THREE.Mesh(borderGeometry, material);
//border.position.x = -70;
border.position.y = -tunnelRadius;
border.rotation.x = -Math.PI / 2;
border.position.z = newZ;