Como trabalhar com vários objetos em seu jogo html5

Seria bom ter mais de um objeto em seu jogo HTML5. Vários objetos tornar o jogo um pouco mais emocionante e acrescenta alguma profundidade. Um objeto batendo em torno de por si só não é muito divertido. Para que servem os erros se você não pode estar infestada com eles?

Porque o jogo foi criado com princípios orientados a objeto, é bastante fácil de adicionar várias moscas. Aqui está o código.

 
Hits: 0

Essencialmente, você vira uma única mosca em uma matriz de moscas. Toda vez que você teria feito algo com uma única mosca, você percorrer a variedade de moscas. Aqui estão os destaques:

1. Mudar o mosca variável por isso é agora chamado moscas.

   Video: Movendo Objetos com o Mouse (e uma introdução à gravidade) - Jogos com javascript e HTML

   Em vez de uma única mosca variável, você estará trabalhando com uma variedade de moscas.

2. Crie um NUMFLIES constante.

   Armazenar o número de moscas em uma variável especial chamada NUMFLIES. Este controla o número de moscas no jogo. Você pode facilmente mudar este valor para tornar o jogo mais difícil ou mais fácil. Note-se que o valor de NUMFLIES não deverá mudar durante uma única corrida do jogo, para que você colocar tudo em maiúsculas para indicar que é uma constante.

3. Adicionar um exitos e uma variável placar div.

   Esta variável irá acompanhar o número de colisões fly-sapo. Há uma correspondente div, que irá mostrar o placar.

4. Configurar as moscas.

   
   
   
   

   o setupFlies () função é executado através de um loop NUMFLIES vezes. Cada vez através do loop, cria-se uma mosca e anexa-lo para o numFlies matriz:

    setupFlies função () {voa = new Array (NUMFLIES) -para (i = 0- i lt; NUMFLIES- i ++) {moscas [i] = new Fly () -} // end para} // setupFlies finais

5. modificar o atualizar() função.

   Agora que você tem várias moscas, você precisa ter certeza de que você atualizar cada elemento do moscas matriz. Novamente, use um para loop para percorrer a matriz. Para cada voar na matriz, chamar seu wriggle () método, verificar se há colisões com o sapo, e atualização:

    update function () {scene.clear () - frog.checkKeys () - leaves.update () - for (i = 0- i lt; NUMFLIES- i ++) {voa [i] .wriggle () -checkCollisions (I) -voa [i] .Update () - } // final loopfrog.update () -} // update end () -

6. modificar o checkCollisions () função.

   Você precisa fazer algumas pequenas alterações checkCollisions para que ele possa verificar se há uma colisão entre o sapo ea mosca atual. Basta passar um número real para a função e usar esse índice para fazer a verificação de colisão:

    checkCollisions função (flyNum) {if (frog.collidesWith (moscas [flyNum])) {voa [flyNum] .reset () - ribbit.play () - updateScore () -} // final se} // checkCollisions finais

7. Atualize o placar.

   O último passo é atualizar o placar. Tudo isso requer é para incrementar o número de visitas e, em seguida, mudar o placar div para refletir o novo número de acessos:

 função updateScore () {// actualizar os scoreboardhits + = 1 =-scoreBoard.innerHTML "Exitos: " + Atinge} // updateScore final