Break an infinite loop in JS with a keyboard press

Question

I am trying to make a game using JavaScript. I am currently working on making gravity. What I need is to make an infinite loop. However, I know that if I don't use a break statement, the browser will crash. Is there any way I can implement a break statement that will only happen when I specify?

Here's my current loop:

for (i = 0; i < Infinity; i++) {
  if (moveY > 300) {
    moveY = moveY - i * 2 + 3;
    move(moveX, moveY);
  } else {
    i = 0;
  }
}

https://stackoverflow.com/questions/1955687/best-way-for-simple-game-loop-in-javascript — gman, Nov 07 '19 at 14:53
If you start an Infinite loop, it will take the only thread of Javascript and leave nothing else for user interaction. see gman's comment instead. — Nicolas, Nov 07 '19 at 14:54
[How to use setInterval and clearInterval?](https://stackoverflow.com/questions/5978519/how-to-use-setinterval-and-clearinterval) — Adder, Nov 07 '19 at 14:57
setInterval is the wrong thing to for games. read about `requestAnimationFrame` — gman, Nov 07 '19 at 15:28

gman · Answer 1 · 2019-11-07T15:27:27.473

You don't make an infinite loop in JavaScript for a game loop. Instead you use requestAnimationFrame

const p = document.querySelector('#p');

function gameloop(time) {
  time *= 0.001;  // convert to seconds
  
  p.style.transform = `translate(${100 + Math.cos(time) * 100}px, ${100 + Math.sin(time) * 100}px)`;  

  requestAnimationFrame(gameloop);
}
requestAnimationFrame(gameloop);

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
.sprite {
  position: absolute;
  left: 0;
  top: 0;
  background: red;
  color: white;
  border-radius: 1em;
  padding: 0.5em;
}

<div class="sprite" id="p">player</div>

If you want input you use events

const p = document.querySelector('#p');
let x = 100;
let y = 100;
let dir = 0.2;
const vel = 100;  // 100 pixels per second
const turnSpeed = Math.PI;  // half a turn per second
const keys = [];

let previousTime = 0;
function gameloop(currentTime) {
  currentTime *= 0.001;  // convert to seconds
  deltaTime = currentTime - previousTime;
  previousTime = currentTime;
  
  if (keys[37]) dir -= turnSpeed * deltaTime;
  if (keys[39]) dir += turnSpeed * deltaTime;
  
  const dx = Math.cos(dir) * vel * deltaTime;
  const dy = Math.sin(dir) * vel * deltaTime;
  
  x = (x + dx + window.innerWidth) % window.innerWidth;
  y = (y + dy + window.innerHeight) % window.innerHeight;
  
  p.style.transform = `translate(${x}px, ${y}px)  rotate(${dir}rad)`;  

  requestAnimationFrame(gameloop);
}
requestAnimationFrame(gameloop);

window.addEventListener('keydown', (e) => {
  keys[e.keyCode] = true;
});
window.addEventListener('keyup', (e) => {
  keys[e.keyCode] = false;
});

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
.sprite {
  position: absolute;
  left: 0;
  top: 0;
  background: red;
  color: white;
  border-radius: 1em;
  padding: 0.5em;
}

<div class="sprite" id="p">player</div>
<div>click here then press &lt;- or -&gt;</div>

Break an infinite loop in JS with a keyboard press

1 Answers1