{"id":9201,"date":"2017-09-26T13:16:27","date_gmt":"2017-09-26T11:16:27","guid":{"rendered":"http:\/\/agora.xtec.cat\/ieshugroger\/?p=9201"},"modified":"2017-09-27T13:16:17","modified_gmt":"2017-09-27T11:16:17","slug":"caza-la-manzana","status":"publish","type":"post","link":"https:\/\/agora.xtec.cat\/ieshugroger\/impulsem-la-robotica\/caza-la-manzana\/","title":{"rendered":"Caza la manzana"},"content":{"rendered":"<h3><a href=\"https:\/\/create.arduino.cc\/ctc\/101\/course\/view.php?id=258#section-1\">Caza la manzana<\/a><\/h3>\n<div><\/div>\n<div><\/div>\n<ul>\n<li id=\"module-269\">\n<div><\/div>\n<div>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ico-sfw-3\" alt=\"\" width=\"40\" height=\"39\" \/><\/div>\n<p>En este proyecto vas a llevar la programaci\u00f3n un poco m\u00e1s lejos y crear\u00e1s un peque\u00f1o videojuego donde nuestro aguerrido h\u00e9roe, el famoso cient\u00edfico Newton, intenta no perder la oportunidad de que la manzana le caiga en la cabeza.<\/p>\n<p>Vamos a crear, paso a paso, un programa en el que Newton coleccione puntos durante medio minuto, al recibir tantos manzanazos en la cabeza como sea posible.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-03-0\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<ol>\n<li>\n<h3>Crea una manzana y un cient\u00edfico<\/h3>\n<p>Empezar\u00e1s creando una manzana y un cient\u00edfico. Las manzanas, por ahora, ser\u00e1n c\u00edrculos que caen del cielo, mientras que Newton ser\u00e1 un cuadrado al fondo de la pantalla.<\/p>\n<h4><a href=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-9.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9202 aligncenter\" src=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-9.jpg\" alt=\"\" width=\"673\" height=\"237\" srcset=\"https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-9.jpg 673w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-9-300x106.jpg 300w\" sizes=\"auto, (max-width: 673px) 100vw, 673px\" \/><\/a><br \/>\nResultado<\/h4>\n<p>Se dibuja un circulo que representa la manzana, y un cuadrado para marcar la posici\u00f3n del personaje Newton.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-03-1\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<h4>Comandos<\/h4>\n<ul>\n<li>rect(x, y, rectWidth, rectHeight): Dibuja un rect\u00e1ngulo.\u00a0x\u00a0e\u00a0y\u00a0establecen la posici\u00f3n de la esquina superior izquierda,\u00a0rectWidth\u00a0y\u00a0rectHeight\u00a0establecen el tama\u00f1o en p\u00edxeles.<\/li>\n<\/ul>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>En la funci\u00f3n\u00a0setup()\u00a0se establece el tama\u00f1o de la ventana a 400 x 400 p\u00edxeles.<\/li>\n<li>En la funci\u00f3n\u00a0draw()\u00a0se dibuja un c\u00edrculo en las coordenadas (15, 15), con\u00a0x\u00a0e\u00a0y\u00a0de 20 p\u00edxeles de di\u00e1metro.<\/li>\n<li>Se dibuja un cuadrado en la esquina superior izquierda con las coordenadas (width\/2,\u00a0height-25) de 20 x 20 p\u00edxeles de tama\u00f1o.<\/li>\n<\/ul>\n<\/li>\n<li value=\"2\">\n<h3>Controla a Newton con el teclado<\/h3>\n<p>En este paso, har\u00e1s que Newton (el cuadrado) se mueva a la derecha y a la izquierda con las flechas del teclado.<\/p>\n<h4><a href=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-10.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9203 aligncenter\" src=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-10.jpg\" alt=\"\" width=\"630\" height=\"422\" srcset=\"https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-10.jpg 630w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-10-300x201.jpg 300w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><\/a><br \/>\nResultado<\/h4>\n<p>Pulsa las flechas del teclado y ver\u00e1s c\u00f3mo se mueve el cuadrado.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-03-2\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<h4>Comandos<\/h4>\n<ul>\n<li>keyPressed(){ statements }: Esta funci\u00f3n se llama cada vez que se pulsa una tecla. Es decir, cualquier c\u00f3digo escrito dentro de esta funci\u00f3n ser\u00e1 ejecutado al pulsar una tecla.<\/li>\n<li>keyCode: Es una variable interna del sistema que se emplea para detectar qu\u00e9 tecla ha sido pulsada.<\/li>\n<li>RIGHT: Constante que contiene el valor del c\u00f3digo de la tecla &#8220;flecha derecha&#8221;.<\/li>\n<li>LEFT: Constante que contiene el valor del c\u00f3digo de la tecla &#8220;flecha izquierda&#8221;.<\/li>\n<\/ul>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>Se declara la variable\u00a0nX, tipo int, y se inicializa a 0. Esta variable almacenar\u00e1 la posici\u00f3n X de Newton (el cuadrado).<\/li>\n<li>En la funci\u00f3n\u00a0draw(), se configura el color del fondo a gris claro. Al pintar de nuevo el fondo en cada iteraci\u00f3n de la funci\u00f3n\u00a0draw()\u00a0se elimina el rastro del cuadrado cuando se mueve.<\/li>\n<li>La posici\u00f3n X del cuadrado se fija con la variable\u00a0nX. La posici\u00f3n Y es a\u00fan fija y vale\u00a0height-25.<\/li>\n<li>Se llama a la funci\u00f3n\u00a0keyPressed()\u00a0cada vez que se pulsa una tecla.<\/li>\n<li>Si se pulsa la tecla &#8220;fecha derecha&#8221;,\u00a0if( keyCode == RIGHT), se suman 3 a la variable\u00a0nX. Haciendo que el cuadrado se mueva 3 p\u00edxeles a la derecha.<\/li>\n<li>Si se pulsa la tecla &#8220;fecha izquierda&#8221;,\u00a0if( keyCode == LEFT), se restan 3 a la variable\u00a0nX. Haciendo que el cuadrado se mueva 3 p\u00edxeles a la izquierda.<\/li>\n<\/ul>\n<\/li>\n<li value=\"3\">\n<h3>Limita los movimientos del cuadrado<\/h3>\n<p>En este paso, emplear\u00e1s el condicional\u00a0if, para limitar los movimientos de Newton en el eje X haciendo que est\u00e9 siempre dentro de la ventana del programa. Es decir, tendr\u00e1 que ser mayor que 0 y menor que la anchura de la ventana (width).<\/p>\n<h4><a href=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-11.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9204 aligncenter\" src=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-11.jpg\" alt=\"\" width=\"612\" height=\"384\" srcset=\"https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-11.jpg 612w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-11-300x188.jpg 300w\" sizes=\"auto, (max-width: 612px) 100vw, 612px\" \/><\/a><br \/>\nResultado<\/h4>\n<p>En este caso, el resultado es casi el mismo, con la excepci\u00f3n de que el cuadrado ya no saldr\u00e1 fuera de la ventana de programa.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-03-3\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>Al final de la funci\u00f3n\u00a0keyPressed(), hay dos nuevas sentencias\u00a0if:\n<ul>\n<li>Si la variable\u00a0nX\u00a0es menor de 0,\u00a0if( nX&lt;0 ),\u00a0nX\u00a0se pone a 0. Haciendo as\u00ed, que el cuadrado no pueda pasar el l\u00edmite izquierdo.<\/li>\n<li>Si la variable\u00a0nX\u00a0es mayor que &#8220;width &#8211; 20&#8221;,\u00a0if( nX&gt;width-20 ),\u00a0nX\u00a0se pone a\u00a0width-20. Haciendo que el cuadrado no supere el l\u00edmite derecho. Se comprueba si\u00a0nX\u00a0es mayor que &#8220;width-20&#8221; en vez de mayor que\u00a0width\u00a0para asegurar que el cuadrado completo se ve, ya que su tama\u00f1o es de 20 p\u00edxeles de ancho.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li value=\"4\">\n<h3>Manzanas que caen<\/h3>\n<p>En este paso, modificar\u00e1s el programa para hacer que la manzana (c\u00edrculo) caiga de lo alto de la pantalla (cielo). Para esto, crear\u00e1s una variable que almacene la coordenada Y del c\u00edrculo y, la incrementar\u00e1s hasta que la manzana toque el suelo, es decir, la parte baja de la ventana del programa.<\/p>\n<h4><a href=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-12.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9205 aligncenter\" src=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-12.jpg\" alt=\"\" width=\"562\" height=\"460\" srcset=\"https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-12.jpg 562w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-12-300x246.jpg 300w\" sizes=\"auto, (max-width: 562px) 100vw, 562px\" \/><\/a><br \/>\nResultado<\/h4>\n<p>Los c\u00edrculos, o las manzanas, caen del cielo.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-03-4\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>Se declara la variable\u00a0aY, tipo int, para almacenar la posici\u00f3n del c\u00edrculo (manzana) en el eje Y y se inicializa a 0.<\/li>\n<li>Cada vez que la funci\u00f3n\u00a0draw()\u00a0se ejecuta, se suma 1 a la variable\u00a0aY,\u00a0aY=aY+1, haciendo que el c\u00edrculo est\u00e9 un p\u00edxel m\u00e1s cerca del suelo.<\/li>\n<li>Una sentencia\u00a0if\u00a0comprueba si la variable\u00a0aY\u00a0es mayor que\u00a0height,\u00a0if( aY&gt;height ). Si lo es, significa que el c\u00edrculo ha alcanzado la parte baja de la ventana de programa, y la variable se pone nuevo a 0.<\/li>\n<\/ul>\n<\/li>\n<li value=\"5\">\n<h3>Un poco de azar<\/h3>\n<p>Hasta ahora, las manzanas siempre salen de la misma posici\u00f3n en lo alto de la pantalla, esto es bastante predecible. En este paso, vas a generar un n\u00famero aleatorio para cambiar la X de origen y que cada vez salgan de un sitio distinto.<\/p>\n<h4><a href=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-13.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9206 aligncenter\" src=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-13.jpg\" alt=\"\" width=\"787\" height=\"488\" srcset=\"https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-13.jpg 787w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-13-300x186.jpg 300w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-13-768x476.jpg 768w\" sizes=\"auto, (max-width: 787px) 100vw, 787px\" \/><\/a><br \/>\nResultado<\/h4>\n<p>Con este cambio en el programa, podr\u00e1s ver que las manzanas salen desde cualquier punto en lo alto de la pantalla.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-03-5\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<h4>Comandos<\/h4>\n<ul>\n<li>random(max): Genera un n\u00famero aleatorio entre 0 y\u00a0max-1. Tambi\u00e9n puedes usar\u00a0random(min,max)\u00a0para generar un n\u00famero aleatorio entre\u00a0min\u00a0y\u00a0max-1.<\/li>\n<\/ul>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>Se declara\u00a0aX, una variable tipo int, para almacenar el valor de la posici\u00f3n X de los circulos (manzanas) y se inicializa a 15. Ten en cuenta que la coordenada habr\u00e1 que cambiarla solo cuando la manzana llegue al suelo, si no cambiar\u00e1 aleatoriamente durante su ca\u00edda.<\/li>\n<li>Cuando el c\u00edrculo alcanza la parte baja de la ventana (suelo),\u00a0if( aY&gt;height), se fija una nueva coordenada X. Un n\u00famero aleatorio entre 0 y\u00a0width-20,\u00a0aX = int( random( width-20 ) ).<\/li>\n<li>Se dibuja el c\u00edrculo utilizando\u00a0aX\u00a0c\u00f3mo coordenada X,\u00a0ellipse( aX, aY, 20, 20).<\/li>\n<\/ul>\n<\/li>\n<li value=\"6\">\n<h3>Detecci\u00f3n de colisi\u00f3n<\/h3>\n<p>La acci\u00f3n de detectar que dos objetos se chocan en la pantalla se llama\u00a0detecci\u00f3n de colisi\u00f3n. En este paso, vas a detectar si la manzana choca con la cabeza de Newton empleando una sentencia\u00a0if. Al detectar colisi\u00f3n, se cambia el color del cuadrado y del c\u00edrculo a rojo.<\/p>\n<h4><a href=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-14.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9207 aligncenter\" src=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-14.jpg\" alt=\"\" width=\"759\" height=\"736\" srcset=\"https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-14.jpg 759w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-14-300x291.jpg 300w\" sizes=\"auto, (max-width: 759px) 100vw, 759px\" \/><\/a><br \/>\nResultado<\/h4>\n<p>Cuando las manzanas (c\u00edrculos) colisionan con el cuadrado (Newton) ambos se vuelven rojos.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-03-6\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<h4>Comandos<\/h4>\n<ul>\n<li>if(test1 &amp;&amp; test2){ statements }: Esto se utiliza para realizar varias comprobaciones en un \u00fanico\u00a0if(). En este ejemplo, comprobamos si\u00a0aY+10 &gt; nY\u00a0y si\u00a0aY-10 &lt; nY+20. Si estas dos comprobaciones son ciertas simult\u00e1neamente, se ejecuta el c\u00f3digo entre llaves.<\/li>\n<\/ul>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>Se declara la variable\u00a0nY, tipo int, para almacenar la coordenada Y de la posici\u00f3n del cuadrado (Newton) y se inicializa a 0. Esta variable facilita la comprobaci\u00f3n de las colisiones.<\/li>\n<li>En la funci\u00f3n\u00a0setup(), se asigna a la variable\u00a0nY\u00a0el valor\u00a0width-20. Esto se tiene que hacer en la funci\u00f3n\u00a0setup()\u00a0despu\u00e9s de ajustar el tama\u00f1o de la ventana. En caso contrario,\u00a0width\u00a0no tomar\u00e1 el valor correcto.<\/li>\n<li>El color de relleno se fija a blanco,\u00a0fill(255), as\u00ed se puede cambiar cuando se detecta una colisi\u00f3n.<\/li>\n<li>La detecci\u00f3n de colisi\u00f3n se realiza con dos sentencias\u00a0if, una dentro de otra:\n<ul>\n<li>La primera, comprueba si el circulo se encuentra a la misma altura que el cuadrado,\u00a0if( aY+10 &gt; nY &amp;&amp; aY-10 &lt; nY+20). Es decir, si la zona inferior del c\u00edrculo (aY+10) est\u00e1 por debajo de la superior del cuadrado (nY), y la superior del c\u00edrculo (aY-10) est\u00e1 por encima de la inferior del cuadrado (nY+20). Si esta condici\u00f3n es cierta, se comprueba la segunda.<\/li>\n<li>La segunda, comprueba si el c\u00edrculo se encuentra en la misma posici\u00f3n X que el cuadrado.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Adem\u00e1s, si activas las siguientes l\u00edneas en el programa. Ver\u00e1s una serie de l\u00edneas en la pantalla enmarcando el movimiento de los objetos. Puedes emplearlas para ver c\u00f3mo funciona la detecci\u00f3n de colisi\u00f3n.<\/p>\n<pre>\/\/ lines of code to understand how collision works\r\n\/\/ erase the comment in order to see the code\r\nline(0,aY-10,width,aY-10);\r\nline(aX-10,0,aX-10,height);\r\nline(0,aY+10,width,aY+10);\r\nline(aX+10,0,aX+10,height);<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-03-7\" alt=\"\" width=\"580\" height=\"524\" \/><\/li>\n<li value=\"7\">\n<h3>M\u00e1s r\u00e1pido<\/h3>\n<p>Para hacer el juego m\u00e1s interesante, en este paso har\u00e1s que las manzanas caigan m\u00e1s r\u00e1pido.<\/p>\n<div><a href=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-10-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9211 aligncenter\" src=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-10-1.jpg\" alt=\"\" width=\"479\" height=\"923\" srcset=\"https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-10-1.jpg 479w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-10-1-156x300.jpg 156w\" sizes=\"auto, (max-width: 479px) 100vw, 479px\" \/><\/a><\/div>\n<h4>Resultado<\/h4>\n<p>Las manzanas caen m\u00e1s r\u00e1pido.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-03-8\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>Para preparar el siguiente paso, la variable\u00a0aY\u00a0se hace de tipo\u00a0float\u00a0en lugar de tipo\u00a0int&gt;\/code&gt;.<\/li>\n<li>Se declara la variable\u00a0aV, tipo\u00a0float, para almacenar el valor 3. Esto es la velocidad de la manzana.<\/li>\n<li>En la funci\u00f3n\u00a0draw(), la posici\u00f3n Y de la manzana, se fija incrementando la variable\u00a0aY\u00a0con la velocidad,\u00a0aV.<\/li>\n<\/ul>\n<\/li>\n<li value=\"8\">\n<h3>A Newton le gusta la gravedad, dale m\u00e1s<\/h3>\n<p>En este paso, modificar\u00e1s la ca\u00edda de las manzanas para que responda a la aceleraci\u00f3n de la gravedad. De este modo, las manzanas ir\u00e1n cada vez m\u00e1s r\u00e1pido cuanto m\u00e1s cerca est\u00e9n del suelo.<\/p>\n<div><a href=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9212 aligncenter\" src=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-2.jpg\" alt=\"\" width=\"556\" height=\"978\" srcset=\"https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-2.jpg 556w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-2-171x300.jpg 171w\" sizes=\"auto, (max-width: 556px) 100vw, 556px\" \/><\/a><\/div>\n<h4>Resultado<\/h4>\n<p>Las manzanas caen dependiendo de la aceleraci\u00f3n y la gravedad.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-03-9\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>Cuando se declara la variable de la velocidad,\u00a0aV, se le asigna el valor 0.<\/li>\n<li>Se declara una variable,\u00a0aA, tipo\u00a0float, para almacenar un valor de aceleraci\u00f3n de 0.05 (en el mundo real esto es 0.98, pero poner ese valor har\u00eda muy dif\u00edcil el juego.)<\/li>\n<li>En la funci\u00f3n\u00a0draw(), la velocidad de la manzana se configura incrementando\u00a0aV\u00a0con\u00a0aA. Esto aumenta la velocidad cada vez que la funci\u00f3n\u00a0draw()\u00a0se ejecuta.<\/li>\n<li>La posici\u00f3n Y de la manzana, se fija incrementando la variable\u00a0aY\u00a0con\u00a0aV. Esto hace que la manzana se mueva distancias m\u00e1s grandes cada vez que la funci\u00f3n\u00a0draw()\u00a0se ejecuta.<\/li>\n<li>Cuando se lanza una nueva manzana, esto se hace en la sentencia if donde se comprueba si la variable\u00a0aY\u00a0es mayor que\u00a0height, la velocidad se fija 0.<\/li>\n<\/ul>\n<\/li>\n<li value=\"9\">\n<h3>Cuenta los puntos<\/h3>\n<p>En este paso, implementar\u00e1s un contador que cuente cu\u00e1ntas manzanas golpearon a Newton.<\/p>\n<div>Nota: como empiezas a tener muchas variables en tu programa, es recomendable a\u00f1adir comentarios para recordar qu\u00e9 hace cada una.<\/div>\n<div><span style=\"font-size: 1.4375em; font-weight: bold;\"><a href=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-3.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-9214 aligncenter\" src=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-3-485x1024.jpg\" alt=\"\" width=\"485\" height=\"1024\" srcset=\"https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-3-485x1024.jpg 485w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-3-142x300.jpg 142w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-3.jpg 610w\" sizes=\"auto, (max-width: 485px) 100vw, 485px\" \/><\/a>Resultado<\/span><\/div>\n<p>La cantidad de manzanas que golpeen la cabeza de Newton se contar\u00e1n y se mostrar\u00e1n en la ventana del programa.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-03-10\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<h4>Comandos<\/h4>\n<ul>\n<li>text( text, x, y ): escribe un texto (text) en la pantalla en las coordenadas\u00a0x\u00a0e\u00a0y.<\/li>\n<\/ul>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>Se declara la variable,\u00a0p, tipo\u00a0int\u00a0para almacenar los puntos.<\/li>\n<li>En la sentencia if para la detecci\u00f3n de colisi\u00f3n, una vez que el color de relleno se fija a rojo, la variable\u00a0p\u00a0se incrementa en 1.<\/li>\n<li>En las \u00faltimas l\u00edneas de la funci\u00f3n\u00a0draw(), se fija el color de relleno a negro.<\/li>\n<li>Se sit\u00faa un texto en las coordenadas (\u00a03*width\/4,\u00a020). El texto dice \u201cHits:\u00a0\u201c y el valor de la variable\u00a0p. Ten en cuenta que &#8220;hits&#8221; es &#8220;golpes&#8221; en espa\u00f1ol.<\/li>\n<\/ul>\n<\/li>\n<li value=\"10\">\n<h3>Uoops, error<\/h3>\n<p>Te habr\u00e1s dado cuenta que tu programa ahora mismo est\u00e1 contabilizando puntos de m\u00e1s. Cada vez que la manzana cae sobre la cabeza de Newton, cuando el c\u00edrculo toca el cuadrado, tu contador sube m\u00e1s o menos 5 puntos. Esto se debe a que el contador contin\u00faa contando hasta que la mazana se solapa con Newton por completo.<\/p>\n<p>Para corregir esto, crear\u00e1s una variable de tipo\u00a0boolean\u00a0(una variable que puede ser verdadero (true) o falso (false)) para decirle al programa si contar puntos o no.<\/p>\n<div><a href=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-5.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-9216 aligncenter\" src=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-5-477x1024.jpg\" alt=\"\" width=\"477\" height=\"1024\" srcset=\"https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-5-477x1024.jpg 477w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-5-140x300.jpg 140w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-5.jpg 573w\" sizes=\"auto, (max-width: 477px) 100vw, 477px\" \/><\/a><\/div>\n<h4>Resultado<\/h4>\n<p>El contador ha cambiado, ahora solo cuenta una colisi\u00f3n cada vez.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-03-11\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<h4>Comandos<\/h4>\n<ul>\n<li>if( boolean ){ statements }: Comprueba si\u00a0una variable tipo\u00a0boolean\u00a0es\u00a0true, si lo es ejecuta el c\u00f3digo entre llaves\u00a0statements. Puedes tambi\u00e9n comprobar si es\u00a0false\u00a0escribiendo\u00a0if( !boolean ).<\/li>\n<\/ul>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>Se declara la variable\u00a0pCount, tipo\u00a0boolean. Los puntos solo se cuentan cuando esta variable es\u00a0true.<\/li>\n<li>Justo despu\u00e9s de fijar la velocidad a 0, en la sentencia if que comprueba si la variable\u00a0aY\u00a0es mayor que\u00a0height, la variable\u00a0pCount\u00a0se pone a\u00a0true.<\/li>\n<li>Cuando se detecta una colisi\u00f3n, se incrementa en 1 la variable\u00a0p, siempre y cuando\u00a0pCount\u00a0valga\u00a0true.<\/li>\n<li>A continuaci\u00f3n,\u00a0pCount\u00a0se pone a\u00a0false.<\/li>\n<li>Cuando se lanza una nueva manzana, la variable\u00a0pCount\u00a0se pone de nuevo a\u00a0true.<\/li>\n<\/ul>\n<\/li>\n<li value=\"11\">\n<h3>Y el tiempo empieza<\/h3>\n<p>El objetivo del juego es recibir tantas manzanas en la cabeza de Newton como sea posible en medio minuto. En este paso, crear\u00e1s un temporizador de cuenta atr\u00e1s y lo mostrar\u00e1s en la ventana del programa.<\/p>\n<div><span style=\"font-size: 1.4375em; font-weight: bold;\"><a href=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-17.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-9217 aligncenter\" src=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-17-468x1024.jpg\" alt=\"\" width=\"468\" height=\"1024\" srcset=\"https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-17-468x1024.jpg 468w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-17-137x300.jpg 137w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image-17.jpg 684w\" sizes=\"auto, (max-width: 468px) 100vw, 468px\" \/><\/a>Resultado<\/span><\/div>\n<p>Ver\u00e1s el temporizador en la ventana del programa.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-03-12\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<h4>Comandos<\/h4>\n<ul>\n<li>long: Este es un tipo de datos para n\u00fameros enteros muy grandes. Es conveniente usarlos cuando manejamos variables temporales, porque estos datos pueden ser muy grandes. \u00bfRecuerdas que una variables es c\u00f3mo un contenedor de datos? Bien, se puede decir que\u00a0long\u00a0es un contenedor m\u00e1s grande que\u00a0int. Un\u00a0int\u00a0se queda sin espacio antes que un\u00a0long.<\/li>\n<li>noLoop(): Detiene la ejecuci\u00f3n continua de\u00a0la funci\u00f3n\u00a0draw. Para volver a ejecutar el programa tendr\u00e1s que llamar a\u00a0loop().<\/li>\n<li>millis(): Esta funci\u00f3n devuelve el tiempo en milisegundos que ha pasado desde la \u00faltima vez que se llam\u00f3. Si es la primera vez que la llamas, entonces desde que comenz\u00f3 el programa.<\/li>\n<\/ul>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>Se declara la variable,\u00a0t, tipo\u00a0long\u00a0para almacenar el tiempo.<\/li>\n<li>En la funci\u00f3n\u00a0setup(), se asigna a la variable\u00a0t\u00a0el valor que devuelve\u00a0millis(). Como el valor a\u00a0tse asigna al final de\u00a0setup(), este valor ser\u00e1 pr\u00f3ximo a 0, pero a\u00fan m\u00e1s pr\u00f3ximo a cuando el juego comienza realmente.<\/li>\n<li>En la funci\u00f3n\u00a0draw(), una vez dibujados el cuadrado y el c\u00edrculo, se declara la variable\u00a0timer\u00a0tipo\u00a0float.<\/li>\n<li>Se asigna a\u00a0timer\u00a0el valor\u00a0(millis()-t) \/ 1000. Al dividirlo entre 1000, esta variable tendr\u00e1 un valor en segundos en lugar de en milisegundos.<\/li>\n<li>Si la variable\u00a0timer\u00a0es igual o mayor que 30, han pasado 30 segundos y entonces se llama a la funci\u00f3n\u00a0noLoop()\u00a0la cual detendr\u00e1 el programa.<\/li>\n<li>Se muestra un texto en las coordenadas (10, 20). El texto dice: \u201cTime:\u00a0\u201c y el valor\u00a030 &#8211; t. Es decir, se muestra la cuenta atr\u00e1s. Ten en cuenta que &#8220;time&#8221; es &#8220;tiempo&#8221; en espa\u00f1ol.<\/li>\n<\/ul>\n<\/li>\n<li value=\"12\">\n<h3>A\u00f1ade im\u00e1genes al juego<\/h3>\n<p>En el \u00faltimo paso, a\u00f1adir\u00e1s im\u00e1genes (tipo PNG) para el fondo las manzanas y Newton. Las puedes crear t\u00fa, buscarlas en Internet, o usar las que\u00a0<a href=\"http:\/\/verkstad.cc\/urler\/ctc-dld-b1-p-3-5\" rel=\"nofollow\">te pasamos<\/a>.<\/p>\n<div>Nota: Es importante que las im\u00e1genes sean de tipo PNG si quieres que haya transparencia entre las im\u00e1genes y el fondo. Ten en cuenta que, al cambiar las formas por im\u00e1genes, las proporciones tambi\u00e9n cambian, por lo que tendr\u00e1s que hacer encajar esos valores en la parte del programa dedicado a la detecci\u00f3n de colisiones.<\/div>\n<div><a href=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image19.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-9218 aligncenter\" src=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image19-402x1024.jpg\" alt=\"\" width=\"402\" height=\"1024\" srcset=\"https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image19-402x1024.jpg 402w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image19-118x300.jpg 118w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/Image19.jpg 684w\" sizes=\"auto, (max-width: 402px) 100vw, 402px\" \/><\/a><\/div>\n<h4>Resultado<\/h4>\n<p>Como ves, ahora los c\u00edrculo son manzanas, el cuadrado es Newton, y en el fondo hay un \u00e1rbol.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-03-13\" alt=\"\" width=\"580\" height=\"524\" \/>Para cargar las im\u00e1genes utilizamos el mismo m\u00e9todo que en los proyectos anteriores, utilizando arrays. En lugar de cambiar el color de las formas cuando una colisi\u00f3n sea detectada, utilizamos el boolean\u00a0pCount\u00a0para decidir qu\u00e9 imagen de Newton mostrar.<\/p>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>Se declara el array\u00a0imFiles[], tipo\u00a0String, para almacenar los nombres de los archivos de las imagenes que se van a utilizar.<\/li>\n<li>Se declara el array\u00a0im[], tipo tipo\u00a0PImage, para almacenar las im\u00e1genes que se van a utilizar.<\/li>\n<li>En la funci\u00f3n\u00a0setup(), se utiliza un bucle\u00a0for\u00a0para recorrer los nombres de los archivos de las im\u00e1genes del array\u00a0imFiles[], y cargar las mismas en el array\u00a0im[].<\/li>\n<li>im[0]\u00a0contiene la imagen de fondo y se mostrar\u00e1 ajustada al tama\u00f1o de la ventana, esto se hace al empezar la funci\u00f3n\u00a0draw().<\/li>\n<li>im[1]\u00a0contiene la imagen de la manzana y se mostrar\u00e1 despu\u00e9s de la detecci\u00f3n de colisi\u00f3n.<\/li>\n<li>im[2]\u00a0y\u00a0im[3]\u00a0contienen las im\u00e1genes de Newton, la primera es Newton normal y la segunda es Newton despu\u00e9s de ser golpeado en la cabeza. La variable\u00a0pCount, tipo\u00a0boolean\u00a0se utiliza para decidir qu\u00e9 imagen se mostrar\u00e1.<\/li>\n<li>Si\u00a0pCount\u00a0es\u00a0true, significa que el programa est\u00e1 listo para contar los puntos si una colisi\u00f3n es detectada, y se muestra la imagen de Newton normal,(im[2]).<\/li>\n<li>Si\u00a0pCount\u00a0no es\u00a0true, significa que se detecta una colisi\u00f3n y que suma un punto, entonces se muestra la imagen de Newton golpeado (im[3]).<\/li>\n<li>En las sentencias\u00a0if\u00a0que comprueban la colisi\u00f3n, los valores se han modificado para encajar los tama\u00f1os en las im\u00e1genes en vez de las formas utilizadas anteriormente.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h2>\u00a1SIGUE EXPERIMENTANDO!<\/h2>\n<p>Para mejorar este juego puedes hacer varias cosas:<\/p>\n<ul>\n<li>Im\u00e1genes personalizadas: Crea tus propias im\u00e1genes.<\/li>\n<li>Pantalla de inicio: Crea una pantalla de inicio y que se pase al juego una vez se presione un bot\u00f3n.<\/li>\n<li>Pantalla final: Crea una pantalla que muestre el resultado una vez se haya terminado el tiempo.<\/li>\n<li>Reinicio: Haz posible reiniciar el juego cuando el tiempo haya terminado. No te olvides de reiniciar todas las variables necesarias.<\/li>\n<li>Modifica los movimientos: Haz que la manzana se mueva modificando la aceleraci\u00f3n en lugar de la velocidad.<\/li>\n<\/ul>\n<\/div>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p><a href=\"https:\/\/create.arduino.cc\/ctc\/101\/course\/view.php?id=258#section-1\">Caza la manzana<\/a><\/p>\n<ul>\n<li id=\"module-269\">\n<p>En este proyecto vas a llevar la programaci\u00f3n un poco m\u00e1s lejos y crear\u00e1s un peque\u00f1o videojuego donde nuestro aguerrido h\u00e9roe, el famoso cient\u00edfico Newton, intenta no perder la oportunidad de que la manzana le caiga en la cabeza.<br \/>\nVamos a crear,&hellip;  <a href=\"https:\/\/agora.xtec.cat\/ieshugroger\/impulsem-la-robotica\/caza-la-manzana\/\" title=\"Read Caza la manzana\">Llegeix m\u00e9s\u00bb<\/a><\/p>\n","protected":false},"author":3,"featured_media":9209,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[394],"tags":[395],"class_list":["post-9201","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-impulsem-la-robotica","tag-robotica"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/posts\/9201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/comments?post=9201"}],"version-history":[{"count":3,"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/posts\/9201\/revisions"}],"predecessor-version":[{"id":9220,"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/posts\/9201\/revisions\/9220"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/media\/9209"}],"wp:attachment":[{"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/media?parent=9201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/categories?post=9201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/tags?post=9201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}