使用箭头键在 canvas 上移动图像

Question

我正在尝试让我称为 "Sword" 的方块在使用箭头键时上下移动，我有事件侦听器和处理程序，但出于某种原因他们只是不与彼此，我不知道为什么。

这里是HTML，很简单，随便画一个canvas就可以用了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>17013455_assignment_2</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src="17013455_ass2_task1.js"></script>
</html>

这是 Javascript，canvas 绘制了背景，"sword" 绘制为一个框，我的关键处理程序应该在 Y 轴上移动剑取决于剑的高度，它在 Y 轴上为 space。

window.onload=function () {
    var canvas = document.getElementById("canvas");
    var gc = canvas.getContext("2d");
    canvas.width = 640;
    canvas.height = 448;
    gc.clearRect(0, 0, canvas.width, canvas.height);
    var background = new Image();
    background.src = "https://i.imgur.com/9mPYXqC.png";


        //sword dimentions
        var swordHeight = 50;
        var swordWidth = 25;
        var swordX = 50;
        var swordY = 220;

        //controls for player
        var upPressed = false;
        var downPressed = false;

        if (downPressed && swordY < canvas.height - swordHeight) {
            swordY += 10;
        }
        else if (upPressed && swordY > 0) {
            swordY -= 10;
        }

    function keyUpHandler(e) {
        if (e.keyCode === 38) {
            upPressed = false;
        }
        else if (e.keyCode === 40) {
            downPressed = false;
        }
    }

    function drawSword() {
        /*Make a box to represent a sword until sprites are used*/
        gc.beginPath();
        gc.rect(swordX, swordY, swordWidth, swordHeight);
        gc.fillStyle = "#000000";
        gc.fill();
        gc.closePath();

    }

    function keyDownHandler(e) {
        if (e.keyCode === 38) {
            upPressed = true;
        }
        else if (e.keyCode === 40) {
            downPressed = true;
        }
    }

    function render() {
        background.onload = function () {
            gc.drawImage(background, 0, 0)};
        drawSword();

    }

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

    render();
    setInterval(render, 10);
};

Answer 1

移动这部分代码

if (downPressed && swordY < canvas.height - swordHeight) {
        swordY += 10;
    }
    else if (upPressed && swordY > 0) {
        swordY -= 10;
    }

到 render() 函数。您的函数应如下所示：

function render() {
    if (downPressed && swordY < canvas.height - swordHeight) {
        swordY += 10;
    }
    else if (upPressed && swordY > 0) {
        swordY -= 10;
    }
    gc.drawImage(background, 0, 0)};
    drawSword();

}

这部分

background.onload = function () {
        gc.drawImage(background, 0, 0)};

到window.onload = function(){}范围

使用箭头键在 canvas 上移动图像

Moving an image on a canvas with arrow keys

javascript

html5-canvas

eventhandler