1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
---
title: Collision detection
slug: Games/Tutorials/2D_breakout_game_Phaser/Collision_detection
tags:
- 2D
- Deteccion de colision
- JavaScript
- Lienzo
- Phaser
- Principiante
- Tutorial
- juegos
translation_of: Games/Tutorials/2D_breakout_game_Phaser/Collision_detection
---
<div>{{GamesSidebar}}</div>
<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_Phaser/The_score")}}</p>
<div class="summary">
<p>Este es el paso<strong> 10 </strong>de un total de 16, del tutorial de <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser.</a> Puedes encontrar el código fuente tal y cómo queda al completar la lección en <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson10.html">Gamedev-Phaser-Content-Kit/demos/lesson10.html</a>.</p>
</div>
<p><span class="seoSummary">Ahora en el próximo desafío: la detección de colisiones entre la bola y los ladrillos. Por suerte, podemos usar el motor de física para verificar las colisiones no solo entre objetos individuales (como la pelota y la paleta), sino también entre un objeto y el grupo.</span></p>
<h2 id="Detección_de_colisión_ladrillobola">Detección de colisión ladrillo/bola</h2>
<p>El motor de físicas hace que todo sea mucho más fácil - solo necesitamos agregar dos simples fragmentos de código. Primero, añade una nueva línea dentro de la función <code>update()</code> que verifique la detección de las colisiones entre la bola y los ladrillos, como se muestra a continuación:</p>
<pre class="brush: js">function update() {
game.physics.arcade.collide(ball, paddle);
game.physics.arcade.collide(ball, bricks, ballHitBrick);
paddle.x = game.input.x || game.world.width*0.5;
}
</pre>
<p>La posición de la bola se calcula contra las posiciones de todos los ladrillos del grupo. El tercer parámetro opcional es la función que se ejecuta cuando se produce una colisión: <code>ballHitBrick()</code>. Crea esta nueva función en la parte inferior de tu código, justo antes de la etiqueta de cierre <code></script></code>, como sigue:</p>
<pre class="brush: js">function ballHitBrick(ball, brick) {
brick.kill();
}
</pre>
<p>¡Y ya está! Vuelve a cargar el código, y verás que la nueva detección de colisión funciona correctamente.</p>
<p>Gracias a Phaser, se pasan dos parámetros a la función: el primero es la bola, que definimos explícitamente en el método de colisión, y el segundo es el único bloque del grupo de ladrillos con el que la bola está colisionando. Dentro de la función, eliminamos el bloque en cuestión de la pantalla ejecutando el método<code>kill()</code> en él.</p>
<p>Seguro que esperarabas tener que escribir muchos más cálculos para implementar la detección de colisiones cuando se utiliza<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection"> JavaScript</a> puro. Esa es la belleza de usar el marco: puedes dejar un montón de código aburrido a Phaser, y enfocarte en las partes más divertidas e interesantes de hacer un juego.</p>
<h2 id="Compara_tu_código">Compara tu código</h2>
<p>Puedes consultar el código terminado para esta lección en la demo que aparece a continuación, y jugar con él para comprender mejor cómo funciona:</p>
<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/wwneakwf/","","400")}}</p>
<h2 id="Próximos_pasos">Próximos pasos</h2>
<p>Podemos golpear los ladrillos y eliminarlos, lo cual sería una buena adición al juego. Sería incluso mejor contar los ladrillos destruidos incrementando la puntuación como resultado.</p>
<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_Phaser/The_score")}}</p>
|
