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>