按下后如何只发射一次键？

Question

I'm making a simple JavaScript game (Space Invaders style) (Top-down space shooter) and I'm trying to make my character shoot a bullet per each 'space' key press. How can I do that?

I have tried multiple approaches, setting a flag, using onkeypress instead of keydown, Google searches (have also encountered this similar question yet it didn't help: Javascript onkeydown event fire only once? )

Below is an example of one solution I have tried.

document.onkeydown = function(e) 
{
      if(e.keyCode == 32 && space == false)
      {
           space = true;         
      }
}

document.onkeyup = function(e)
{
     if(e.keyCode == 32) space = false;
}

window.requestAnimationFrame(gameLoop);

function gameLoop(timeStamp) 
{      if(space === true)
       {   
          p.shoot();
       }

       window.requestAnimationFrame(gameLoop);
}

Expected results: Key being fired only once. Actual results: Key is being fired multiple times.

Answer 1

As @JaromandaX suggested, space = false; after p.shoot(); will give you the desired result:

Reproducing the issue:

 var space = false; var element = document.querySelector('input'); element.onkeydown = function(e) { if (!space && e.keyCode == 32) { space = true; console.log('event fired'); } }; element.onkeyup = function(e) { if (e.keyCode == 32) space = false; } window.requestAnimationFrame(gameLoop); function gameLoop(timeStamp) { if (space == true) { console.log('shoot'); } window.requestAnimationFrame(gameLoop); } 

 <input /> 

EDIT: Added another isShot variable to keep track of shot fired and space key is down in requestAnimationFrame event:

 var space = false; var element = document.querySelector('input'); var isShot = false; element.onkeydown = function(e) { if (!space && e.keyCode == 32) { space = true; console.log('event fired'); } }; element.onkeyup = function(e) { if (e.keyCode == 32) { space = isShot = false; } } window.requestAnimationFrame(gameLoop); function gameLoop(timeStamp) { if (space && !isShot) { console.log('shoot'); isShot = true; } window.requestAnimationFrame(gameLoop); } 

 <input /> 

Answer 2

There's really 3 states to a bullet - and, taking into consideration that in classic Space Invaders the player can only have one bullet in flight at a time, this makes things relatively simple

The bullet can be

• NONE - doesn't exist
• FIRED - ie need to create one
• EXISTS - it's in flight

The code to handle it is relatively simple too

var BulletState = {
    NONE: 0,
    FIRED: 1,
    EXISTS: 2
};
var bullet = BulletState.NONE;

document.onkeydown = function(e) {
    if (e.keyCode == 32 && bullet === BulletState.NONE) {
        bullet = BulletState.FIRED;
    }
}

window.requestAnimationFrame(gameLoop);


function gameLoop(timeStamp) {
    if (bullet === BulletState.FIRED) {
        bullet = BulletState.EXISTS;
        p.shoot(); // p.shoot needs to set bullet = BulletState.NONE when the bullet expires
    }
    window.requestAnimationFrame(gameLoop);
}

document.onkeyup = function(e)
{
     // not required at all
}

edit: To fire a bullet every press of spacebar (allowing multiple bullets)

var space = false;
var fireBullet = 0;

document.onkeydown = function(e) {
    if (e.keyCode == 32 && !e.repeat && !space) {
        fireBullet++;
        space = true;
    }
}

window.requestAnimationFrame(gameLoop);


function gameLoop(timeStamp) {
    while (fireBullet) {
        p.shoot();
        fireBullet--;
    }
    window.requestAnimationFrame(gameLoop);
}

document.onkeyup = function(e)
{
    space = false;
}

I use fireBullet++ and fireBullet-- because I guess it's plausible that someone could press and release and press the spacebar within 16ms (single frame) :p

You could also do

function gameLoop(timeStamp) {
    if (fireBullet) {
        p.shoot();
        fireBullet--;
    }
    window.requestAnimationFrame(gameLoop);
}

that way you still handle multiple bullets OK, but only fire off one per frame - really depends on how you want to handle someone with a very fast trigger finger :p

Answer 3

Here you have two event, on each key press three are three even that get's fired 1. keydown (when user press the key but not yet release the key) 2. keypress (its fired after the keydown event) 3. keyup (When user release the key) If you want to fire only once for each keypress implement on of those if implement all of the three all three methods will fired. Additionally: for safety you can write e.preventDefault() .