異なる「状態」

Question

問題

私は状態が使用されている理由を、私は理解して異なる状態を含めるように私のゲームを変更したときに起動する問題を抱えていますし、彼らは私にはあまり意味を成さ私は実装するのがむしろ難しいと思っています。あなたが例えばプレイを押すと、再生状態が表示され、あなたがゲームをプレイすることができますように、私は状態を含むために私のエキサイティングなコード（下図）を編集するため

質問

は、それは可能でしょうか？

私は、これは私が求めていますかを示して信じています。

あなたは単にどこかの状態を保存する必要が

<div style id="canvas"> 
     <canvas id="myCanvas" style="border:5px solid #410b11" height="320" width="480"> 
      <p>Your browser does not support HTML5!</p> 
     </canvas> 
    </div> 

     <script type="text/javascript"> 

      //Referencing the canvas 
      var canvas = document.getElementById("myCanvas"); 
      var context = canvas.getContext("2d"); 
      var width = canvas.getAttribute('width'); 
      var height = canvas.getAttribute('height'); 

      //Finding the position of the mouse 
      var mouseX; 
      var mouseY; 

      //Images 
      var bgImage = new Image(); 
      var logoImage = new Image(); 
      var playImage = new Image(); 
      var instructImage = new Image(); 
      var settingsImage = new Image(); 
      var aboutImage = new Image(); 
      var peaceImage = new Image(); 

      var backgroundY = 0; 
      var speed = 1; 

      //Arrays below used for mouse over function 
      var buttonX = [130,110,130,160]; 
      var buttonY = [100,140,180,220]; 
      var buttonWidth = [96,260,182,160]; 
      var buttonHeight = [40,40,40,40]; 

      var peaceX = [0,0]; 
      var peaceY = [0,0]; 
      var peaceWidth = 35; 
      var peaceHeight = 35; 

      var peaceVisible = false; 
      var peaceSize = peaceWidth; 
      var peaceRotate = 0; 

      var frames = 30; 
      var timerId = 0; 
      var fadeId = 0; 
      var time = 0.0; 

      peaceImage.src = "Images/peace.png"; 
      bgImage.onload = function(){ 
       context.drawImage(bgImage, 0, backgroundY); 
      }; 
      bgImage.src = "Images/background.png"; 
      logoImage.onload = function(){ 
       context.drawImage(logoImage, 50, -10); 
      } 
      logoImage.src = "Images/logo.png"; 
      playImage.onload = function(){ 
       context.drawImage(playImage, buttonX[0], buttonY[0]); 
      } 
      playImage.src = "Images/play.png"; 
      instructImage.onload = function(){ 
       context.drawImage(instructImage, buttonX[1], buttonY[1]); 
      } 
      instructImage.src = "Images/instructions.png"; 
      settingsImage.onload = function(){ 
       context.drawImage(settingsImage, buttonX[2], buttonY[2]); 
      } 
      settingsImage.src = "Images/settings.png"; 
      aboutImage.onload = function(){ 
       context.drawImage(aboutImage, buttonX[3], buttonY[3]); 
      } 
      aboutImage.src = "Images/about.png"; 

      timerId = setInterval("update()", 1000/frames); 

      canvas.addEventListener("mousemove", checkPos); 
      canvas.addEventListener("mouseup", checkClick); 

      function update() { 
       clear(); 
       move(); 
       draw(); 
      } 
      function clear() { 
       context.clearRect(0, 0, width, height); 
      } 
      function move(){ 
       backgroundY -= speed; 
       if(backgroundY == -1 * height){ 
        backgroundY = 0; 
       } 
       if(peaceSize == peaceWidth){ 
        peaceRotate = -1; 
       } 
       if(peaceSize == 0){ 
        peaceRotate = 1; 
       } 
       peaceSize += peaceRotate; 
      } 


      function draw(){ 

       context.drawImage(bgImage, 0, backgroundY); 
       context.drawImage(logoImage, 50,-10); 
       context.drawImage(playImage, buttonX[1], buttonY[0]); 
       context.drawImage(instructImage, buttonX[2], buttonY[1]); 
       context.drawImage(settingsImage, buttonX[2], buttonY[2]); 
       context.drawImage(aboutImage, buttonX[3], buttonY[3]); 
        if(peaceVisible == true){ 
        context.drawImage(peaceImage, peaceX[0] - (peaceSize/2), peaceY[0], peaceSize, peaceHeight); 
        context.drawImage(peaceImage, peaceX[2] - (peaceSize/2), peaceY[2], peaceSize, peaceHeight); 
       } 
      } 

      function checkPos(mouseEvent){ 
       if(mouseEvent.pageX || mouseEvent.pageY == 0){ 
        mouseX = mouseEvent.pageX - this.offsetLeft; 
        mouseY = mouseEvent.pageY - this.offsetTop; 
       }else if(mouseEvent.offsetX || mouseEvent.offsetY == 0){ 
        mouseX = mouseEvent.offsetX; 
        mouseY = mouseEvent.offsetY; 
       } 
       for(i = 0; i < buttonX.length; i++){ 
        if(mouseX > buttonX[i] && mouseX < buttonX[i] + buttonWidth[i]){ 
         if(mouseY > buttonY[i] && mouseY < buttonY[i] + buttonHeight[i]){ 
          peaceVisible = true; 
          peaceX[0] = buttonX[i] - (peaceWidth/2) - 2; 
          peaceY[0] = buttonY[i] + 2; 
          peaceX[1] = buttonX[i] + buttonWidth[i] + (peaceWidth/2); 
          peaceY[1] = buttonY[i] + 2; 
         } 
        }else{ 
         peaceVisible = false; 
        } 
       } 
      } 
      function checkClick(mouseEvent){ 
       for(i = 0; i < buttonX.length; i++){ 
        if(mouseX > buttonX[i] && mouseX < buttonX[i] + buttonWidth[i]){ 
         if(mouseY > buttonY[i] && mouseY < buttonY[i] + buttonHeight[i]){ 
          fadeId = setInterval("fadeOut()", 1000/frames); 
          clearInterval(timerId); 
          canvas.removeEventListener("mousemove", checkPos); 
          canvas.removeEventListener("mouseup", checkClick); 
         } 
        } 
       } 
      } 
      function fadeOut(){ 
       context.fillStyle = "rgba(0,0,0, 0.2)"; 
       context.fillRect (0, 0, width, height); 
       time += 0.1; 
       if(time >= 2){ 
        clearInterval(fadeId); 
        time = 0; 
        timerId = setInterval("update()", 1000/frames); 
        canvas.addEventListener("mousemove", checkPos); 
        canvas.addEventListener("mouseup", checkClick); 
       } 
      } 
     </script> 
    </body> 
