按箭头键移动球 javascript

Question

我第一次尝试 javascript...我想按箭头键让球移动

但是球并没有上下移动……它只是左右移动……

我有一些疑问

1. 按下向上和向右键时如何使球沿对角线移动
2. 我尝试使用加速度，但如何在没有按下任何键时让球平稳停止
3. 如何让球在 canvas 中自由漫游（通过按键）……现在它只是朝一个方向移动。 但我想让球根据按键自由移动。

  canwid=1000;
canhigh=600;
sidexl=0;
hxl=0;
canvas = document.getElementById("game");
ctx = canvas.getContext("2d");

gameover=false;
x=canwid/2;
y=canhigh/2;

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

    function keyDownHandler(e) {
        if(e.key == "Right" || e.key == "ArrowRight") {
            rightPressed = true;
            if (sidexl<2) {
                sidexl+=0.02;
            }
        }
        else if(e.key == "Left" || e.key == "ArrowLeft") {
            leftPressed = true;
            if (sidexl>-2) {
                sidexl-=0.02;
            }
        }
        else if(e.key == "Up" || e.key == "ArrowUp") {
            upPressed = true;
            if (hxl>-2) {
                hxl+=0.02;
            }
        }
        else if(e.key == "Down" || e.key == "ArrowDown") {
            downPressed = true;
            if (hxl>-2) {
                hxl-=0.02;
            }
        }
    }
    function keyUpHandler(e) {
    if(e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = false;
    }
    else if(e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = false;
    }    
    else if(e.key == "Up" || e.key == "ArrowUp") {
        upPressed = false;
    }    
    else if(e.key == "Down" || e.key == "ArrowDown") {
        downPressed = false;
    }
}

function draw()
{
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.beginPath();
    ctx.arc(x, y, 10, 0, Math.PI*2, false);
    ctx.fillStyle = "red";
    ctx.fill();
    ctx.closePath();
}
function input()
{

}
function logic()
{
    if (rightPressed) {
        x += sidexl;    
    }
    else if (leftPressed) 
    {
        x += sidexl;    
    }   
    else if (upPressed) 
    {
        y += hxl;   
    }   
    else if (downPressed) 
    {
        y += hxl;   
    }
    else
    {
        x += sidexl;
        y += hxl;
        if (sidexl>0) {
            sidexl-=0.02;
        }
        else {
            sidexl+=0.02;
        }
        if (hxl>0) {
            hxl-=0.02;
        }
        else {
            hxl+=0.02;
        }
    }
}
function play()
{
    draw();
    input();
    logic();
}

setInterval(play, 5);

Answer 1

如何在按下向上和向右键时使球沿对角线移动我尝试使用加速度但是如何在没有按下任何键时使球平稳停止如何使球在 canvas 中自由漫游（通过按键）。 .. 现在它只是朝着一个方向发展。 但我想让球根据按键自由移动。

您可以通过存储 x、y 和按下的键的加速度来实现这一点 state

这是工作示例

 const canvas = document.getElementById("game"); const context = canvas.getContext("2d"); canvas.width = window.innerWidth / 2; canvas.height = window.innerHeight / 2; let gameover = false; let x = canvas.width / 2; let y = canvas.height / 2; let dx = 0; let dy = 0; const state = { "ArrowRight": false, "ArrowLeft": false, "ArrowUp": false, "ArrowDown": false } document.addEventListener("keydown", keyDownHandler, false); document.addEventListener("keyup", keyUpHandler, false); function determineDirection() { const { ArrowRight, ArrowLeft, ArrowUp, ArrowDown } = state if (ArrowRight && ArrowUp) { return { dx: .25, dy: -.25 }; } if (ArrowRight && ArrowDown) { return { dx: .25, dy: .25 }; } if (ArrowLeft && ArrowUp) { return { dx: -.25, dy: -.25 }; } if (ArrowLeft && ArrowDown) { return { dx: -.25, dy: .25 }; } if (ArrowLeft) { return { dx: -.25, dy: 0 } } if (ArrowRight) { return { dx: .25, dy: 0 } } if (ArrowUp) { return { dx: 0, dy: -.25 } } if (ArrowDown) { return { dx: 0, dy: .25 } } return { dx: 0, dy: 0 } } function keyDownHandler({ key }) { state[key] = true; } function keyUpHandler({ key }) { state[key] = false; } function draw() { context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.arc(x, y, 10, 0, Math.PI * 2, false); context.fillStyle = "red"; context.fill(); context.closePath(); } function logic() { const direction = determineDirection(); if (direction.dx) { dx = dx + direction.dx } if (direction.dy) { dy = dy + direction.dy } x = x + dx; y = y + dy; ; if (dx > 0) { dx -= 0.02; } if (dx < 0) { dx += 0.02; } if (dy > 0) { dy -= 0.02; } if (dy < 0) { dy += 0.02; } } function play() { draw(); logic(); } setInterval(play, 50);

 <canvas id="game"></canvas>