HTML5 Canvas 제작 방법 "누르기/클릭하여 재생"시작 화면

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 
}