Creazione di una schermata iniziale per un gioco Canvas HTML5?

Question

Molti di noi sanno che l'elemento HTML5 Canvas ha un supporto molto migliore con questi motori Javascript incredibilmente veloci da Firefox, Safari e Chrome.

Recentemente ho sperimentato lo sviluppo di giochi con Javascript e Canvas, e mi chiedo quale sarebbe un buon approccio per creare una schermata iniziale per un gioco Javascript.

Finora, l'unica idea che ho sarebbe stata creare un'interfaccia utente prima del gioco e roba con Javascript e utilizzare gli ascoltatori di eventi per tenere traccia del mouse e quando fanno clic sui pulsanti. Ma non sono sicuro se questa sia una cosa saggia da fare.

Quale sarebbe un buon modo per andare su una schermata iniziale, ecc. In un gioco Javascript? Qualsiasi aiuto sarebbe utile, grazie!

AGGIORNAMENTO: Grazie per la rapida risposta veloce (s)! Molti di voi suggeriscono di piazzare una img fino a quando il gioco non si carica, ecc. Quindi devo scrivere un gestore di risorse o qualche tipo - per controllare quando vengono caricate tutte le immagini ecc.?

Answer 1

Compilare un tag div con la schermata iniziale. Fallo mostrare sul caricamento della pagina e fai nascondere la tua tela. Aggiungi un pulsante "start" al tag div e al suo evento click, nascondi il tag div dello splash screen e mostra il canvas usando jQuery o JavaScript classico.

Ecco alcuni esempi di codice utilizzando jQuery:

<div id="SplashScreen"> 
<h1>Game Title</h1> 
<input id="StartButton" type="button" value="Start"/> 
</div> 

<canvas id="GameCanvas" style="display: none;">Game Stuff</canvas> 

<script> 
    $("#StartButton").click(function() { 
     $("#SplashScreen").hide(); 
     $("#GameCanvas").show(); 
    }); 
</script> 

Answer 2

Semplice, utilizzare un normale HTML img che si trova 'sopra' la tela fino a quando tutto è caricato/inizializzato.