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>