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.
multiFlies.html 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:
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.
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.
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.
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
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 () -
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
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