¿Cómo crear una pantalla de inicio para un juego HTML5 Canvas?

La mayoría de nosotros sabemos que el elemento HTML5 Canvas está teniendo una compatibilidad mucho mejor con estos motores Javascript sorprendentemente rápidos de Firefox, Safari y Chrome.¿Cómo crear una pantalla de inicio para un juego HTML5 Canvas?

Recientemente he estado experimentando con el desarrollo de juegos con Javascript y Canvas, y me pregunto cuál sería un buen enfoque para crear una pantalla de inicio para un juego de Javascript.

Hasta ahora, la única idea que tengo es crear una interfaz de usuario antes del juego y cosas con Javascript y usar los escuchas de eventos para rastrear el mouse y cuando hacen clic en los botones. Pero no estoy seguro de si esto es algo sabio de hacer.

¿Qué podría hacer una buena manera de iniciar una pantalla, etc. en un juego de Javascript? Cualquier ayuda sería útil, ¡gracias!

ACTUALIZACIÓN: gracias por la (s) respuesta (s) rápida (s)! Muchos de ustedes están sugiriendo colocar un img hasta que el juego se cargue, etc. ¿Debo escribir un administrador de activos o algo por el estilo, para verificar cuándo se cargan todas las imágenes, etc.?

Fuente

2011-12-23 Dropped43

No sé si necesitas conseguir ese complejo. Parece que solo quieres mostrar una pantalla de introducción, tal vez con un título y algunas instrucciones. Por favor vea mi respuesta actualizada a continuación con la muestra del código. ¡Buena suerte! –

Sí, solo una pantalla de introducción y esas cosas. ¡Miré tu respuesta actualizada y parece muy simple! Gracias, jugaré con eso. – Dropped43

¡Genial! Seleccione mi respuesta como correcta (marca de verificación verde) si la usa. ¡Realmente podría usar los puntos! –

Complete una etiqueta div con su pantalla de inicio. Haga que se muestre en la carga de la página y oculte su lienzo. Agregue un botón de "inicio" a la etiqueta div y en su evento de clic, oculte la etiqueta div de la pantalla de bienvenida y muestre el lienzo usando jQuery o JavaScript clásico.

Aquí hay un código de ejemplo utilizando 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>

Fuente

2011-12-23 18:52:41

simple, utilice un HTML normal img que se encuentra 'por encima' el lienzo hasta que todo se carga/inicializado.

Fuente

2011-12-23 18:53:05 ColinE

¿Cómo crear una pantalla de inicio para un juego HTML5 Canvas?

Respuesta

Cuestiones relacionadas