当我尝试移动它时，我的图像出现又消失答案

【问题标题】：My image is appearing and disppearing when i try and move it当我尝试移动它时，我的图像出现又消失
【发布时间】：2020-07-31 03:55:03
【问题描述】：

我正在使用 JavaScript、HTML 和 CSS 制作游戏。游戏将显示在 HTML5 画布上。当按下箭头键时，玩家移动。问题是当播放器移动图像时，图像会出现又消失，因为我使用的是 ctx.clearRect()。有没有办法在不使用 ctx.clearRect() 的情况下移动图像？

这是我的 script.js 文件：

var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");

var playerImg = new Image();
var player = {
    x: 200,
    y: 375,
    width: 50,
    height: 50
}

function draw() {
    playerImg.onload = function () {
        ctx.drawImage(playerImg, player.x, player.y, player.width, player.height);'
    }
    playerImg.src = "images/player.png";
}

document.body.addEventListener("keydown", function (event) {
    if (event.keyCode == 37) {
        ctx.clearRect(player.x, player.y, player.x + player.width, player.y + player.height);
        player.x -= 15;
    }
    else if (event.keyCode == 39) {
        ctx.clearRect(player.x, player.y, player.x + player.width, player.y + player.height);
        player.x += 15;
    }
}, false);

setInterval(draw);

【问题讨论】：

您正在定义图像的 src 并将相同的 onload 侦听器添加到 playerImg 每秒几次。将那些从draw 函数中拉出来。

标签： javascript html html5-canvas

【解决方案1】：

它正在闪烁，因为您清除了画布并且页面已刷新并且屏幕上没有任何内容。然后绘制计时器触发并再次重绘图像。正如 Teemu 指出的那样，虽然图像会被缓存，但假设它是由用户启用的，最好不要在每次绘制时都重新加载它。

最好将您的代码与下面的代码进行比较，我在底部添加了几个 cmets。还有一个不应该存在的单引号 ctx.drawImage() 行。

var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");

var playerImg = new Image();
var player = {
    x: 200,
    y: 375,
    width: 50,
    height: 50
}

playerImg.src = "images/player.png";

playerImg.onload = function () {
    draw();
}

function draw() {
        ctx.drawImage(playerImg, player.x, player.y, player.width, player.height);
}

document.body.addEventListener("keydown", function (event) {
    if (event.keyCode == 37) {
        ctx.clearRect(player.x, player.y, player.x + player.width, player.y + player.height);
        player.x -= 15;
    }
    else if (event.keyCode == 39) {
        ctx.clearRect(player.x, player.y, player.x + player.width, player.y + player.height);
        player.x += 15;
    }
    
    draw(); // Added this line to prevent flashing
    
}, false);

//setInterval(draw); // removed this line

【讨论】：

这看起来可行，但我在这段代码中发现了 1 个问题。 playerImg.src = "images/player.png"; 应该在你设置playerImg.onload = function () { draw(); } 之后。所以我将尝试改变它，看看它是否有效。感谢您的帮助！

【解决方案2】：

我不完全确定，因为我对这个地方很陌生，但是你检查过你所有的大括号、句号等吗？是否出现了错误消息，例如弹出逻辑错误？如果是这样，请在开始游戏时尝试使用调试工具，这样当游戏崩溃（由于图像消失）时，您就可以使用调试工具找到代码中的问题所在。当我的程序发生类似的事情时，我使用了调试工具。（正在使用 C# 构建一个科学计算器，它对我有用）。

【讨论】：