javascript - 如何制作 HTML5 Canvas "Press/Click to play"开始屏幕

Question

我已经完成了游戏的基 native 制，也完成了片尾画面。现在我计划用 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
}