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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
|
---
title: Añadiendo características a nuestra demo de bouncing balls
slug: Learn/JavaScript/Objects/Adding_bouncing_balls_features
tags:
- Aprender
- Evaluación
- JavaScript
- Objetos
- Orientado a objetos
- Principiante
translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features
---
<div>{{LearnSidebar}}</div>
<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}</div>
<p class="summary">En esta evaluación, se espera que use la demo de bouncing balls del artículo anterior como punto de partida y le agregue algunas características nuevas e interesantes.</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Prerrequisitos:</th>
<td>Antes de intentar esta evaluación, debería haber revisado todos los artículos de este módulo.</td>
</tr>
<tr>
<th scope="row">Objetivo:</th>
<td>Para probar la comprensión de objetos JavaScript y construcciones orientadas a objetos.</td>
</tr>
</tbody>
</table>
<h2 id="Punto_de_partida">Punto de partida</h2>
<p>Para iniciar esta evaluación, haz una copia local de <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index-finished.html">index-finished.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css">style.css</a>, y <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js">main-finished.js</a> de nuestro último artículo en un nuevo directorio en tu ordenador.</p>
<div class="note">
<p><strong>Nota</strong>: Alternativamente, puede usar un sitio como <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> para hacer su evaluación. Puede pegar el HTML, CSS y JavaScript en uno de estos editores en línea. Si el editor en línea que está utilizando no tiene paneles JavaScript / CSS separados, sientase libre de poner en linea elementos <code><script></code>/<code><style></code> dentro de la página.</p>
</div>
<h2 id="Resumen_del_proyecto">Resumen del proyecto</h2>
<p>Nuestra demostración de la pelota hinchable es divertida, pero ahora queremos que sea un poco más interactiva agregando un círculo maligno controlado por el usuario, que se los comería si los atrapa. Tambien queremos testar nuestras destrezas como constructores de objetos creando un objeto <code>Shape()</code> genérico de que puedan heredar nuestra pelota y el círculo maligno. Finalmente, queremos añadir una puntuación para seguir el número de bolas que quedan por capturar.</p>
<p>La siguiente captura de pantalla te da una idea de cómo debería verse el programa final.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13875/bouncing-evil-circle.png" style="display: block; margin: 0 auto;"></p>
<ul>
</ul>
<p>Para darle una idea eche un vistazo al <a href="http://mdn.github.io/learning-area/javascript/oojs/assessment/">ejemplo final</a> (¡no mire el código fuente!)</p>
<h2 id="Pasos_para_completar">Pasos para completar</h2>
<p>Las siguientes secciones describen lo que debe hacer.</p>
<h3 id="Creando_nuestro_nuevos_objetos">Creando nuestro nuevos objetos</h3>
<p>Primero de todo, cambia la constructora existente de <code>Ball()</code> para que se convierta en un constructor <code>Shape()</code> y añade un nuevo constructor <code>Ball()</code>:</p>
<ol>
<li>El constructor <code>Shape()</code> debe definir las propiedades <code>x</code>, <code>y</code>, <code>velX</code>, y <code>velY</code> del mismo modo que lo hacía el constructor <code>Ball()</code> constructor original, pero no las propiedades <code>color</code> y <code>size</code>.</li>
<li>También debe definir una nueva propiedad <code>exists</code>, que se utiliza para realizar un seguimiento de si existen las bolas en el programa (no se han comido por el círculo maligno). Debe ser un boolean (<code>true</code>/<code>false</code>).</li>
<li>El constructor <code>Ball()</code> debe heredar las propiedades <code>x</code>, <code>y</code>, <code>velX</code>, <code>velY</code>, y <code>exists</code> del constructor <code>Shape()</code>.</li>
<li>También debe definir propiedades <code>color</code> y <code>size</code>, como el constructor original <code>Ball()</code> hacía.</li>
<li>Recuerda configurar el <code>prototype </code>del constructor <code>Ball()</code> correctamente.</li>
</ol>
<p>Los métodos de la pelota <code>draw()</code>, <code>update()</code>, y <code>collisionDetect()</code> deben ser capaces de permanecer exactamente igual que antes.</p>
<p>También necesitas añadir un parámetro nuevo a la llamada del constructor <code>new Ball() ( ... )</code> — El parámetro <code>exists</code> debe ser el quinto parámetro y debe tener un valor <code>true</code>.</p>
<p>En este punto, intente volver a cargar el código; debería funcionar igual que antes, con nuestros objetos rediseñados.</p>
<h3 id="Definiendo_EvilCircle">Definiendo EvilCircle()</h3>
<p>Ahora es el momento de conocer al chico malo: ¡el <code>EvilCircle()</code>! Nuestro juego solo involucrará un círculo malvado, pero lo vamos a seguir definiendo usando un constructor que hereda de <code>Shape()</code> para que tengas algo de práctica. Es posible que desee agregar otro círculo a la aplicación más adelante que pueda ser controlado por otro jugador o tener varios círculos malvados controlados por computadora. Probablemente no vas a dominar el mundo con un solo círculo maligno, pero servirá para esta evaluación.</p>
<p>El constructor <code>EvilCircle()</code> debe heredar <code>x</code>, <code>y</code>, <code>velX</code>, <code>velY</code>, y <code>exists</code> from <code>Shape()</code>, pero <code>velX</code> y <code>velY</code> debe ser igual a 20.</p>
<p>Debería hacer algo como <code>Shape.call(this, x, y, 20, 20, exists);</code></p>
<p>Debe definir también sus propias propiedades, como las siguientes:</p>
<ul>
<li><code>color</code> — <code>'white'</code></li>
<li><code>size</code> — <code>10</code></li>
</ul>
<p>Otra vez, recuerda definir tus propiedades heredadas como parámetros en el constructor, y configura las propiedades <code>prototype</code> y <code>constructor</code> properties correc.tamente</p>
<h3 id="Definiendo_los_métodos_de_EvilCircle">Definiendo los métodos de EvilCircle()</h3>
<p><code>EvilCircle()</code> debe tener cuatro métodos como se desciben a continuación.</p>
<h4 id="draw"><code>draw()</code></h4>
<p>Este método tiene el mismo propósito que el método <code>draw()</code>de <code>Ball()</code>: Se encarga de dibujar la instancia del objeto en el lienzo. Funcionarán de una forma muy similar, así que puedes empezar copiando la definición de <code>Ball.prototype.draw</code>. Luego deberías hacer los siguientes cambios.:</p>
<ul>
<li>Queremos que el círculo del mal no se complete, sino que simplemente tenga una línea exterior (trazo). Puedes lograr esto actualizando <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle">fillStyle</a></code> y <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fill">fill()</a></code> a <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle">strokeStyle</a></code> y <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/stroke">stroke()</a></code>.</li>
<li>También queremos que el trazo sea un poco más grueso, para que puedas ver el círculo malvado con mayor facilidad. Podemos lograr esto configurando un valor para <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth">lineWidth</a></code> en algún lugar después de la llamada <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath">beginPath()</a></code> (3 hará).</li>
</ul>
<h4 id="checkBounds"><code>checkBounds()</code></h4>
<p>Este método hara lo mismo que la primera parte de la función <code>update()</code> de <code>Ball()</code> — mire para ver si el círculo maligno va a salir del borde de la pantalla y evite que lo haga. De nuevo, puede copiar la mayoría de la definición de <code>Ball.prototype.update</code>, hay algunos cambios que debe hacer:</p>
<ul>
<li>Deshazte de las dos últimas líneas: no queremos actualizar automáticamente la posición del círculo maligno en cada cuadro, porque lo moveremos de alguna otra manera, como verás a continuación.</li>
<li>Dentro de las declaraciones <code>if()</code>, si el test devuelve true no queremos actualizar <code>velX</code>/<code>velY</code>; queremos cambiar el valor de <code>x</code>/<code>y</code> por lo que el círculo del mal se rebota en la pantalla ligeramente. Agregar o restar (según corresponda) la propiedad de tamaño del círculo maligno (<code>size</code>) tendría sentido.</li>
</ul>
<h4 id="setControls"><code>setControls()</code></h4>
<p>Este método agregará un detector de eventos <code>onkeydown</code> al objeto <code>window</code> para que cuando se presionen ciertas teclas del teclado, podamos mover el círculo maligno. El siguiente bloque de código debe colocarse dentro de la definición del método:</p>
<pre class="brush: js notranslate">var _this = this;
window.onkeydown = function(e) {
if (e.keyCode === 65) {
_this.x -= _this.velX;
} else if (e.keyCode === 68) {
_this.x += _this.velX;
} else if (e.keyCode === 87) {
_this.y -= _this.velY;
} else if (e.keyCode === 83) {
_this.y += _this.velY;
}
}</pre>
<p>Por tanto cuando se presiona una tecla, el evento del objeto <a href="/en-US/docs/Web/API/KeyboardEvent/keyCode">keyCode</a> se consulta para averiguar que tecla se ha presionado. Si es uno de los cuatro representados por los códigos clave especificados, entonces el círculo maligno se moverá a la izquierda / derecha / arriba / abajo.</p>
<ul>
<li>Para obtener un punto de bonificación, avísenos a qué teclas se asignan los códigos de clave especificados.</li>
<li>Para otro punto de bonificación, ¿nos podrías decir por qué tenemos que configurar <code>var _this = this;</code> en la posición en la que está? Es algo que se hace en la función scope.</li>
</ul>
<h4 id="collisionDetect"><code>collisionDetect()</code></h4>
<p>Este método actuará de una forma muy similar al método <code>collisionDetect() </code>de <code>Ball()</code>, así que puede usar una copia de eso como una base para el nuevo método. Pero hay algunas diferencias:</p>
<ul>
<li>En el exterior de la declaración <code>if</code>, ya no es necesario comprobar si la bola actual en la iteración es la misma que la bola que está haciendo la comprobación, porque ya no es una bola, ¡es el círculo del mal! En su lugar, debe hacer una prueba para ver si existe la bola que se está verificando (¿con qué propiedad podría hacerlo?). Si no existe, ya ha sido devorado por el círculo maligno, por lo que no es necesario volver a comprobarlo.</li>
<li>En el interior de la declaración <code>if</code>, ya no desea que los objetos cambien de color cuando se detecta una colisión; en cambio, desea que no existan más bolas que colisionen con el círculo maligno (una vez más, ¿cómo cree que haría eso?).</li>
</ul>
<h3 id="Trayendo_el_círculo_del_mal_al_programa.">Trayendo el círculo del mal al programa.</h3>
<p>Ahora que hemos definido el círculo maligno, debemos hacerlo aparecer en nuestra escena. Para hacerlo, necesitas hacer alguno cambios a la función <code>loop()</code>.</p>
<ul>
<li>Primero de todo, crea una nueva instancia del círculo maligno (especifica los parámetros necesarios ), entonces llama al método <code>setControls()</code> . Solo necesita hacer estas dos cosas una vez, no en cada iteración del bucle.</li>
<li>En el punto en el que intera por todas las pelotas y llama a las funciones <code>draw()</code>, <code>update()</code>, y<code>collisionDetect()</code> para cada una, hazlo para que estas funciones solo sean llamadas si la bola actual existe.</li>
<li>Llama a los métodos de la instancia de la pelota maligna <code>draw()</code>, <code>checkBounds()</code>, y<code>collisionDetect()</code> en cada iteración del bucle.</li>
</ul>
<h3 id="Implementando_el_contador_de_puntuación.">Implementando el contador de puntuación.</h3>
<p>Para implementar el contador de puntuación sigue estos pasos:</p>
<ol>
<li>En tu archivo HTML añade un elemento {{HTMLElement("p")}} justo debajo del elemento {{HTMLElement("h1")}} que contiene el texto "Ball count: ".</li>
<li>En tu archivo CSS, agregue la siguiente regla en la parte inferior:
<pre class="brush: css notranslate">p {
position: absolute;
margin: 0;
top: 35px;
right: 5px;
color: #aaa;
}</pre>
</li>
<li>En su JavaScript, realice las siguientes actualizaciones:
<ul>
<li>Cree una variable que almacene una referencia al párrafo.</li>
<li>Mantenga un recuento de la cantidad de bolas en la pantalla de alguna manera.</li>
<li>Incrementa el conteo y muestra el número actualizado de bolas cada vez que se agrega una bola a la escena.</li>
<li>Disminuye el conteo y muestra el número actualizado de bolas cada vez que el círculo maligno se come una bola (hace que no exista).</li>
</ul>
</li>
</ol>
<h2 id="Consejos">Consejos</h2>
<ul>
<li>Esta evaluación es bastante desafiante. Da cada paso despacio y con cuidado.</li>
<li>Puede ser una idea mantener una copia separada de la demostración después de que cada etapa esté funcionando, para que pueda consultarla si se encuentra en problemas más adelante.</li>
</ul>
<h2 id="Evaluación">Evaluación</h2>
<p>Si está siguiendo esta evaluación como parte de un curso organizado, debe poder entregar su trabajo a su maestro / mentor para que lo marque. Si está aprendiendo solo, puede obtener la guía de calificación con bastante facilidad preguntando en el <a href="https://discourse.mozilla.org/t/adding-features-to-our-bouncing-balls-demo-assessment/24689">discussion thread for this exercise</a>, o en el <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC channel en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Prueba a hacer el ejercicio primero — no hay nada que ganar con trampa!</p>
<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}</p>
<h2 id="En_este_módulo">En este módulo</h2>
<ul>
<li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li>
<li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
<li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
<li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
<li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
<li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
<li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
</ul>
|