</html> 

Answer 1

コード。あなたは、インスタンスの変数やオブジェクト内のそれら、...

var ScreenState = { 
    MENU : 0, 
    GAMEPLAY : 1, 
    SETTINGS : 2 
} 

を持つことができ、あなたは、単に現在の状態に基づいて、条件付きであなたのゲームを更新したり、描画する必要があります。

function update() { 
    switch (currentScreenState) { 
    case ScreenState.MENU: 
     // Update the menu screen. 
     break; 
    case ScreenState.GAMEPLAY: 
     // Update the gameplay screen. 
     break; 
    case ScreenState.SETTINGS: 
     // Update the settings screen. 
     break; 
    } 
} 

function draw() { 
    switch (currentScreenState) { 
    case ScreenState.MENU: 
     // Draw the menu screen. 
     break; 
    case ScreenState.GAMEPLAY: 
     // Draw the gameplay screen. 
     break; 
    case ScreenState.SETTINGS: 
     // Draw the settings screen. 
     break; 
    } 
} 

通常、ゲームループでupdate（）とdraw（）が繰り返し呼び出されます。そして、更新やユーザーの入力などに応じて状態を変更します。ゲームは、switch文に基づいて一度に1つの状態しか表示できません。

私は、メニュー/テキストを含む画面にはHTMLを使用し、実際のゲームプレイ画面にはキャンバスのみを扱うことをお勧めします。このように、あなたはあなたのゲームプレイの状態に対処する必要がありますし、画面の管理と画面のスワップイン/アウトを行うことで、やっかいなことをやり遂げることができます。私は通常、単純にGameComponents（更新のみ）またはDrawableGameComponents（更新可能と描画可能の両方）の子コンポーネントを持つ個別のオブジェクトとして各画面を持っています。次に、各画面を慎重に管理し、コードと状態の管理と保守が容易になります。

Answer 2

各状態をオブジェクトにします。 JS継承に慣れているなら、これにプロトタイプを使うことができます。この方法

menuState = { 
    update: function() { 
    //... 
    } 
} 

settingsState = { 
    update: function() { 
    //... 
    } 
} 

playState = { 
    update: function() { 
    this.clear(); 
    this.move(); 
    this.draw(); 
    }, 
    clear: function() { 
    //... 
    }, 
    move: function() { 
    //... 
    } 
    draw: function() { 
    //... 
    } 
} 

、あなたはちょうどあなたが（例えばcurrentState = playState;）にしていた状態追跡する変数を持って、そして適切な場合currentState.update()を呼び出すことができます。それ以外の場合は、あなただけ以下のように、同じ方法で各状態を定義することができます。これにより、各状態のロジックは、switchステートメントの代わりに自己完結した状態に保たれます。