使用箭頭鍵在畫布上移動圖像

Question

我正在嘗試使用箭頭鍵讓一個名為“ Sword”的塊在上下移動，我有事件偵聽器和處理程序，但由於某些原因，他們只是不互相交談，我不知道為什么。

這是HTML，它非常簡單，只需繪制一個畫布即可使用。

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

Answer 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（）{}范圍

使用箭頭鍵在畫布上移動圖像

問題描述

1 個解決方案

解決方案1
0 已采納 2018-04-20 14:48:45

使用箭頭鍵在畫布上移動圖像

問題描述

1 個解決方案

解決方案1 0 已采納 2018-04-20 14:48:45

解決方案1
0 已采納 2018-04-20 14:48:45