时间戳

首页 > 解决方案 > Javascript：第一次尝试状态引擎不工作

javascript - Javascript：第一次尝试状态引擎不工作

问题描述

我刚开始学习编码，我开始学习 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>

我是新手，所以如果上述任何内容的格式不正确，或者我根本没有以正确的方式解决这个问题，我深表歉意。

标签： javascripthtml

解决方案

你正在寻找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);
}

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

完整的工作代码如下：

<!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>

推荐阅读