Como adicionar controles de inclinação para o seu jogo html5

Os dispositivos móveis têm um mecanismo de entrada muito intrigante que lhe permite controlar objetos em um jogo HTML5 inclinando. Isso funciona com uma ferramenta especial on-board chamada acelerômetro

, que acompanha o movimento. O acelerômetro mede realmente a rotação, e você pode usá-lo para obter controles de inclinação agradáveis ​​em seu jogo.

o simpleGame biblioteca tem um objeto especial chamado Accel que encapsula o acelerômetro. Ele funciona muito bem como o Alegria objeto.

1. Criar um Accel objeto.

   Video: Aleatórios #16. Jogos em HTML5

   SimpleGame tem uma Accel objeto. Criar esse objeto para ativar o teste acelerômetro.

2. Usar métodos para determinar inclinação.

   o Accel objeto tem métodos especiais chamados getAX () e getAY () que indicam a quantidade de rotação.

3. Modificar os valores de aceleração.

   o MACHADO e AY valores de apresentar a quantidade de rotação em torno dos eixos X e Y, respectivamente. Os valores variam de -9 a 9. Geralmente, você precisará modificar os valores de inclinação para obter exatamente o comportamento que você quer. Isso geralmente envolve alguns cálculos matemáticos simples.

Aqui está o código para accel.html:

O acelerômetro é fácil de usar:

Video: [TUTORIAL] Retroarch - Adicionando Jogos e configurando os controles - Parte 2/?

1. 
   
   
   

   Faça uma variável para armazenar o objeto acelerômetro.

   Video: Retomando o Controle - Dicas sobre execução de combos, controles e mais (Jogos de luta)

   Você pode chamar sua variável accel.

2. Usar accel.getAX () para obter a rotação em torno de X.

   o getAX () método retorna a percentagem de inclinação em torno do eixo X. O eixo X vai de lado a lado na tela, então a rotação em torno de X normalmente é amarrado ao movimento ao longo do eixo Y!

3. Usar acccel.getAY () para determinar a rotação em torno de Y.

   Da mesma forma, o getAY () método descreve a percentagem de inclinação ao longo do eixo Y (vertical). Normalmente, você vai usar getAY () para controlar o movimento horizontal.

4. Não estar preocupado com o eixo Z.

   Você também pode ler rotação ao longo do eixo Z (que vai desde o centro da tela para o seu nariz), mas isso geralmente não é útil.

5. Suponha (por agora) que a posição neutra está mentindo perfeitamente plana sobre uma mesa.

   Video: FLAPPY BIRD 'NA UNHA' 02 - ESTRUTURA HTML (HTML5/CSS3/JS)

   Você vai ter valores zero para getAX () e getAY () quando o dispositivo está deitado completamente imóvel sobre uma mesa perfeitamente plana.

6. Experimentar com fatores de escala.

   Você geralmente tem que multiplicar o getAX () e getAY () resultados por alguma quantidade para obter o comportamento desejado. Se você multiplicar ambos por cinco negativo, você vai ter valores apropriados para dy e dx. Você terá que experimentar para obter exatamente o comportamento que você quer.