La mayor diferencia entre un juego de HTML5 y una animación es la interacción del usuario. Si usted quiere que sea un juego, que necesita el usuario para participar. Y aquí es cómo hacerlo.

Aquí está el código:

¡Conduce el coche!

Cómo utilizar el teclado para su juego

De alguna manera, el usuario tiene que interactuar con la página. El teclado es uno de los elementos de entrada más fáciles de usar. simpleGame proporciona un par de maneras de comprobar el teclado, pero la técnica más poderosa utiliza una variable especial llamada keysDown. Así es como funciona:

• keysDown es una matriz global. Esta variable se crea automáticamente cuando se crea una escena. Es una matriz de valores booleanos - Esto significa que cada elemento puede ser única verdadera o sólo es falsa.

• Hay una constante definida para cada tecla. Cada tecla del teclado estándar tiene una constante especial ya definido. Por ejemplo, K_A representa el UN clave, y k_B representa el segundo llave.

• keysDown indica el estado de cada llave. Si el UN Actualmente se pulsa la tecla, keysDown [A] contendrá el valor cierto. Si el UN no pulsa ninguna tecla, keysDown [A] contendrá el valor falso.

• Se puede determinar el estado actual de las llaves. Sólo tienes que comprobar la keysDown [] matriz para determinar el estado actual de las llaves.

• Puede tener varias teclas pulsadas a la vez. El propósito principal de esta técnica es para permitir múltiples teclas a pulsar al mismo tiempo. En informática normal, es raro tener más de una clave a la vez. En los juegos, es muy común que pulsar más de una tecla a la vez, por lo que necesita un mecanismo que puede apoyar esta expectativa.

Cómo mover el sprite juego

Esencialmente, un sprite tiene una posición, que está controlado por X e Y propiedades. Si usted recuerda de la clase de matemáticas, X representa los valores horizontales, e Y es para la ubicación vertical. los origen (0, 0) es la esquina superior izquierda de la pantalla.

X coordina el trabajo al igual que lo recuerda de la clase de matemáticas. A medida que se hacen más grandes valores de X, el sprite se mueve a la derecha. En los gráficos por ordenador, Y actúa un poco diferente de lo que hizo en la clase de matemáticas. La mayoría de las exploraciones de hardware de visualización de arriba a abajo, de modo que y es 0 en la parte superior de la pantalla y aumenta a medida que se mueve hacia abajo.

Tenga en cuenta que la altura y la anchura máxima se almacenan en variables: scene.height y scene.width.

Todas las diversas métodos de movimiento son realmente acerca de la manipulación de X e Y. Puede establecer estos valores manualmente (setPosition (), setX (), y setY ()), O puede cambiar los valores (changeXby (), changeYby ()). Cada uno de estos métodos actúa de inmediato, para que pueda utilizarlos para dirigir la posición o el movimiento del sprite.

Algunas de estas funciones parecen similares entre sí. Por ejemplo, changeXby () se parece mucho setChangeX (). Estas funciones tienen una diferencia sutil pero importante. los changeXby () función cambia el valor de X una vez. Si desea que el cambio continúe, usted tiene que mantener llamar a esta función.

los setChangeX () función es más poderoso porque se le puede llamar una sola vez, y cambia varias veces x por cualquier valor a determinar hasta que llame setChangeX () de nuevo.

Para la mayoría de los sprites, que realmente quiere dar simplemente el sprite un ángulo y una velocidad, y dejarlo ir. los duende objeto tiene exactamente los métodos que necesita para este comportamiento. setAngle () le permite determinar la dirección del sprite se irá, y velocidad fijada() le permite especificar la velocidad a ir en esa dirección. Como la mayoría de las funciones de movimiento, también hay changeAngle () y changeSpeed ​​() métodos.

Cómo controlar el coche en su juego

los keysDown mecanismo se puede combinar con los métodos de movimiento para controlar fácilmente su coche. Aquí está el código pertinente de actualizar() de nuevo:

 actualización de la función () {scene.clear () - // llaves de verificación si (keysDown [K_LEFT]) { car.changeAngleBy (-5) - } // terminara si si (keysDown [K_RIGHT]) { car.changeAngleBy (5) - } // terminara si si (keysDown [K_UP]) { car.changeSpeedBy (1) - } // terminara si si (keysDown [K_DOWN]) { car.changeSpeedBy (-1) - } // terminara sicar.update () -} // fin de actualización

La codificación real es bastante fácil de entender:

1. Desactive la escena.

   Como de costumbre, la primera orden del día en el actualizar() función es la de limpiar la sala de juegos. Asegúrese de que haya borrado la trama previa antes de hacer cualquier otra cosa.

2. Compruebe si hay una izquierda, flecha prensa.

   Utilizar el keysDown mecanismo para determinar si la flecha izquierda se presiona actualmente.

3. Si se pulsa la flecha hacia la izquierda, gire a la izquierda el coche.

   Si el usuario está presionando la actualidad la izquierda, tecla de flecha, girar el coche cinco grados hacia la izquierda. Utilizar el changeAngleBy () método para cambiar el aspecto visual del coche, así como la dirección en la que viaja.

4. Repita el procedimiento para la flecha derecha.

   La comprobación de flecha hacia la derecha es similar, pero esta vez girar el coche cinco grados hacia la derecha.

5. Usar la flecha hacia arriba para acelerar.

   Video: javascript. DOM. Eventos e interacción con usuario

   Si el usuario pulsa la flecha hacia arriba, cambiar la velocidad del coche. Utilice un valor positivo para acelerar el coche. No va a tomar mucho porque este código se está comprobando 20 veces por segundo.

6. Frenar el coche con la flecha hacia abajo.

   Utilizar un mecanismo similar para la flecha abajo. Cambiar la velocidad por un valor negativo para reducir la velocidad del coche. Este enfoque permite valores negativos, y el coche será una copia de seguridad si lo desea.

7. Dibujar el coche en su nueva posición.

   Es críticamente importante recordar que llamar a las funciones de movimiento del sprite no cambia la ubicación del coche! Sólo cambia los datos internos en la memoria del juego. Debe llamar al auto de actualizar() Método para ver estos cambios en la acción.