HTML5キャンバスの作り方「押す/クリックして再生」開始画面

Question

私はゲームの基本的な仕組みを終えましたが、終了画面でもやっています。今、私はPhotoshopでタイトルと説明書があるpngを作成する予定です。私がクリックして/ enterを押すと、私は普通のようにゲームを始めることができるはずです。

非常に時々検索していましたが、答えのほとんどはフレームワークまたは複雑なメニューを目指すようです。

私のプログラムはまた、この時点で開始さ

window.addEventListener('load', function() { 
    canvas1 = document.getElementById("gameCanvas1"); 
    canvasContext1 = canvas1.getContext("2d"); 

    canvas2 = document.getElementById("gameCanvas2"); 
    canvasContext2 = canvas2.getContext("2d"); 

    ... 
} 

Answer 1

現在のゲームの状態機能を保持するためにゲーム状態マネージャーを使用してそしてちょうどスプラッシュ画面状態時にマウスやキーイベントに耳を傾けます。ゲームの状態には、ゲームまたはスラッシュ画面を実行するため、またはゲーム画面を終了するためにフレームごとに1回呼び出す必要のある機能があります。

function splashIO (event) { // function to start the game when IO is correct 
    // check for the correct events 
    if(event.type === "click" || (event.type === "keydown" && event.code === "Enter")){ 
     // remove events 
     canvas.removeEventListener("click",splashIO); 
     canvas.removeEventListener("keydown",splashIO); 
     gameStates.current = gameStates.startGame; 
    } 
} 

// holds the game state and game state functions 
const gameStates = { 
    current : undefined, 
    splash() { // display splash =================================== 
     // display splash and wait for new state 
    }, 
    setupSplash() { // setup splash screen ========================== 
     canvas.addEventListener("click", splashIO); 
     canvas.addEventListener("keydown", splashIO); 
     gameStates.current = gameStates.splash(); 
     gameStates.current(); // call the first frame 
    }, 
    startGame() { // setup game ===================================== 
     gameStates.current = gameStates.game(); //set up state function 
     gameStates.current(); // call the first frame 
    }, 
    game() { // plays the main game =============================== 
      // play game 
    } 
} 

// main animation loop 
function mainLoop() { 
    gameStates.current(); // run current game state 
    requestAnimationFrame(mainLoop); 
} 

gameStates.current = gameStates.setupSplash; // set current state to splash screen 

// wait for page to load then start the animation 
window.addEventListener('load', function() { 
    requestAnimationFrame(mainLoop); // start the animation 
}