Javascript HTML5箭头键无法正常工作_Javascript_Html

Javascript HTML5箭头键无法正常工作

javascript html

Javascript HTML5箭头键无法正常工作,javascript,html,Javascript,Html,大家好，我目前在按[space]键时无法使箭头键正常工作。按住[空格]键和一个箭头键，一切正常。但如果我尝试同时按[space]和[up]和[left]，它会一直移动到屏幕顶部，就好像没有按[left]键一样（它应该沿对角线移动到左上角）。这仅在按下[空格]时发生。以后我想用这把钥匙射击子弹我的代码有问题吗？还是某种虫子为我糟糕的英语道歉：/ <!DOCTYPE html> <body> <canvas id="myCanvas" width

大家好，

我目前在按[space]键时无法使箭头键正常工作。按住[空格]键和一个箭头键，一切正常。但如果我尝试同时按[space]和[up]和[left]，它会一直移动到屏幕顶部，就好像没有按[left]键一样（它应该沿对角线移动到左上角）。这仅在按下[空格]时发生。以后我想用这把钥匙射击子弹

我的代码有问题吗？还是某种虫子

为我糟糕的英语道歉：/

<!DOCTYPE html>
<body>
        <canvas id="myCanvas" width="568" height="262">
        </canvas>

<script type="text/javascript">
var canvas;
var ctx;
var dx = 0.5;
var dy = 0.5;
var x = 284;
var y = 130;
var WIDTH = 568;
var HEIGHT = 262;
var keys = new Array();

function circle(x,y,r) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI*2, true);
  ctx.fill();
}

function rect(x,y,w,h) {
    ctx.beginPath();
    ctx.rect(x,y,w,h);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
}

function clear() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function init() {
    canvas = document.getElementById("myCanvas");
    ctx = canvas.getContext("2d");
    window.addEventListener('keydown',doKeyDown,true);
    window.addEventListener('keyup',doKeyUp,true);
    return setInterval(draw, 1);
}

function draw() {
    move();
    clear();
    ctx.fillStyle = "white";
    ctx.strokeStyle = "black";
    rect(0,0,WIDTH,HEIGHT);

    // player ///
    ctx.fillStyle = "purple";
    circle(x, y, 20);

}

function doKeyDown(evt)
{
    keys[evt.keyCode] = true;
    evt.preventDefault();   // Prevents the page to scroll up/down while pressing arrow keys
}

function doKeyUp(evt){
    keys[evt.keyCode] = false;
}

function move() {
        if (32 in keys && keys[32]){
            ; // fire bullets
        }
        if (38 in keys && keys[38]){ //up
            y -= dy;
        }
        if (40 in keys && keys[40]){ //down
            y += dy;
        }
        if (37 in keys && keys[37]){ //left
                x -= dx;
        }
        if (39 in keys && keys[39]){ //right
                x += dx;
        }
}

init();
</script>

</body>
</html>


var帆布；
var-ctx；
var dx=0.5；
var-dy=0.5；
var x=284；
变量y=130；
var宽度=568；
var高度=262；
var keys=新数组（）；
函数圆（x，y，r）{
ctx.beginPath（）；
弧（x，y，r，0，数学π*2，真）；
ctx.fill（）；
}
函数rect（x，y，w，h）{
ctx.beginPath（）；
ctx.rect（x，y，w，h）；
ctx.closePath（）；
ctx.fill（）；
ctx.stroke（）；
}
函数clear（）{
ctx.clearRect（0，0，宽度，高度）；
}
函数init（）{
canvas=document.getElementById（“myCanvas”）；
ctx=canvas.getContext（“2d”）；
window.addEventListener（'keydown'，doKeyDown，true）；
window.addEventListener（'keyup'，doKeyUp，true）；
返回设置间隔（绘制，1）；
}
函数绘图（）{
move（）；
清除（）；
ctx.fillStyle=“白色”；
ctx.strokeStyle=“黑色”；
矩形（0,0，宽度，高度）；
//玩家///
ctx.fillStyle=“紫色”；
圆（x，y，20）；
}
功能doKeyDown（evt）
{
keys[evt.keyCode]=真；
evt.preventDefault（）；//在按箭头键时防止页面上下滚动
}
功能doKeyUp（evt）{
keys[evt.keyCode]=false；
}
函数move（）{
if（键中的32个和键[32]）{
；//发射子弹
}
如果（键中的38和键[38]）{//向上
y-=dy；
}
如果（键中的40和键[40]）{//向下
y+=dy；
}
如果（键中的37和键[37]）{//左
x-=dx；
}
如果（键中的39和键[39]）{//right
x+=dx；
}
}
init（）；

很可能这与您的代码无关。为了节省成本，许多键盘不能同时支持3个或更多键的每个组合，并且专门连接到支持常用组合（如Ctrl+Alt+Del）。这种现象被称为“鬼影”

有关详细解释，请参阅。

有关详细说明，请参阅。

我遇到了相同的问题（我找到了问题，但没有找到解决方案），up和left的键代码彼此跟随。所以，向下向右。关键代码彼此跟随似乎是问题所在。如果将A设置为向上移动播放机，将B设置为向下移动播放机，然后按A+B+空格键，则会出现相同的问题。但是，当按键代码不同（例如wasd）时，三个按钮按下功能正常。使用WASD似乎是一个好主意，但要等到有人用法语键盘玩你的游戏。不管怎样，我写这篇文章是希望有人能找到工作

我也遇到了同样的问题（我找到了问题，但没有找到解决方案），up和left的键代码互相跟随。所以，向下向右。关键代码彼此跟随似乎是问题所在。如果将A设置为向上移动播放机，将B设置为向下移动播放机，然后按A+B+空格键，则会出现相同的问题。但是，当按键代码不同（例如wasd）时，三个按钮按下功能正常。使用WASD似乎是一个好主意，但要等到有人用法语键盘玩你的游戏。

不管怎样，我写这篇文章是希望有人能找到工作

你可能是对的，我只是在几年前在allegro中创建的旧游戏中尝试了相同的组合键，我发现它也不起作用。。至少在按W、s、A、D和[空格]键时它能工作。谢谢你的信息！你可能是对的，我只是在几年前在allegro中创建的旧游戏中尝试了相同的组合键，我发现它也不起作用。。至少在按W、s、A、D和[空格]键时它能工作。谢谢你的信息！