如何製作HTML5畫布「按下/點擊播放」開始畫面

Question

我已經完成了遊戲的基本機制，並且在最終屏幕上完成了。現在我打算用Photoshop製作一個png，標題和說明。當我點擊/按下輸入時，我應該可以像平常一樣開始遊戲。

很多時候都在尋找，但大部分答案似乎都是針對框架或複雜的菜單。

我的節目也開始在這一點上

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

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

    ... 
} 

Answer 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 
}