处理'onkeydown‘事件

Question

我将onkeydown事件侦听器添加到document中，当事件触发时，我会播放一个音频文件。这个音频文件是枪声。如果你点击一次键，它会播放的很好，但如果你按下和保持，音频重复难以置信的快。我已经通过简单的playing条件检查解决了这个问题，但是我有另一个问题。如果我按住，只是在第一次射击之后，听起来像是枪声不断。例如，它就像塔-塔塔塔塔。

我怎样才能修好机关枪？让它像纹身一样燃烧。

演示

var weapons = {
    aug : {
        audio   : "weapons/aug-1.wav",
        icon    : "e",
        key     : "A"
    }
};

function playAudio(file) {
    if (!playing) {
        var audio = new Audio(file);
        audio.play();
        playing = true;
        setTimeout(function() {
            playing = false;
        }, 100);
    }
}

document.onkeydown = function(e) {
    switch(e.keyCode) {
        case 65:
            playAudio(weapons.aug.audio);
            break;
    }
}

Answer 1

在考虑这个问题之前，我就开始对它进行编码，这是我的第一个错误。我现在解决了这个问题。我所要做的只是简单地模仿FPS游戏的射击命令。使用mousedown启动一个间隔，用mouseup清除该间隔。

而不是使用鼠标点击，我不得不使用键按。因此，当我按下一个键(并按住)，一个间隔开始并重复播放音频。当我释放键，间隔被清除，音频停止。

演示

var weapons = {
    aug : {
        audio       : "weapons/aug-1.wav",
        icon        : "e",
        key         : "A",
        interval    : null,
        firstShot   : false,
    }
};

function playAudio(file, weapon) {
    if (!weapon.interval) {
        if (!weapon.firstShot) {
            var audio = new Audio(file);
            audio.play();
            weapons.aug.firstShot = true;
        }
        weapon.interval = setInterval(function() {
            var audio = new Audio(file);
            audio.play();
        }, 150);
    }
}

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 65:
            playAudio(weapons.aug.audio, weapons.aug);
            break;
    }
}
document.onkeyup = function(e) {
    switch (e.keyCode) {
        case 65:
            clearInterval(weapons.aug.interval);
            weapons.aug.interval = null;
            weapons.aug.firstShot = false;
            break;
    }
}

Answer 2

akinuri，这是我的第一个答案，但我删除了它(我以为您想播放整个声音)，所以我将其解锁，它可以帮助您(它将修复延迟的按键错误)。

您应该使用gameLoop (游戏开发中的常见模式)和requestAnimationFrame。不要直接从玩家的输入触发事件，设置将在gameLoop内部处理的状态(应该负责更新位置，呈现.)

var playing = false;

var keyStatePressed = false;//set state at false at init

var weapons = {
    aug : {
        audio   : "weapons/aug-1.wav",
        icon    : "e",
        key     : "A"
    }
};

function playAudio(file) {
    if (!playing) {
        var audio = new Audio(file);
        audio.play();
        playing = true;
        setTimeout(function() {
            playing = false;
        }, 100);
    }
}

//flag at true on keydown
document.onkeydown = function(e) {
    switch(e.keyCode) {
        case 65:
            keyStatePressed = true;
            break;
    }
}

//run a game loop
function gameLoop(){
    if(keyStatePressed === true){
        playAudio(weapons.aug.audio);
        keyStatePressed = false;//reset state
    }
    //run this in 16ms (see more on game loops and requestAnimationFrame)
    requestAnimationFrame(gameLoop);
}

//launch the gameLoop
gameLoop();

Answer 3

使用gameLoop和更少的全局可能会有更好的方法，但是等待音频对象的ended事件在false标记playing，并确保在完成之前不要开始播放您的声音。

var playing = false;//tag playing as false by default

var weapons = {
    aug : {
        audio   : "weapons/aug-1.wav",
        icon    : "e",
        key     : "A"
    }
};

function playAudio(file) {
    if (!playing) {
        audio = new Audio(file);
        playing = true;
        setTimeout(function(){
            playing = false;
        },400);
        audio.play();
    }
}

document.onkeydown = function(e) {
    switch(e.keyCode) {
        case 65:
            playAudio(weapons.aug.audio);
            break;
    }
}