Cómo agregar respuesta ratón para su juego html5 para el acceso móvil

Debido a que los navegadores web son inconsistentes en la forma en que informan de la posición del ratón, la entrada del ratón en javascript normal es difícil en el mundo del juego HTML. los simpleGame biblioteca maneja esto añadiendo getMouseX () y getMouseY () métodos a la Escena objeto. Estos métodos no son siempre exactamente correcto, pero son lo suficientemente cerca como para que la mayoría programación de juegos.

Cada vez que usted desea leer un ratón normal, sólo tiene que utilizar el Escena objeto de getMouseX () y getMouseY () funciones para determinar la posición aproximada del ratón.

La mayor parte del tiempo en que desea que la posición del ratón, es porque usted va a mover un objeto donde está el ratón o señalar un objeto hacia el ratón.

A menudo, usted querrá ocultar el cursor del ratón, para que puedas utilizar el Escena objeto de hideCursor () método para ocultar el cursor. (Por supuesto, se puede recuperar el cursor con el ShowCursor () método).

Si quieres leer una pantalla táctil, hay uno más sencillo paso. los simpleGame biblioteca tiene un objeto joystick virtual llamada Alegría. Crear una instancia de esta clase para activar las funciones de lectura de pantalla táctil.

Tenga en cuenta que la interfaz táctil de los dispositivos móviles no es exactamente igual que el ratón, por lo que necesita una interfaz diferente. Sin embargo, una vez que haya creado un Alegría objeto, el getMouseX () y getMouseY () funciones harán acto de entrada táctil al igual que un ratón normal.

touchMouse.html oculta el cursor de ratón normal y se mueve una bola donde el ratón está señalando. Este ejemplo particular funciona con un navegador tradicional y un dispositivo de pantalla táctil.

los simpleGame biblioteca simplifica dramáticamente el proceso de trabajar con el puntero del ratón, proporcionando algunas llamadas a métodos fáciles. Aquí está el código:

Conseguir un sprite para seguir el ratón es sólo una cuestión de saber qué métodos para llamar.

1. Ocultar el cursor del ratón.

   los Escena objeto tiene un hideCursor () método. Esta es la forma más fácil de ocultar el puntero del ratón normal. Normalmente, cuando usted sigue el ratón con un objeto, ¿te refieres a ese objeto de actuar como el nuevo puntero del ratón, por lo que oculta la flecha normal.

2. Crear una variable para el joystick virtual.

   Si usted va a trabajar con un dispositivo de pantalla táctil, tendrá una variable para contener el objeto joystick virtual. (Si este juego se utilizará sólo en máquinas de escritorio con los ratones normales, no será necesario el objeto joystick.)

3. Inicialice el joystick.

   Hacer una instancia de la Alegría objeto en el en eso() función. Sólo la creación de la palanca de mando le dirá al motor para esperar la entrada táctil y asignarla a los comandos normales de ratón.

4. Agrega un followMouse () función.

   Por lo general es buena para crear una nueva función para manejar la entrada. los followMouse () función le dirá el objeto de seguir el ratón. Por supuesto, si usted está construyendo un objeto que sigue el ratón, se puede hacer de este un método de ese objeto, si lo prefiere.

5. Usar getMouseX () y getMouseY () métodos.

   los Escena objeto tiene métodos llamados getMouseX () y getMouseY (). Utilice estos métodos para obtener las coordenadas X e Y del ratón sobre la escena. Tenga en cuenta que las coordenadas no son siempre exactas.

6. Revise para ver si tiene una pantalla táctil.

   los Escena objeto tiene un tocable propiedad que es cierto si el navegador tiene una pantalla táctil. Normalmente no desea que el objeto que se oculta por el dedo, por lo que a menudo usted querrá compensar un objeto cuando se está utilizando una pantalla táctil para la entrada.

7. Mueva el objeto más alto que el dedo.

   En un entorno de pantalla táctil, que normalmente desea que el sprite para seguir siendo visibles, por lo que a menudo va a compensar el eje Y por alguna cantidad por lo que no es oscurecida por el dedo del jugador. Resta un valor de Y para conseguir este efecto.