如何制作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 
}