A maior diferença entre um jogo HTML5 e uma animação é 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 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 técnica mais poderosa usa 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 - Isto significa que cada elemento pode ser apenas verdadeiro ou falso, apenas.

• Há uma constante definida para cada chave. Cada tecla no teclado padrão tem uma constante especial já definida. 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á pressionado, keysDown [A] irá conter o valor verdade. Se o UMA tecla não 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 teclas pressionadas ao mesmo tempo. O objetivo principal desta técnica é permitir múltiplas teclas a serem pressionadas ao mesmo tempo. 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 essa 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 do ecrã.

X coordena o trabalho exatamente 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 atua um pouco diferente do que ele fez na aula de matemática. A maioria das varreduras de hardware de visualização de cima para baixo, de modo que Y é 0 no topo da tela e aumenta à medida que se movem para baixo.

Note-se que a altura máxima e largura 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 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, para que você possa usá-los para direcionar a posição ou movimento do sprite.

Algumas destas funções parecem semelhantes entre si. 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 esta função.

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

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, há também 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 atualizar() novamente:

 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á actualmente pressionado.

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

   Se o usuário está pressionando a esquerda; tecla de seta, vire 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.

   Video: APRENDA javascript (ES6) CRIANDO UM JOGO #1 - INTRODUÇÃO

   A verificação 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 pressionar a seta para cima, mudar a velocidade do carro. Use um valor positivo para acelerar o carro. Não vai demorar muito, porque este código está sendo verificado 20 vezes por segundo.

6. Retardar o carro para baixo com a seta para baixo.

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

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

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