Javascript 如何制作HTML5画布；按/单击播放“；启动屏幕

我已经完成了一个游戏的基本机制，也完成了结束屏幕。现在我计划用Photoshop制作一个png，标题和说明都在其中。当我点击/按下回车键时，我应该可以像平常一样开始游戏了

我一直在寻找，但大部分的答案似乎是针对框架或复杂的菜单

我的程序也从这一点开始

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

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

    ...
}

---

使用游戏状态管理器保持当前游戏状态功能，然后在启动屏幕状态期间只需聆听鼠标和按键事件。游戏状态只是保存了您需要在每帧调用一次的函数，以运行游戏或斜杠屏幕或结束游戏屏幕

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
}