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>

HTML5游戏开发

1 个答案: