Javascript HTML5游戏开发

我正在制作一本带插图的故事书，用户点击阅读故事的下一部分。我制作了三个不同的场景（三个不同的页面）。我可以使用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();

---

下面的示例包含您需要的功能

总之：

• 我们使用

  currentsecene

  变量跟踪用户当前在哪个屏幕上
• 在事件侦听器中，我们使用

  开关
  语句调用适当的函数来显示下一个屏幕，具体取决于用户当前所在的屏幕

var c=document.querySelector（“#c”）；
c、 宽度=800；
c、 高度=200；
var ctx=c.getContext（“2d”）；
//初始化变量以存储用户所在的屏幕
当前场景；
//当用户单击画布时加载下一个屏幕
c、 addEventListener（“单击”，函数（）{
开关（当前场景）{
案例1：
sceneTwo（）；
打破
案例2：
场景树（）；
打破
案例3：
sceneOne（）；
打破
}
});
//第一场
函数sceneOne（）{
当前场景=1；
ctx.fillStyle=“rgb（235247255）”；
ctx.fillRect（0,0750750）；
ctx.fillStyle=“rgb（0,85,255）”；
ctx.font=“70px冲击”；
ctx.fillText（《温斯顿的故事》，第40130页）；
};
//第二幕
函数sceneTwo（）{
当前场景=2；
ctx.fillStyle=“rgb（173239255）”；
ctx.fillRect（0,0750750）；
ctx.fillStyle=“rgb（7,14,145）”；
ctx.fillText（“小温斯顿出生了！”，10100）；
};
//Scee三
函数sceneThree（）{
当前场景=3；
ctx.fillStyle=“rgb（173239255）”；
ctx.fillRect（0,0750750）；
ctx.fillStyle=“rgb（7,14,145）”；
ctx.fillText（“温斯顿长大了！”，10100）；
};
//呼叫第一场
sceneOne（）