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"> <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 type="text/css" rel="stylesheet" href="./main.css">
<link rel="icon" href="./favicon.png"> <link rel="icon" href="./favicon.png">
<script src="./gyronorm.complete.min.js"></script>
</head> </head>
<body> <body>
<div id="info">Score: <span id="score">0</span></div>
<button id="start">Start</button>
<div id="info"> <script src="./gyronorm.complete.min.js"></script>
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="./three.min.js"></script> <script src="./three.min.js"></script>
<script src="./game.js"></script> <script src="./game.js"></script>
</body> </body>

26
game.js
View File

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