HTML5游戏开发

Question

我正在制作一本图文并茂的故事书，让用户点击阅读故事的下一部分。我制作了三个不同的场景(三页)。我可以使用eventListener从第一场景切换到第二场景，但是我不能从第二场景切换到第三场景。

我想在场景之间切换，就像在

当用户单击鼠标时：

• 如果当前场景是第一个场景，则转到第二个场景。
• 如果当前的场景是第二个场景，则转到第三个场景。
• 如果当前的场景是第三个场景，请回到第一个场景。

但我不知道该怎么做。任何帮助都是非常感谢的。谢谢!

我还应该提到，我正在学习基础知识，这样我才能继续进行游戏开发。这是一个非常基本的代码。

这是我的代码：

var c = document.querySelector("#c");
var ctx = c.getContext("2d");

var x = document.getElementById("c");
    //Scene One
    function sceneOne(){
       ctx.fillStyle = "rgb(235,247,255)";
       ctx.fillRect(0,0,750,750);
        ctx.fillStyle = "rgb(0, 85, 255)";
        ctx.font = "70px Impact";
        ctx.fillText("The Story of Winston", 40, 130); 
    };

   //Scene Two
   function sceneTwo() {
        ctx.fillStyle = "rgb(173,239,255)";
        ctx.fillRect(0,0,750,750);
        ctx.fillStyle="rgb(7, 14, 145)";
        ctx.fillText("Lil Winston is born!", 10, 100);
    };

    //Scee Three
    function sceneThree() {
        ctx.fillStyle = "rgb(173,239,255)";
        ctx.fillRect(0,0,750,750);
        ctx.fillStyle = "rgb(7, 14, 145)";
        ctx.fillText("Winston grows up!", 10, 100);
    };
       //Calling scene one
    sceneOne();

Answer 1

下面的示例包含所需的功能。

总结如下：

• 我们使用currentScene变量来跟踪用户当前所在的屏幕。
• 在我们的事件侦听器中，我们使用switch语句调用适当的函数来显示下一个屏幕，这取决于用户当前在哪个屏幕上。

​

var c = document.querySelector("#c");
c.width  = 800;
c.height = 200;
var ctx = c.getContext("2d");

// Init variable to store screen the user is on
var currentScene;

// Load next screen when user clicks the canvas
c.addEventListener("click", function(){
    switch(currentScene) {
        case 1:
            sceneTwo();
            break;
        case 2:
            sceneThree();
            break;
        case 3:
            sceneOne();
            break;
    }
});

//Scene One
function sceneOne(){
    currentScene = 1;
    ctx.fillStyle = "rgb(235,247,255)";
    ctx.fillRect(0,0,750,750);
    ctx.fillStyle = "rgb(0, 85, 255)";
    ctx.font = "70px Impact";
    ctx.fillText("The Story of Winston", 40, 130); 
};

//Scene Two
function sceneTwo() {
    currentScene = 2;
    ctx.fillStyle = "rgb(173,239,255)";
    ctx.fillRect(0,0,750,750);
    ctx.fillStyle="rgb(7, 14, 145)";
    ctx.fillText("Lil Winston is born!", 10, 100);
};

//Scee Three
function sceneThree() {
    currentScene = 3;
    ctx.fillStyle = "rgb(173,239,255)";
    ctx.fillRect(0,0,750,750);
    ctx.fillStyle = "rgb(7, 14, 145)";
    ctx.fillText("Winston grows up!", 10, 100);
};

//Calling scene one
sceneOne();

<canvas id="c"></canvas>

​