Question

我刚刚开始学习编码，我开始学习javascript，主要是为了一堂课，但是我已经开始超越课程，并试图学习新的东西。现在我正在尝试创建一个简单的游戏，它从一个级别到另一个级别，我的问题是我无法弄清楚如何创建一个状态引擎，可以跳转到下一个级别并从HTML画布中删除前一个。

使用下面的脚本，我试图通过闪烁三个盒子形成来测试使用状态引擎。当我想转到switch语句中的下一个案例时，问题就出现了，前一个案例的方法我打电话给遗体。

这就是我所拥有的。

<!DOCTYPE html>
<html>
<body>
<body onload="init()">
<canvas id="myCanvas" width="1024" height="1024" style="border:1px solid #d3d3d3;">
</canvas>

<script>

var FPS = 60;
var counter = 0;
var currentState = 0;
var intervalTime = 300;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");


function init(){
    ticker();
}

function ticker(){
    setInterval(initGame, FPS)
}

function initGame(){
    checkState();
    counter++;
}

function drawBox(x,y){
    ctx.fillStyle="#FF0000";
    ctx.fillRect(x, y, 50, 50);
}

function checkState(){
    switch(currentState){
        case 0:
            console.log("case 0");
            drawBox(0,0);
            if (counter === intervalTime){
                counter = 0;
                currentState = 1;
            }
        break;
        case 1:
            console.log("case 1");
            drawBox(50,0);
            if (counter === intervalTime){
                counter = 0;
                currentState = 2;
            }
        break;
        case 2:
            console.log("case 2");
            drawBox(100,0);
            if (counter === intervalTime){
                counter = 0;
                currentState = 0;
            }
        break;
    }
}


</script> 

</body>
</html>

我是新手，所以如果上面的任何内容格式不正确，或者我没有正确解决这个问题，我会道歉。

Answer 1

您正在寻找ctx.clearRect(x, y, width, height)。您可以在代码中使用它，如下所示：

function drawBox(x,y){
    ctx.clearRect(0, 0, 300, 50);
    ctx.fillStyle="#FF0000";
    ctx.fillRect(x, y, 50, 50);
}

在每次重绘之前，这将清除画布所在的部分。对于更复杂的应用程序，您可能希望清除整个画布。

完整的工作代码如下：

＆＃13;

<!DOCTYPE html>
<html>
<body>
<body onload="init()">
<canvas id="myCanvas" width="1024" height="1024" style="border:1px solid #d3d3d3;">
</canvas>

<script>

var FPS = 60;
var counter = 0;
var currentState = 0;
var intervalTime = 300;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");


function init(){
    ticker();
}

function ticker(){
    setInterval(initGame, FPS)
}

function initGame(){
    checkState();
    counter++;
}

function drawBox(x,y){
    ctx.clearRect(0,0,300,50);
    ctx.fillStyle="#FF0000";
    ctx.fillRect(x, y, 50, 50);
}

function checkState(){
    switch(currentState){
        case 0:
            console.log("case 0");
            drawBox(0,0);
            if (counter === intervalTime){
                counter = 0;
                currentState = 1;
            }
        break;
        case 1:
            console.log("case 1");
            drawBox(50,0);
            if (counter === intervalTime){
                counter = 0;
                currentState = 2;
            }
        break;
        case 2:
            console.log("case 2");
            drawBox(100,0);
            if (counter === intervalTime){
                counter = 0;
                currentState = 0;
            }
        break;
    }
}


</script> 

</body>
</html>

＆＃13;

Javascript：首次尝试状态引擎无法正常工作

1 个答案: