Игра Javascript, заставьте космический корабль стрелять при нажатии с интервалом

Вы хотите использовать временные интервалы вместо слушателей.

var myVar = setInterval(timeCycle, 50);
function timeCycle() {
    //all the stuff you currently have listeners for.
}

Таким образом, когда наступит временной интервал, он выполнит нажатие ваших клавиш только один раз. Затем, если вы хотите изменить темп стрельбы, вы добавляете что-то вроде этого:

setInterval(timeCycle, 50);
rateOfFire = 5;
shootCoolDown = 0;
function timeCycle() {
    if (shootPressed === true) {
        if (shootCoolDown === 0){
            shootCoolDown = rateOfFire;
            shoot();
        } 
    }
    if (shootCoolDown > 0){
        shootCoolDown --;
    }
}

Таким образом, он будет стрелять каждые 5 игровых циклов (или в данном случае 4 выстрела в секунду).

Есть и более необычные вещи, которые вы можете сделать, чтобы создать систему дельта-времени, чтобы компенсировать задержку, изменив скорость симуляции в зависимости от времени, которое требуется вашему timeCycle для выполнения, но это, как правило, намного сложнее и легко испортить, поэтому я не стал бы предлагать новичкам спускаться в кроличью нору.

[РЕДАКТИРОВАТЬ] Итак, недавно я видел несколько вопросов о deltaTime, но не вижу хороших примеров того, как его реализовать; Итак, вот базовый пример, который я собрал. Чтобы реализовать это, просто замените часть GAME STUFF своим реальным кодом того, что происходит в игровом цикле, и запустите все ваши временные значения с помощью функции delta (), и она преобразует ваши значения из единиц в секунду в единиц на текущий кадр.

My game us under a load of <input type = "text" id = "lag" value = "100000000"> operations per frame.<br>
My speed is = <input type = "text" id = "speed" value = "500"> px per second<br>
I moved <span id = "adjusted"></span>px this frame.<br>
FPS: <span id = "fps"></span>

<script>
function wrapDelta(lastTime){
   var d = new Date();
   var n = d.getSeconds()*1000 + d.getMilliseconds();
   if (lastTime >= n) {
        lastTime -= 60000;
   }
   return n - lastTime;
}

function delta(input){
   return input * deltaCoeff / 1000;
}

var d = new Date();
var ed = new Date();
var endTime =  d.getSeconds()*1000 + d.getMilliseconds();
var startTime =  d.getSeconds()*1000 + d.getMilliseconds();
var deltaCoeffMin = 25;
var deltaCoeff = deltaCoeffMin;

setInterval(function () {
    d = new Date();
    startTime =  d.getSeconds()*1000 + d.getMilliseconds();

    // START GAME STUFF
    var lag = Math.round(Math.sqrt(document.getElementById('lag').value)); //because comparing large numbers caused a wierd lag spike at from 9999999 to 10000000 
    var speed = document.getElementById('speed').value; 
    document.getElementById('adjusted').innerHTML = delta(speed);
    document.getElementById('fps').innerHTML = (1000/deltaCoeff).toFixed(2);
    var i; var j; var k; for (i=0; i<lag; i++){ for (j=0; j<lag; j++){ k = 1234567*1.1;}} //This is just a random math loop to simulate the lag cause by actual game stuff
    // END GAME STUFF

    ed = new Date();
    endTime = ed.getSeconds()*1000 + ed.getMilliseconds();
    deltaCoeff = endTime - startTime;
    if (deltaCoeff < deltaCoeffMin){deltaCoeff = deltaCoeffMin;}
  } , deltaCoeffMin);
</script>

Вызов requestAnimationFrame запустит функцию рисования только со скоростью, поддерживаемой монитором, и только если компьютер достаточно быстр. Если код работает медленно, он будет время от времени автоматически пропускать вызов функции рисования. Следовательно, функция рисования должна содержать только код отрисовки и никакой логики.

Сначала вы должны поместить любой код, обновляющий состояние игры, в другую функцию, называемую update. Эта функция будет вызываться с постоянной скоростью с использованием setInterval:

function update() {
    // read inputs
    // move objects
    // detect collisions
    // etc.

    // render a new frame only if the browser is done drawing the previous one
    requestAnimationFrame(draw);
}

// run the update function 60 times per second
var updateInterval = setInterval(update, 1000 / 60);

Всегда хорошо хранить updateInterval, чтобы мы могли полностью остановить игру с clearInterval(updateInterval), но вам, возможно, никогда не понадобится его использовать.

Теперь, когда у вас есть несколько постоянная скорость игры, вы можете установить время восстановления для стрельбы следующим образом:

if (fireCooldown > 0) {
  fireCooldown -= 1;
}

if (/* holding the fire key */ && fireCooldown === 0) {
  // create a projectile in front of the player ship
  fireCooldown = 30;
}

Вам нужно сначала где-нибудь объявить эту переменную с помощью var fireCooldown = 0;, но это должно помочь вам начать работу.

Как упоминал Джейк Хольцингер в комментариях, setInterval не на 100% точен, и функция обновления может быть вызвана на несколько миллисекунд позже, чем ожидалось. Вам придется самостоятельно проверять время между двумя вызовами, используя объекты Date или другие средства, если вы хотите точно рассчитать время, но я сомневаюсь, что это необходимо для простой игры-шутера.