A maior diferença entre um jogo HTML5 e uma animação é a interação do usuário. Se você quiser torná-lo um jogo, você precisa que o usuário se envolver. E aqui está como fazer isso.

Aqui está o código:

 
Dirigir o carro!

Como usar o teclado para o seu jogo

De alguma forma, o usuário precisa para interagir com a página. O teclado é um dos mais fáceis elementos de entrada para usar. simpleGame fornece algumas maneiras de verificar o teclado, mas a mais poderosa técnica utiliza uma variável especial chamada keysDown. Veja como funciona:

• keysDown é uma matriz global. Esta variável é criado automaticamente quando você constrói uma cena. É uma matriz de valores booleanos - o que significa cada elemento só pode ser verdadeiro ou falso, apenas.

• Há uma constante definida para cada chave. Cada tecla no teclado padrão tem uma constante especial já definido. Por exemplo, K_A representa o UMA chave, e K_B representa o B chave.

• keysDown diz o status de cada chave. Se o UMA chave está actualmente pressionado, keysDown [A] irá conter o valor verdade. Se o UMA tecla for pressionada, keysDown [A] irá conter o valor falso.

• Você pode determinar o status atual de qualquer tecla. Basta verificar o keysDown [] matriz para determinar o status atual de qualquer tecla.

• Você pode ter várias chaves para baixo ao mesmo tempo. O objectivo principal desta técnica é a de permitir que várias chaves para ser pressionado de uma só vez. Em computação normal, é raro ter mais de uma tecla de cada vez. No jogo, é muito comum a pressionar mais de uma tecla de cada vez, por isso você precisa de um mecanismo que pode suportar esta expectativa.

Como mover o sprite jogo

Essencialmente, um sprite tem uma posição, a qual é controlada por X e Y propriedades. Se você se lembrar da aula de matemática, X representa valores horizontais, e Y é para localização vertical. o origem (0, 0) é o canto superior esquerdo da tela.

X coordena o trabalho apenas como você se lembra da aula de matemática. Como valores de X obter maiores, o sprite move para a direita. Na computação gráfica, Y age um pouco diferente do que ele fez na aula de matemática. A maior parte dos exames de hardware de visualização de cima para baixo, de modo que Y é 0, na parte superior do ecrã e aumenta à medida que se movem para baixo.

Note-se que a altura e a largura máximas são armazenados em variáveis: scene.height e scene.width.

Todos os vários métodos de movimento são realmente sobre a manipulação de X e Y. Você pode definir esses valores manualmente (setPosition (), setX (), e setY ()), Ou você pode alterar os valores (changeXby (), changeYby ()). Cada um desses métodos age imediatamente, assim que você pode usá-los para direcionar a posição ou o movimento da Sprite.

Algumas dessas funções parecem semelhantes uns aos outros. Por exemplo, changeXby () se parece muito com setChangeX (). Essas funções têm uma diferença sutil, mas importante. o changeXby () função altera o valor de X uma vez. Se você quer a mudança para continuar, você tem que manter a chamar essa função.

o setChangeX () função é mais poderosa porque você pode chamá-lo de uma só vez, e repetidamente, altera x por qualquer valor a determinar até que você chamar setChangeX () mais uma vez.

Para a maioria dos sprites, você realmente quer dar simplesmente o sprite um ângulo e uma velocidade, e deixá-lo ir. o duende objeto tem exatamente os métodos que você precisa para esse comportamento. setAngle () permite determinar a direção o sprite irá, e setspeed () permite especificar a velocidade para ir nessa direção. Como a maioria das funções de movimento, também existem changeAngle () e changeSpeed ​​() métodos.

Como controlar o carro em seu jogo

o keysDown mecanismo pode ser combinado com os métodos de movimento para controlar facilmente o seu carro. Aqui está o código relevante do atualizar() mais uma vez:

 update function () {scene.clear () - // teclas de seleção Se (keysDown [K_LEFT]) { car.changeAngleBy (-5) - } // fim se Se (keysDown [K_RIGHT]) { car.changeAngleBy (5) - } // fim se Se (keysDown [K_UP]) { car.changeSpeedBy (1) - } // fim se Se (keysDown [K_DOWN]) { car.changeSpeedBy (-1) - } // fim secar.update () -} // update final

A codificação real é muito fácil de entender:

1. Limpar a cena.

   Como de costume, a primeira ordem de negócios no atualizar() função é a de limpar a sala de jogos. Certifique-se de que você tenha apagado o quadro anterior antes de fazer qualquer outra coisa.

2. Verifique se há uma esquerda; arrow imprensa.

   Use o keysDown mecanismo para determinar se a seta para a esquerda está pressionado.

3. Se a seta para a esquerda é pressionado, virar o carro para a esquerda.

   Se o usuário está pressionando a esquerda; botão da seta para virar o carro cinco graus sentido anti-horário. Use o changeAngleBy () método para alterar a aparência visual do carro, bem como a direção que está viajando.

4. Repita o procedimento para a seta para a direita.

   A verificação de seta para a direita é semelhante, mas desta vez virar o carro cinco graus no sentido horário.

5. Use a seta para cima para acelerar.

   Se o usuário pressiona a seta para cima, mudar a velocidade do carro. Usar um valor positivo para acelerar o carro. Não vai demorar muito, porque este código está sendo verificada 20 vezes por segundo.

6. Frear o veículo com a seta para baixo.

   Use um mecanismo semelhante para a seta para baixo. Alterar a velocidade por um valor negativo para abrandar o carro. Esta abordagem permite valores negativos, eo carro fará o backup se quiser.

7. Desenhar o carro em sua nova posição.

   É extremamente importante lembrar que chamar funções de movimento do Sprite não altera a localização do carro! Ele só muda os dados internos na memória do jogo. Você deve chamar o carro de atualizar() método para ver essas mudanças na ação.