使用箭头键在画布上移动图像答案

【问题标题】：Moving an image on a canvas with arrow keys使用箭头键在画布上移动图像
【发布时间】：2023-03-08 00:31:01
【问题描述】：

我试图让一个我称之为“剑”的块在使用箭头键时上下移动，我有事件侦听器和处理程序，但由于某种原因，它们只是不互相交谈，我不知道为什么。

这里是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，画布上有一个背景，“剑”被画成一个盒子，我的关键处理程序应该根据剑的高度和 Y 轴的空间在 Y 轴上移动剑.

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);
};

【问题讨论】：

标签： javascript html5-canvas eventhandler

【解决方案1】：

移动这部分代码

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

渲染（）函数。您的函数应如下所示：

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(){} 范围

【讨论】：

谢谢！这些按钮现在可以工作了，但是当我按下它们时，块只会在 Y 轴上变大，而不是上下移动。
需要重绘背景，添加这一行 gc.drawImage(background, 0, 0)};在 drawSword(); 之前
非常感谢！