Como verificar os limites em seu jogo html5

Video: Jogo da Memória com HTML5 CSS3 e javascript – Pt.1 Posicionando as Cartas

Uma vez sprites começam a se mover, há sempre a possibilidade de que eles vão deixar os limites da tela. Normalmente, os desenvolvedores de jogos HTML5 responder em uma das cinco maneiras: envoltório, salto, parar, morrem, ou continuar. o simpleGame biblioteca tem uma rotina limite de verificação que lhe permite especificar quais destes comportamentos padrão de usar. O sprite do boundAction propriedade indica que a ação deve ser usado. Você pode usar o limite-checker para fazer o seguinte:

Video: Atlases vs Spritesheets - HTML5 Game Development

1. Determinar as fronteiras.

   Video: #DevCast - Desenvolvimento de Jogos com HTML5

   As fronteiras são determinadas pela largura da lona.

2. Verifique se o usuário está fora de uma fronteira.

   Video: Pong - HTML5 Game Programming Tutorial [javascript]

   Em seguida, uma outra série de variáveis ​​foram feitas, que contêm valores booleano que indica se o sprite está fora de uma das fronteiras: offRight, offLeft, fora do topo, e offBottom. Use básico if para determinar se o sprite está fora da tela em uma dessas maneiras.

3. Determinar a ação de fronteira.

   Use um simples E se declaração para determinar qual ação limite está definido para o sprite.

4. Se o boundAction é EMBRULHO:

   Mudar o X ou y variável para o lado oposto, mas deixe o dx e dy valores sozinho.

5. Se o boundAction é PULO:

   
   
   
   

   Invertido dy Se o sprite ricocheteou na parte superior ou inferior, e dx Se o sprite ricocheteou a esquerda ou direita. Não é necessário mudar X ou y diretamente.

6. Se o boundAction é PARE:

   Basta definir a velocidade a zero, independentemente de qual limite foi retirado.

7. Se o boundAction é MORRER:

   Defina a velocidade a zero e invocar o sprite do ocultar() método. Isso fará com que o sprite a desaparecer e deixar de ser considerado nos cálculos de colisão.

8. Qualquer outro boundAction é considerado CONTINUAR.

   Nenhuma ação é necessária aqui, porque o sprite vai continuar em movimento, mesmo que ele não é visível. Se este for o efeito desejado, você deve de alguma forma indicar ao usuário onde o sprite é, ou fornecer alguma maneira para o sprite para retornar.

Aqui está parte do código para a rotina de verificação de colisão:

 offRight = false-offLeft = false-offtop = false-offBottom = false-se (this.x gt; RightBorder) {offRight = true-} se (this.x lt; LeftBorder) {offLeft = true-} se (this.y gt; BottomBorder) {offBottom = true-} se (this.y lt; 0) {offtop = true-} se (this.boundAction == WRAP) {if (offRight) {this.x = leftBorder-} // final IFIF (offBottom) {this.y = topBorder-} // final IFIF ( offLeft) {this.x = rightBorder-} // fim do IFIF (offtop) {this.y = bottomBorder-}} else if (this.boundAction == O SALTO) {if (offtop || offBottom) {this.dy * = -1-this.calcSpeedAngle () - this.imgAngle = this.moveAngle-} se (offLeft || offRight) {this.dx * = -1-this.calcSpeedAngle () - this.imgAngle = this.moveAngle-}} else if (this.boundAction == STOP) {if (offLeft || offRight || offtop || offBottom) {this.setSpeed ​​(0) -}} else if (this.boundAction == DIE) {if (offLeft || offRight || offtop || offBottom) {this.hide () - this.setSpeed ​​(0) -}} else {// manter em curso para sempre}} // checkbounds finais

Se você quer mudar ação limite de um sprite no simpleGame, você pode usar o setBoundAction () método para fazê-lo.

Note-se que algumas situações podem exigir diferentes comportamentos. Por exemplo, você pode querer envolver em torno dos lados, mas parar na parte superior ou inferior. Se você precisa de um comportamento mais específico, basta construir um novo checkBounds () método para seu sprite. No entanto, você precisa verificar todos os limites, porque o seu novo checkBounds () irá substituir completamente o que se construiu em simpleGame.