Handle low FPS better

This commit is contained in:
Arne Keller 2022-02-01 17:48:16 +01:00
parent 5f66862843
commit a487890d83
3 changed files with 16 additions and 5 deletions

View File

@ -10,6 +10,7 @@
<body>
<div id="info">Score: <span id="score">0</span></div>
<button id="start">Start</button>
<div id="version">Version 1.1</div>
<script src="./gyronorm.complete.min.js"></script>
<script src="./three.min.js"></script>

12
game.js
View File

@ -114,7 +114,7 @@ let running = false;
const spheres = [];
// wall segments
const borders = [];
let frameCount = 0;
let time = Date.now() / 1000.0;
function logger(text) {
console.log(text);
@ -296,7 +296,6 @@ document.getElementById("start").onclick = () => {
borders.length = 0;
removed = 0;
lastSpawned = 0;
frameCount = 0;
camera.position.set(0, 10, 25);
camera.lookAt(scene.position);
running = true;
@ -346,10 +345,13 @@ function onWindowResize() {
// main render/update function called once per frame
function animate() {
let now = Date.now() / 1000.0;
let delta = now - time;
time = now;
requestAnimationFrame(animate);
uniforms.iTime.value = frameCount / 60.0;
frameCount++;
uniforms.iTime.value += delta;
if (running) {
@ -385,7 +387,7 @@ function animate() {
if (running) {
// advance player position, increase speed, handle movement input
camera.position.z -= 0.5 * speed;
camera.position.z -= 0.5 * speed * delta * 60.0;
speed += 0.01;
if (!Number.isNaN(leftRightMove)) {
camera.position.x += 0.1 * leftRightMove;

View File

@ -41,3 +41,11 @@ button {
pointer-events: none;
z-index: 1;
}
#version {
position: absolute;
bottom: 10px;
right: 10px;
font-size: small;
z-index: 1;
}