HTML5ゲーム開発

Question

私はストーリーブックの次の部分を読むためにクリックして、イラストブックを作っています。私は3つの異なるシーン（3つの異なるページ）を作った。 eventListenerを使用してシーン1からシーン2に切り替えることはできますが、シーン2からシーン3に切り替えることはできません。

私は、ユーザーがマウスをクリックすると

のようなシーンを切り替えることができるようにしたい：場合は、2番目の

に行き、

• 現在のシーンが最初のものである場合現在のシーンは、第二の一つであり、現在のシーンが三番目である場合には第三
• に行き、最初

に戻ります210

しかし、私はそれを行う方法がわかりません。どんな助けもありがとうございます。ありがとう！

私は、ゲーム開発で前進できるように、基本を学んでいることにも言及しておきます。そして、これは非常に基本的なコードです。

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

以下の例では、必要な機能が含まれています

は、ここに私のコードです。要約すると

：ユーザーは、我々は次を表示するには、適切な関数を呼び出すためにswitchステートメントを使用し、当社のイベントリスナー内

に現在ある画面そのうち私たちが追跡するためにcurrentScene変数を使用

• これに応じて画面は、ユーザが

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>

に現在画面