Cómo agregar botones a su HTML5 Juego para Acceso Móvil

January 15

La biblioteca simpleGame tiene una característica muy útil llamado GameButton para añadir un botón a la pantalla de un dispositivo móvil para su juego HTML5. El teclado es una de las maneras más fáciles de conseguir la entrada en un navegador estándar, pero la mayoría de los dispositivos móviles no tienen teclados. El primer problema es encontrar la manera de obtener la entrada del usuario cuando no hay teclado.

Cómo agregar botones a su HTML5 Juego para Acceso Móvil


El botón personalizado objeto GameButton comienza con las características de un botón HTML estándar, pero luego añade un par de trucos para que sea adecuado para los juegos. Puede activar el botón con un ratón normal o con los controles táctiles, lo que es ideal para los juegos que se pueden jugar en ambos tipos de dispositivos. La página button.html ilustra el botón de acción:

<! DOCTYPE HTML>
<Html lang = "en-US">
<Head>
<Charset meta = "UTF-8">
<Title> button.html </ title>
<Script type = "text / javascript"
src = "simpleGame.js"> </ script>
<Script type = "text / javascript">
var btnMove;
juego var;
bola var;

función init () {
juego = new escena ();
game.setSize (200, 200);
bola = new Sprite (juego "redBall.png", 25, 25);
ball.setSpeed ​​(0);
ball.setPosition (100,100);

btnMove = new GameButton ("Move");
btnMove.setPos (70, 150);
btnMove.setSize (60, 30);
game.start ();
} // Init final

actualización function () {
game.clear ();
checkButtons ();
ball.update ();
} // Actualización final

checkButtons function () {
si (btnMove.isClicked ()) {
ball.setSpeed ​​(3);
} Else {
ball.setSpeed ​​(0);
} // End if
} // end checkButtons
</ Script>
</ Head>
<Body onload = "init ()">
</ Body>
</ Html>

Como de costumbre, los elementos nuevos e interesantes se indican en negrita. He aquí cómo usted agrega un botón de juego para un juego:

  1. Crear una variable para el botón.

    Al igual que cualquier otro elemento de juego, usted comienza creando una variable para hacer referencia al botón.

  2. Construir el objeto GameButton.

    Construir el objeto GameButton en el método init (). El único parámetro indica el título del botón.

  3. Definición del tamaño y la posición del botón.

    Usted querrá pensar un poco acerca de cómo su juego va a funcionar en dispositivos móviles. Coloque sus botones donde fácilmente se puede llegar por el jugador sin bloquear demasiado de la vista. Tenga en cuenta que también querrá hacer los botones lo suficientemente grande como para ser presionado durante el calor del juego. (Los botones en pantalla son mucho mejores para los juegos basados ​​en tabletas.)

  4. Comprobar el estado de botón durante la actualización ().

    Así como usted comprueba normalmente estado del teclado durante la función update (), también puede llamar a una función para comprobar el estado de su botón. Por supuesto, usted tendrá que escribir esta función.

  5. Leer el método del botón isClicked ().

    Si se pulsa el botón Actualmente, el valor de isClicked () es verdadera. Si no se presiona el botón en la actualidad, isClicked () devuelve falso. Utilice este método para determinar el estado actual de cada botón y actuar en consecuencia.

  6. Tratar un botón al igual que el teclado.

    Debido a probar los botones en última instancia, devuelve valores booleanos (verdadero o falso), la comprobación de los botones por lo general se siente mucho como el control para el teclado.

  7. Considere la adición de botones sólo cuando sea necesario.

    Si lo desea, puede diseñar un juego para mostrar (y prueba) botones sólo cuando una pantalla táctil está disponible. El objeto de escenas tiene una variable especial llamada tangible. Esta variable es verdadera si la biblioteca detecta una pantalla táctil, y false en caso contrario. Puede utilizar esta variable para generar una interfaz personalizada que se adapta al entorno de juego.

Normalmente, añadirá varios botones a su interfaz, uno para reemplazar cada tecla que usted espera que el usuario utilice (por ejemplo, las flechas y la barra espaciadora). De esta forma, se puede crear un teclado virtual en la pantalla. Puede que tenga que probar el tamaño y la posición de cada tecla para conseguir una cómoda experiencia de juego.

Tenga en cuenta que el título del botón es HTML normal, así que si usted desea hacer sus botones a partir de imágenes, sólo tiene que añadir la adecuada etiqueta <img> en un rubro botón.