javascript - 我的 HTML5 Canvas 游戏在帧之间不断闪烁

Question

我最近开始开发一款 HTML5 RPG canvas 游戏，并决定制作一个“文本框”之类的东西，但是当我对它进行编程时，它开始每隔一帧在蓝色和文本框之间闪烁。这是什么原因造成的？

代码:https://github.com/Codezters/RPG-Game-1

重要代码(我认为大多数玩家移动的东西是无关紧要的):

  function update() {
        if (realm == 'overworld') {
            cc.fillStyle='blue';
            cc.fillRect(0,0,c.width,c.height);
            cc.drawImage(bob, x, y);

            // Player Walk Animations 

            if (direction == 'up' && idleness == false) {
                if (walkstage > 0 && walkstage <4) {
                    document.getElementById("source").src = "IdleMoveUP1.png"
                }
                else if (walkstage > 3 &&  walkstage < 7) {
                    document.getElementById("source").src = "IdleUP.png"
                }
                else if (walkstage > 6 && walkstage < 10) {
                    document.getElementById("source").src = "IdleMoveUP2.png"
                }
            }
            else if (direction == 'right' && idleness == false) {
                if (walkstage > 0 && walkstage <4) {
                    document.getElementById("source").src = "IdleMoveRIGHT1.png"
                }
                else if (walkstage > 3 &&  walkstage < 7) {
                    document.getElementById("source").src = "IdleRIGHT.png"
                }
                else if (walkstage > 6 && walkstage < 10) {
                    document.getElementById("source").src = "IdleMoveRIGHT2.png"
                }
            }
            else if (direction == 'left' && idleness == false) {
                if (walkstage > 0 && walkstage <4) {
                    document.getElementById("source").src = "IdleMoveLEFT1.png"
                }
                else if (walkstage > 3 &&  walkstage < 7) {
                    document.getElementById("source").src = "IdleLEFT.png"
                }
                else if (walkstage > 6 && walkstage < 10) {
                    document.getElementById("source").src = "IdleMoveLEFT2.png"
                }
            }
            else if (direction == 'down' && idleness == false) {
                if (walkstage > 0 && walkstage <4) {
                    document.getElementById("source").src = "IdleMoveDOWN1.png"
                }
                else if (walkstage > 3 &&  walkstage < 7) {
                    document.getElementById("source").src = "IdleDOWN.png"
                }
                else if (walkstage > 6 && walkstage < 10) {
                    document.getElementById("source").src = "IdleMoveDOWN2.png"
                }
            }        
            if (idleframe == 8) {
                if (direction == 'down') {
                    document.getElementById("source").src = "IdleDOWN.png"
                    idleframe = 0;
                    idleness = true;
                }
                else if (direction == 'up') {
                    document.getElementById("source").src = "IdleUP.png"
                    idleframe = 0;
                    idleness = true;
                }
                else if (direction == 'right') {
                    document.getElementById("source").src = "IdleRIGHT.png"
                    idleframe = 0;
                    idleness = true;
                }
                else if (direction == 'left') {
                    document.getElementById("source").src = "IdleLEFT.png"
                    idleframe = 0;
                    idleness = true;
                }
                if (talking == true) {
                    if (wordcount != textBoxTest.length) {
                        cc.drawImage(textBox, 0, 400);
                        cc.fillStyle = "white";
                        console.log("this is working")
                        cc.fillText(counted, 0, 100);
                        counted += textBoxTest[wordcount]
                        wordcount++;
                    }
                    else if (EnterToggle == true) {
                        EnterToggle = false;
                        talking = false;
                    }

到目前为止的游戏:https://codezters.github.io/RPG-Game-1/

解决方法:

当什么都没有发生时，我不需要清除 Canvas ，所以我不那么频繁地清除 Canvas ，问题就解决了。

Answer 1

HTML 一开始就是完全错误的，标签在错误的位置和过时的元素。我没有冒犯的意思，我们都必须从某个地方开始，但是在尝试之前您应该完成 HTML 和 JavaScript 的基础类(class)。 MDN 是一个很好的起点。

您正在更改 img 标签的 src 属性，您根本不应该这样做。为每个文件使用不同的 Image 对象，并让您的代码选择要绘制的图像。这确保所有图像在游戏开始前加载一次，而不是每次更改它时。加载可以异步进行，并在您尝试绘制图像时导致图像尚未准备好绘制的错误。

你还有这个代码:

window.onload= function() {
    c=document.getElementById('gc');
    document.addEventListener("keydown",keyPush)
    cc=c.getContext('2d');
    setInterval(update,1000/30);
};

由于您通过 setInterval 运行更新，所以您每秒更新和绘制游戏 33 次。您应该有一个独立的函数来处理绘图，该函数通过 requestAnimationFrame(draw) 调用。这将确保浏览器仅在可能时绘制帧，并在计算机无法跟上时跳过绘制。去阅读关于 requestAnimationFrame 的文档了解更多信息。