Разорвать бесконечный цикл в JS с помощью нажатия клавиатуры - PullRequest
Новая
       32

Разорвать бесконечный цикл в JS с помощью нажатия клавиатуры

0 голосов
/ 07 ноября 2019

Я пытаюсь сделать игру, используя JavaScript. В настоящее время я работаю над созданием гравитации. Что мне нужно, это сделать бесконечный цикл. Тем не менее, я знаю, что если я не буду использовать оператор break, браузер вылетит. Можно ли как-нибудь реализовать оператор break, который произойдет только тогда, когда я укажу?

Вот мой текущий цикл: 

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

1 Ответ

0 голосов
/ 07 ноября 2019

Вы не делаете бесконечный цикл в JavaScript для игрового цикла. Вместо этого вы используете 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>

Если вы хотите ввести, вы используете события 

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>
...