Consejo rpido: seleccionar color cambiar la luminosidad/brillo del color.

Vas a probarlo en el
siguiente desafo!
Google ClassroomFacebookTwitterCorreo electrnico
Realiza una pregunta
En la gua paso a paso pasada, exploramos cmo usar el
selector de color para, fcilmente, encontrar un color. Como no
puedes ver el selector de color en accin en nuestras guas
paso a paso, aqu hay un GIF que muestra cmo se usa:

Preguntas

Sugerencias y agradecimientos
Los mejores Recientes

como se cuando es el color correcto

21 votos

1 comentario Marcael comentario de josue antony

hace un ao de Ver el perfil de:josue antony

solo tienes que seleccionarlo y ver si correcto :)

4 votos

1 comentario Marcael comentario de cesar

hace un ao de Ver el perfil de:cesar

Mostrar todas las 2 respuestas a la pregunta de josue

antony Responde esta pregunta
quien invento este programa
0 votos
Grabacin del selector de color siendo usado para cambiar el
color de fondo. 1 comentario Marcael comentario de carlosceballos28
hace un ao de Ver el perfil de:carlosceballos28
Haz clic en cualquier lugar en los nmeros para hacer que el
selector de color aparezca. Despus, haz clic en la barra de
colores del lado derecho para cambiar el color general que No es invento de una persona. hay varias personas que
ests seleccionando y haz clic en el lado izquierdo para crearon los cdigos, ha llevado mucho tiempo, es la evolucin
del trabajo colaborativo de mucha gente de las universidades
y colegios de EEUU. -Aqu en KhanAcademy tambin estn
haciendo que estas herramientas y lenguajes sea mas fciles
de aprender y de usar. no es un programa, sino codigos para
crear programas. y todo lo que ves aqu es "la magia del
cdigo" que fue programado para que aprendas a programar
mejor. (Son llamados "desarrollos" (leermsde este
comentario)
Repaso: variables
Google ClassroomFacebookTwitterCorreo electrnico
Aqu est lo que cubrimos en esta leccin sobre variables.
Una variable es una manera de almacenar valores. Para usar
una variable, debemos tanto declararla (para hacerle saber al
programa acerca de la variable) como luego asignarla (para
hacerle saber al programa qu valor estamos almacenando en
la variable).
Aqu est cmo declararamos una variable llamada "xPos":
varxPos;
Ahora, podemos asignarle a xPos que tenga el valor 10:
xPos=10;
Si queremos (y amenudo lo queremos!) podemos declarar y
asignar en una sola declaracin:
varxPos=10;
Si despus, por alguna razn, queremos cambiar el valor de
una variable, podemos reasignarla:
varxPos=10;
//algntiempomstarde...
xPos=20;
Pronto veremos por qu la reasignacin volver a asignar puede
ser til cuando queremos animar nuestro dibujos.
Cmo podemos escoger nombres para nuestras variables?
Para las variables en JavaScript, sigue estas reglas:
Los nombres de las variables pueden empezar con
letras, o los smbolos $ o _. Solo pueden contener letras,
nmeros, $ y _. No pueden empezar con un nmero.
"myVariable", "leaf_1" y "$money3" son todos ejemplos vlidos
de nombres de variables.
Los nombres de las variables distinguen entre
maysculas y minsculas, lo que significa que "xPos" es
diferente de "xpos", as que asegrate de ser consistente.
Los nombres de las variables no pueden ser los mismos
que los nombres de las variables existentes, y hay muchas en
nuestro entorno de programacin de ProcessingJS. Si alguna
vez te sale un error como "Read only!", trata de cambiar el
nombre de tu variable.
Los nombres de las variables deben ser claros y con
sentido; por ejemplo, en vez de "ts", usa "toothSize".
Los nombres de las variables deben usar el formato
mayscula y minscula (camelCase) para varias palabras,
como "toothSize" en vez de "toothsize" o "tooth_size".
Vamos a usar mucho las variables cuando aprendamos
animacin en la siguiente leccin, as que haz preguntas aqu
si no entiendes algo acerca de ellas.
Qu son las animaciones?
Google ClassroomFacebookTwitterCorreo electrnico
Felicidades por aprender cmo hacer dibujos con tus
habilidades de programacin! Ahora vas a aprender cmo
convertir esos dibujos en animaciones, con solo unas cuantas
lneas ms de cdigo.
Sin embargo, primero vamos a hablar acerca de qu es una
animacin. Cmo podras hacer una animacin sin
programar?
Podras hacer un montn de dibujos en pedazos de papel,
luego hojear esos pedazos de papel de modo que los dibujos
pasaran en una secuencia y se vera como una animacin.
Bueno, se vera como una animacin si esos dibujos fueran
cada uno un poco diferente de los otros. Por ejemplo, revisa
esta animacin hecha en lpiz y papel de un carro que va por
la calle:
Animacin hecha en lpiz y papel de un carro que va por la
calle
Sin embargo, probablemente tomara un rato hacer esa
animacin, y bueno, no es tan buena. Se mueve bastante y no
tiene nada de color.
Pero ahora vivimos en el futuro! Podemos hacer una mejor
animacin de manera programtica en pocos minutos con solo
una docena de lneas de cdigo, como esta:
Animacin programada de un carro rojo que va por la calle
Quieres aprender a programar eso? Sigue adelante!
Usar expresiones matemticas en JS
Google ClassroomFacebookTwitterCorreo electrnico
En el lenguaje JavaScript (y en la mayora de los lenguajes de
programacin), podemos usar operadores matemticos para
calcular nmeros y crear expresiones.
Ya viste algunos ejemplos de sumas en JS, al usar el
operador +. Tambin puedes usar para restas, * para
multiplicaciones, / para divisiones y % para sacar el residuo.
Aqu hay ejemplos de esos en accin:
varx=10;
vara=x+5;//suma5,elresultadoes15
varb=x5;//resta5,elresultadoes5
varc=x*2;//multiplicapor2,elresultadoes
20
vard=x/4;//divideentre4,elresultadoes2.5
vare=x%4;//divideentre4&regresael
residuo,elresultadoes2
Cuando usas varios operadores matemticos en una sola
expresin, la computadora sigue un "orden de operaciones"
para asegurarse de que calcule el resultado de la misma
manera cada vez. Es el mismo orden de operaciones que
probablemente aprendiste en tus clases de matemticas y
comnmente puede recordarse como "PEMDSR": parntesis,
exponentes, multiplicacin, divisin, suma y resta. Puedes
aprender ms acerca del orden de las operaciones en Khan
Academy.
Por ejemplo, en el siguiente cdigo, primero se evaluaran las
dos expresiones entre parntesis, luego multiplicara esos
resultados y, por ltimo, le sumara 100 a ese resultado.
varx=10;
vara=(x+10)*(x/2)+100;
Al igual que en las expresiones matemticas, solo necesitas
parntesis si quieres que tu expresin sea evaluada de manera
diferente a como se hara de acuerdo al orden de las
operaciones. De otra manera, puedes omitirlos.
A continuacin, haremos un ejemplo que usa expresiones ms
complicadas con variables y operadores matemticos. Si
quieres, primero juega con algunas de estas expresiones
matemticas, para asegurarte de que entiendas bien cmo las
evala la computadora.
Repaso: texto y cadenas
Google ClassroomFacebookTwitterCorreo electrnico
Aqu est un repaso de lo que cubrimos en esta leccin sobre
texto:
Antes de esta leccin, estbamos usando valores numricos
para la mayora de las cosas: pasarle nmeros a las funciones,
almacenar nmeros en variables, etc. Como ya viste, tambin
podemos usar valores de texto. En JavaScript, a estos valores
de texto los llamamos cadenas; piensa acerca de ellos como
una cadena de letras.
Para crear una cadena, rodeamos el texto entre comillas:
"HolaMundo!"
Despus tenemos que hacer algo con esa cadena, como
pasrsela al comando text()text()t, e, x, t, left parenthesis,
right parenthesis:
text("HolaMundo!",100,100); Este es un repaso de lo que cubrimos en esta leccin sobre
Tambin podramos almacenarla en una variable, y despus
pasarle esa variable al comando text()text()t, e, x, t, left
parenthesis, right parenthesis:
varmiSaludo="HolaMundo!"; reescribir todo el bloque de cdigo. Necesitamos una forma de
text(miSaludo,100,100);
Ten en cuenta que tambin podemos utilizar comillas sencillas:
varmiSaludo='HolaMundo!';
Pero no podemos mezclar comillas, eso es un error! Escoge
comillas sencillas o dobles, y qudate con esas.
varmiSaludo='HolaMundo!";//aycaray!
Del mismo modo en que podemos manipular nmeros,
tambin podemos manipular cadenas. Podemos, por ejemplo,
sumarle una cadena a otra:
varmiSaludo="Hola";
varmiNombre="Winston";
vardiHola=""+miSaludo+","+miNombre+"!";//
Hola,Winston!
Cuando combinamos cadenas en JS, lo
llamamos concatenar cadenas. Tambin podemos combinar
cadenas con valores numricos:
varxPos=10;
varyPos=20;
varetiqueta="Lascoordenadasson"+xPos+","+
yPos;
En este tutorial tambin vimos que podemos usar diferentes
comandos para cambiar el tamao y el color del texto cuando
desplegamos cadenas al usar el comando text()text()t, e, x, t,
left parenthesis, right parenthesis. Puedes leer ms acerca de
esos comandos en la seccin de texto de nuestra
documentacin (haz clic en la pestaa de
"documentacin"para acceder a ella).
Repaso: funciones
Google ClassroomFacebookTwitterCorreo electrnico
funciones.
A menudo queremos poder volver a ejecutar bloques de
cdigo cuando estamos escribiendo programas, sin tener que
agrupar el cdigo y darle un nombre, de manera que podamos
llamarlo con ese nombre posteriormente, y a eso es a lo que
llamamos una funcin.
Para crear una funcin, primero debemos declararla y darle un
nombre, de la misma forma en la que crearamos cualquier
variable, seguida de una definicin de funcin:
varsayHello=function(){
};
Podramos poner cualquier cdigo dentro de la funcin: una
proposicin, mltiples proposiciones. Depende de lo que
queramos hacer. En esta funcin, podramos simplemente
escribir en la pantalla un mensaje en una ubicacin aleatoria:
varsayHello=function(){
text("Hooooooola!",random(200),random(200));
};
Ahora, si lo nico que hacemos es declarar la funcin, no
pasar nada. Para que el programa ejecute el cdigo que est
dentro de la funcin, tenemos que "llamar" la funcin, al
escribir su nombre seguido de parntesis vacos:
sayHello();
Y despus podemos llamarla cuando queramos, las veces que
queramos!
sayHello();
sayHello();
sayHello();
Muchas veces queremos personalizar las funciones para
decirle al programa: "Bueno, ejecuta todo este cdigo pero
cambia algunos detalles de cmo lo haces". De esa forma
tenemos cdigo que es reutilizable y flexible, lo mejor de
ambos mundos. Podemos lograr esto al especificar
"argumentos" para una funcin, luego usar estos argumentos
para cambiar el funcionamiento de la funcin y pasarlos
cuando llamemos la funcin.
Por ejemplo, qu pasa si quisiramos decir exactamente
dnde queremos que aparezca el mensaje, de la misma forma
en que podemos decir exactamente donde dibujar rect()s y
ellipse()s? Podramos imaginar llamarla as, para poner el
mensaje en dos coordenadas precisas:
sayHello(50,100);
sayHello(150,200);
Para que esto funcione, tenemos que cambiar nuestra
definicin de la funcin sayHello para que sepa que recibir 2
argumentos, y luego los use:
varsayHello=function(xPos,yPos){
text("Hooooooola!",xPos,yPos);
};
Los argumentos que le pasamos bsicamente se convierten en
variables dentro de tu definicin de funcin, y los nombres
dependen de como los llames en los parntesis. Fcilmente
podramos ponerles un nombre ms corto:
varsayHello=function(x,y){
text("Hooooooola!",x,y);
};
Nuestras funciones pueden aceptar cualquier nmero de
argumentos: cero, uno, dos o ms. Tambin podramos haber
decidido que queramos cambiar nuestra funcin para aceptar
el nombre de una persona a la cual queremos saludar:
varsayHello=function(name){
text("Hooooooola,"+name,random(200),
random(200));
};
Y entonces la habramos llamado as:
sayHello("Winston");
sayHello("Pamela");
Podramos combinar ambas ideas y hacer que acepte tres
argumentos, para el nombre y la posicin:
varsayHello=function(name,x,y){
text("Hooooooola"+name,x,y);
};
Y luego llamarla as:
sayHello("Winston",10,100);
Realmente depende de lo que quieras que hagan tus funciones
y qu tanto deseas personalizar lo que pueden hacer. Siempre
puedes empezar sin argumentos, y luego agregar ms
conforme te des cuenta que los necesitas.
De hecho, has estado llamando funciones todo este tiempo
(as es como has estado dibujando y haciendo animaciones)
como con rect, ellipse, triangle, etc. Todas esas funciones
estn en la biblioteca ProcessingJS y las cargamos en cada
programa que haces aqu, de modo que siempre puedas
usarlas. Hemos definido esas funciones para ti, porque cremos
que seran tiles. Ahora depende de ti decidir qu funciones
personalizadas quieres usar en tus propios programas. Por
ejemplo, proporcionamos la funcin ellipse, pero no una
funcin gato. Si tu programa involucra muchos gatos distintos
en diferentes ubicaciones, tal vez deberas crear tu propia
funcin gato!
Hay otra cosa poderosa que podemos hacer con funciones:
podemos usarlas para que acepten valores, calculen algo y
regresen un nuevo valor. Piensa en todas las cosas que puedes
hacer con una calculadora: sumar, restar, sacar raz cuadrada,
multiplicar, etc. Todas esas se haran con funciones que
tomaran un valor de entrada y regresaran el resultado. Las
funciones tomaran el valor de entrada como argumento y
regresaran el resultado al usar una declaracin return. Aqu
hay una funcin que suma dos nmeros y regresa el resultado:
varaddNumbers=function(num1,num2){
varresult=num1+num2; varlocalResult=num1+num2;
returnresult;
};
varsum=addNumbers(5,2);
text(sum,200,200);//Displays"7"
La declaracin return hace dos cosas: le regresa un valor a
quien la haya llamado (razn por la cual podemos guardarla
en la variable sum) e inmediatamente sale de la funcin. Eso
significa que sera tonto tener algo as, porque la ltima lnea
nunca se ejecutara:
varaddNumbers=function(num1,num2){
varresult=num1+num2; decimos que es una variable global. Esto es porque todas las
returnresult;
result=result*2;//Tonto! ella.
};
Las funciones que regresan valores son muy tiles para
manipular datos en los programas, y tambin se pueden
combinar en expresiones:
<pre>var biggerSum = addNumbers(2, 5) + addNumbers(3,
2);</pre>
Incluso puedes llamar funciones dentro de la llamadas de una
funcin, aunque a veces eso puede ser difcil de leer:
varhugeSum=addNumbers(addNumbers(5,2),
addNumbers(3,7));
Ahora que sabes cmo crear funciones que encierran bloques
de cdigo, tenemos que hablar de un concepto
importante: variables locales frente a variables globales.
Cuando declaramos una nueva variable dentro de una funcin,
decimos que es local para esa funcin. Eso es porque solo esa
funcin puede ver esa variable. El resto del programa fuera de
la funcin no puede. Una vez que estamos fuera de esa
funcin, es como si ya no existiera. En la siguiente
funcin, localResult es una variable local:
varaddNumbers=function(num1,num2){
println("Thelocalresultis:"+localResult);
returnlocalResult;
};
addNumbers(5,7);
println(localResult);//ohnoes!
Cuando ejecutemos ese cdigo, obtendremos un error en la
ltima lnea: "localResult is not defined". La variable solo est
definida dentro de la funcin, porque es donde la declaramos
con la lnea varlocalResult= y no est definida fuera de
ella.
Cuando declaramos una variable fuera de nuestras funciones,
funciones pueden acceder a ella y hacer lo que quieran con
varglobalResult;
varaddNumbers=function(num1,num2){
globalResult=num1+num2;
println("Theglobalresultis:"+globalResult);
};
addNumbers(5,7);
println(globalResult);
Cuando ejecutemos el cdigo de arriba, no obtendremos
ningn error, porque declaramos globalResult fuera de la
funcin, as que podemos acceder a ella cuando queramos.
Cada lenguaje de programacin es diferente, pero para
JavaScript, es importante saber que las variables tienen un
"mbito de la funcin": una funcin puede ver las variables
locales que fueron declaradas dentro de ella y las variables
globales que fueron declaradas fuera de ella, pero no puede
ver las variables locales dentro de otras funciones.
Repaso: declaraciones lgicas y condicionales (if)
Google ClassroomFacebookTwitterCorreo electrnico
Este es un repaso de lo que cubrimos en esta leccin sobre
lgica y declaraciones if.
A menudo queremos ser capaces de hacer cosas
"condicionalmente" en nuestros programas: queremos ser
capaces de decir "si esta cosa es verdad, entonces haz X, pero
si esta otra cosa es verdad, entonces haz Y". Es como cuando
despertamos por la maana: "si afuera est lloviendo,
entonces llevo un paraguas, pero si est soleado, me pongo
lentes de sol". Podemos hacer cosas condicionalmente en
nuestros programas al usar declaraciones
if y declaraciones if/else combinadas con expresiones
condicionales.
Una decaracin if le dice al programa que ejecute un bloque
de cdigo, siempre y cuando una condicin sea verdadera. En
el siguiente cdigo, escribimos un mensaje solo si x es mayor
que 0:
Al x>0 es lo que llamamos una expresin condicional, que
quiere decir que es una expresin que se evala
a true (verdadero) o a false (falso). Cuando un valor
es true (verdadero) o false (falso), lo llamamos
valor booleano (a diferencia de un nmero o de una cadena).
Por ejemplo, podramos simplemente desplegar la expresin
condicional:
text(x>0,200,200);//Despliega"true"
Tambin podramos almacenarla en una variable y luego
desplegarla:
varisPositive=x>0;
text(isPositive,200,200);
Entonces diramos que isPositive almacena un valor
booleano, porque es true (verdadero) o false (falso),
dependiendo del valor que le demos a x.
Tenemos muchas maneras de crear expresiones condicionales
que se evalan como true (verdadero) o false (falso), porque
tenemos muchos operadores de comparacin. Aqu estn los
ms populares:
Supn que tenemos la siguiente variable, aqu estn los
operadores de comparacin y expresiones ms comunes que
seran verdaderas con ellos:
varmyAge=28;
Operad Expresiones
or Significado verdaderas
Igualdad
=== estricta myAge===28

varx=5;
Desigualdad
!== estricta myAge!==29
if(x>0){
text('xisapositivenumber!',200,200);
28!==29 | | > | Mayor que | myAge>25
}
28>25 | | >= | Mayor o igual que | myAge>=28
Como x es 5, que es mayor que 0, veramos el mensaje en la
28>=28 | | < | Menor que | myAge<30
pantalla. Si cambiramos x a -1, no veramos el mensaje, ya
que x no sera mayor que 0.
28<30 | | <= | Menor o igual que | myAge<=28 };
28<=28 | Si solo nos preocupa que al menos una condicin sea
verdadera, entonces podemos usar el operador || ("o"):
Es un error muy comn confundir el operador de asignacin (=)
con el operador de igualdad (===), porque los dos usan signos vardegreesOutside=70;
de igual, pero son muy diferentes. El operador de asignacin varnumberOfClouds=50;
en realidad va a cambiar el valor de la variable, mientras que if(degreesOutside<70||numberOfClouds<5){
el operador de igualdad solo leer el valor de la variable y ver text("Pontebloqueadorsolar,aunquenohaga
si es igual a algo. Por ejemplo: calor!",200,200);
}
varx=2+2;//Setsitequalto4 Podemos usar && y || en la misma expresin, si tenemos que
verificar una condicin muy complicada. Solo usa parntesis
if(x===4){//Asksthequestion,"doesthisequal para agrupar expresiones, de manera que el programa no se
4?" confunda acerca del orden para evaluarlas:
text("yep,2+2=4!",200,200);
} varmyAge=28;
A veces queremos combinar varias comparaciones en una if((myAge>=0&&myAge<3)||myAge>90){
misma expresin condicional, y por eso tenemos operadores println('Annoestsentumejormomento.');
lgicos. Estos operadores nos permiten decir cosas como "si X }
y Y son verdaderos" o "si X o Y son verdaderos" en nuestros Ahora regresemos a las declaraciones if. Muchas veces
programas. queremos ejecutar un bloque de cdigo en el caso en el que la
condicin if no sea cierta. En ese caso, agregamos
Si queremos exigir que dos condiciones sean verdaderas, una declaracin else.
podemos usar el operador && ("y"):
varage=28;
vardegreesOutside=70; if(age>16){
varnumberOfClouds=50; println('Yupi,puedesmanejar!');
if(degreesOutside>70&&numberOfClouds<5){ }else{
text("Pontebloqueadorsolar!",200,200); println('Losiento,perodebestener'+(16age)
} +'aosparapodermanejar.');
A menudo usamos eso en nuestros programas para verificar si }
la posicin del ratn de un usuario est dentro de un A veces queremos revisar varias condiciones y hacer
rectngulo (para imitar un botn), en cuyo caso necesitamos diferentes cosas dependiendo de cada una, en cuyo caso
varios operadores &&: podemos usar elseif:
rect(100,50,100,100); varage=20;
if(age>=35){
mousePressed=function(){ println('PuedesvotarYocuparcualquierpuestoen
if(mouseX>100&&mouseX<200&&mouseY>50 elgobierno!');
&&mouseY<150){ }elseif(age>=30){
text("Youpressedit!",80,75); println('PuedesvotarYpostulartepara
} senador!');
}elseif(age>=18){ qu est mal. Tambin puedes pedirle a un amigo o a un
println('Puedesvotar!');
}else{
println('Notienesvozenelgobierno!'); pensar en una solucin para ti, pero independientemente de
} eso, te estn haciendo un favor por solo escuchar la
Puedes seguir revisando condiciones tanto como quieras. Solo
asegrate de que cada una de tus condiciones sea realmente
alcanzable. Prueba tu cdigo al cambiar las variables hasta
llegar hasta adentro de cada uno de los bloques de cdigo, de
modo que sepas que todo funciona.
Como ojal podrs ver, los condicionales son una parte
importante de programar y nos permiten crear programas
mucho ms poderosos y flexibles.
Ms consejos para depurar
Google ClassroomFacebookTwitterCorreo electrnico
Hay muchas maneras de depurar tus programas! Aqu hay
una lista para que puedas empezar:
Depuracin con impresin
Como acabamos de mostrar, puedes insertar $
\text{print()}$s o $\text{println()}$s en tu
cdigo para ayudarte a averiguar cul cdigo se est llamando
y con qu valores. Ambas de estas funciones escriben valores
en una consola que aparece sobre el lienzo. Tambin puedes
usar $\text{debug()}$ para enviar la salida a la consola de
JavaScript de tu navegador, si sabes cmo usar eso.
Captura de pantalla usando la consola de impresin en un
programa
Depuracin de pato de goma
Pon un pato de goma junto a tu computadora, o cualquier otro
objeto que parezca un pato de goma que tengas a la mano, y
explcale tu programa y tu problema, lnea por lnea. A muchos
programadores les funciona el simple hecho de expresar su
problema en palabras para que su cerebro se d cuenta de
maestro que sea tu pato de goma, que se sienten y te
escuchen mientras les explicas. Algunas veces incluso pueden
explicacin.
Esto es lo ms cercano que tenemos a un pato de goma en la
oficina de Khan Academy:
Foto de un Muchacho Ay Caray de peluche junto a una
computadora porttil
Exagera tu salida
Como ests haciendo programas en ProcessingJS, ests
tratando con muchos colores de relleno y trazado. Cuando no
veo la slida visual que espero, algunas veces es til usar
valores muy grandes o extremos para el relleno y el trazado,
como $\text{strokeWeight(30)}$. Como nuestro
ambiente es en tiempo real e incluye los arrastra-nmeros, es
muy fcil cambiar los nmeros en tu programas para ver qu
efecto tiene el cambio en la salida. Por ejemplo, puede
ayudarte a averiguar a dnde se fue una figura que falta.
Captura de pantalla de un programa con strokeWeight()
exagerado
Es una buena idea sentirse cmodo con todas las opciones
para depurar programas de modo que puedas usar la que
funcione mejor en una situacin particular.
Repaso: hacer bucles
Google ClassroomFacebookTwitterCorreo electrnico
Este es un repaso de lo que cubrimos en esta leccin sobre
bucles.
Cuando estamos escribiendo programas, a menudo nos damos
cuenta que queremos repetir una parte del cdigo muchas
veces, o repetirlo pero cambindole algo cada vez. Para
ahorrarnos escribir todo ese cdigo, podemos usar un bucle.
JavaScript tiene dos tipos de bucles, un bucle cuadrculas. Cuando anidamos un bucle dentro de otro, le
while (mientras) y un bucle for (para). estamos diciendo al programa "haz esta cosa X veces, y por
cada vez que lo hagas, haz esta otra cosa Y veces". Piensa
Un bucle while es una forma de repetir el cdigo hasta que acerca de dibujar una cuadrcula. Quisiramos decirle al
una condicin sea falsa. Por ejemplo, este bucle while va a programa "crea una columna 10 veces, y por cada columna,
desplegar el valor de y en (30, y) mientras y sea menor que tambin crea 15 celdas dentro de ella". Aqu esta cmo
400. El bucle le suma 20 a y cada vez que se ejecuta, de puedes usar bucles anidados para logar eso:
manera que y empieza en 40 pero incrementa a 60, 80, 100,
120, etc. for(varcol=0;col<10;col++){
for(varrow=0;row<15;row++){
vary=40; rect(col*20,row*20,20,20);
while(y<400){ }
text(y,30,y); }
y+=20; Cuando debes usar un bucle for en lugar de un bucle while?
} Eso depende de ti. Muchos programadores prefieren los bucles
Es importante que la condicin dentro del parntesis se vuelva for porque es ms difcil crear un bucle infinito por accidente
falsa en algn momento. De lo contrario tendremos lo que se (porque es ms difcil olvidar incrementar tu variable de
conoce como un bucle infinito! Eso es lo que pasara si contador), pero a veces un bucle while puede tener ms
quitramos el y+=20, porque y sera 40 por siempre, sentido. Prueba ambos!
siempre sera menor a 400, y el programa no sabra cuando
parar. Repaso: arreglos
vary=40;
Google ClassroomFacebookTwitterCorreo electrnico
while(y<400){
text(y,30,y);
} Este es un repaso de lo que cubrimos en esta leccin sobre
El bucle for es parecido a un bucle while, pero con una arreglos.
sintaxis ms especializada. Los programadores inventaron el
bucle for cuando se dieron cuenta que siempre estaban Muchas veces queremos almacenar listas de valores cuando
haciendo las mismas tres cosas: crear variables para contar estamos creando programas y, en JavaScript, podemos hacer
los bucles (como la y arriba), incrementarlas por una cantidad eso al usar un tipo de valor llamado un arreglo.
y verificar que fueran menores que cierto valor. La sintaxis de Para crear un arreglo, declaramos una variable como siempre
un bucle for tiene un lugar especial para cada una de esas tres lo hacemos, pero luego rodeamos nuestra lista de valores con
cosas. Aqu est el mismo bucle que el primer bucle while corchetes y separamos cada valor con una coma:
de arriba, como un bucle for:
varxPositions=[33,72,64];
for(vary=40;y<400;y+=20){ Podemos guardar cualquier tipo de valor de JavaScript en un
text(y,30,y); arreglo, no solo nmeros. Aqu hay un ejemplo donde
} almacenamos una lista de cadenas de caracteres:
Los bucles tambin se pueden anidar. De hecho es muy
comn anidar bucles for, especialmente en dibujos varmyFriends=['Winston','OhNoesGuy','John',
bidimensionales, porque facilita dibujar figuras en forma de 'Sophia'];
Muchas veces queremos desplegar la longitud de un arreglo, o
hacer algo con base en la longitud del arreglo.
Afortunadamente, cada arreglo tiene una
propiedad length que nos dir la longitud actual del arreglo:
text(myFriends.length,200,200);//Despliega"4"
Cuando queremos acceder a un valor particular en un arreglo,
accedemos a l al hacer referencia a su "ndice" en el arreglo,
el cual representa su posicin. El primer ndice en un arreglo
es "0", as que si queremos acceder al primer elemento en un
arreglo, especificamos el nombre de la variable del arreglo,
luego corchetes y 0:
text(myFriends[0],200,0);//Despliega"Winston"
El segundo elemento est en el ndice "1", el tercero en el
ndice "2" y el cuarto en el ndice "3":
text(myFriends[1],200,100);//Despliega
"OhNoesGuy"
text(myFriends[2],200,200);//Despliega"John"
text(myFriends[3],200,300);//Despliega"Sophia"
La indexacin basada en cero es uno de los aspectos ms
confusos de los arreglos para los programadores nuevos, as
que ten eso en cuenta si apenas ests empezando con
arreglos. Eventualmente te vas a acostumbrar !
A menudo queremos hacer alguna accin para cada elemento
en un arreglo, como cuando arriba usamos el comando text()
para desplegar los nombres. En lugar de escribir el cdigo una
y otra vez, es mejor usar un bucle for para iterar a travs de
cada uno de los elementos en el arreglo, y hacerle algo a cada
elemento dentro del bucle. Tenemos que empezar desde el
ndice 0, ir hasta llegar al final del arreglo, y agregarle 1 al
ndice cada vez. Aqu est cmo haramos eso:
for(vari=0;i<myFriends.length;i++){
text(myFriends[i],200,i*100);
}
Observa cmo ponemos i dentro de los corchetes, porque
representa el ndice actual cada vez que se ejecuta el bucle.
Los arreglos pueden ser cambiados de muchas maneras. Para
empezar, podemos cambiarles un valor:
myFriends[1]="TheErrorBuddy";
Tambin podemos agregarles valores completamente nuevos,
al usar el mtodo [push()]
(http://www.w3schools.com/jsref/jsref_push.asp),
pasndole el nuevo valor:
myFriends.push("Hopper");
Despus de ejecutar esa lnea de cdigo, la propiedad length
de nuestro arreglo cambiar para reflejar la nueva longitud, y
el ndice final del arreglo ser 4 en lugar de 3.
Si quieres una lista completa de lo que puedes hacer con los
arreglos en JavaScript, revisa esta referencia. Pero no te
preocupes, todo en este repaso te llevar muy lejos!
Repaso: objetos
Google ClassroomFacebookTwitterCorreo electrnico
Este es un repaso de lo que cubrimos en esta leccin sobre
objetos.
Tenemos muchos tipos de valores que podemos almacenar en
variables de JavaScript, y a veces queremos guardar muchos
valores relacionados juntos: aqu es donde entran
los objetos!
Un objeto es un tipo de datos que nos permite almacenar una
coleccin de propiedades en una sola variable. Para crear un
objeto, declaramos una variable como lo haramos
normalmente, y luego utilizamos llaves para rodear las parejas
de propiedades clave-valor:
varobjectName={
propertyName:propertyValue,
propertyName:propertyValue,
...
};
Aqu hay un objeto que describe a Winston. Este objeto tiene
dos propiedades, hometown (ciudad de nacimiento)
y hair (cabello), y cada una de las propiedades son cadenas
de caracteres:
varaboutWinston={
hometown:"MountainView,CA",
hair:"no"
};
Aqu hay un objeto ms complejo que describe un gato, con
cuatro propiedades: age (edad), furColor (color de
pelo), likes (cosas que le gustan) y birthday (cumpleaos).
varlizzieTheCat={
age:18,
furColor:"grey",
likes:["catnip","milk"],
birthday:{"month":7,"day":17,year:1994}
};
Observa como cada propiedad guarda un tipo de dato
distinto: age guarda un nmero, furColor guarda una cadena
de caracteres, likes guarda un arreglo y birthday guarda
otro objeto. Eso es la cosa genial de los objetos (bueno, una de
las cosas geniales). Pueden guardar otros objetos dentro de
ellos! As que puedes tener objetos muy anidados para
describir datos complejos.
Tambin puedes ver objetos que en sus declaraciones usan
comillas alrededor de los nombres de propiedades, como:
varaboutWinston={
"hometown":"MountainView,CA",
"hair":"no"
};
Eso es equivalente a lo que vimos anteriormente sin comillas,
pero nos tardamos ms en escribirlo. La nica vez que es
absolutamente necesario usar comillas es si el nombre de tu
propiedad tiene un espacio, por ejemplo:
varaboutWinston={
"hishair":"none"
};
Aqu tenemos que usar comillas, porque de lo contrario el
intrprete de JavaScript se confundir. Este es mi consejo:
simplemente no uses espacios en los nombres de las
propiedades! As nunca tendrs que poner los nombres de las
propiedades entre comillas.
Acceder a las propiedades de los objetos
Un objeto no es til a menos que podamos ver dentro de l y
obtener los valores de las diferentes propiedades. Podemos
hacer eso de dos maneras. Primero, mediante lo que llamamos
"notacin de punto", en donde escribimos el nombre de la
variable, seguido por un "." y luego el nombre de la propiedad:
varaboutWinston={
hometown:"MountainView,CA",
hair:"no"
};
text("Winstonisfrom"+aboutWinston.hometown,100,
100);
text("Winstonhas"+aboutWinston.hair+"hair",
100,150);
Tambin podemos usar "notacin de corchetes", que es
parecida a cmo accedemos a los elementos de un arreglo, en
donde escribimos el nombre de la variable, luego corchetes
con el nombre de la propiedad entre comillas:
varhisHometown=aboutWinston["hometown"];
varhisHair=aboutWinston["hair"];
Si intentamos acceder a una propiedad que no existe,
veramos "undefined" (indefinido):
text("ElobjetivoenlavidadeWinstones"+
aboutWinston.lifeGoal,100,150);
Modificar las propiedades de un objeto
Al igual que cuando almacenamos otros tipos de datos en las
variables, podemos cambiar los valores de las propiedades del
objeto en cualquier momento durante un programa, al usar la
notacin de punto o de corchetes:
aboutWinston.hair="curly";//(rizadoeningls)
Winstonconsigueunapeluca!
Tambin podemos agregar propiedades completamente {x:200,y:100},
nuevas! {x:200,y:200},
{x:200,y:300}
aboutWinston.lifeGoal="teachJavaScript"; ];
Si ya no ocupamos una propiedad, podemos borrarla (pero
probablemente la mayor parte del tiempo solo le cambiaremos for(vari=0;i<positions.length;i++){
el valor): varposition=positions[i];
deleteaboutWinston.hair; ellipse(position.x,position.y,100,100);
}
Genial, no? Los objetos pueden ser confusos al principio, pero
sigue usndolos, y eventualmente te volvers adictos a ellos,
Arreglos de objetos y querrs convertir todo en un objeto!

Ahora que conoces tanto los arreglos como los objetos, puedes Repaso: diseo orientado a objetos
combinarlos para crear arreglos de objetos, que de hecho son
formas muy tiles de almacenar datos en programas. Por Google ClassroomFacebookTwitterCorreo electrnico
ejemplo, un arreglo de gatos:

varmyCats=[ Este es un repaso de lo que cubrimos en esta leccin sobre

{name:"Lizzie", diseo orientado a objetos.
age:18}, Cuando creamos programas, a menudo encontramos que
{name:"Daemon", queremos crear muchos objetos diferentes que comparten
age:1} propiedades parecidas, como muchos gatos, que tienen el pelo
]; de color y tamao ligeramente diferente, o muchos botones,
con etiquetas y posiciones diferentes. Queremos ser capaces
for(vari=0;i<myCats.length;i++){ de decir "as es como se ve un gato en general" y luego decir
varmyCat=myCats[i]; "hagamos a este gato en especfco, y luego a este otro gato, y
println(myCat.name+'is'+myCat.age+'years sern parecidos en algunos aspectos pero tambin diferentes
old.'); en otros". En ese caso, queremos usar diseo orientado a
} objetos para definir los tipos de objeto y crear nuevas
Observa que iteramos a travs de un arreglo de la misma instancias de esos objetos.
forma que iteramos a travs de un arreglo de nmeros o de
cadenas de caracteres, al usar un bucle for. Dentro de cada Para definir un tipo de objeto en JavaScript, primero tenemos
iteracin, accedemos al elemento actual del arreglo con que definir una funcin "constructora". Esta es la funcin que
notacin de corchetes y accedemos a las propiedades de ese usaremos cada vez que queramos crear una nueva instancia
elemento del arreglo (un objeto) con notacin de punto. de ese tipo de objeto. Aqu hay una funcin constructora para
un tipo de objeto Book (libro):
Aqu hay otro ejemplo prctico que podras ocupar en tus
programas, un arreglo de coordenadas de posicin: varBook=function(title,author,numPages){
this.title=title;
varpositions=[ this.author=author;
this.numPages=numPages; entonces no seremos capaces de accederlos despus! El
this.currentPage=0; objeto se olvidar de ellos.
};
La funcin toma argumentos para los aspectos que sern Cuando definimos los tipos de objeto, muchas veces queremos
diferentes en cada libro: el ttulo, autor y nmero de pginas. asociar tanto las propiedades como el comportamiento con
Despus establece las propiedades iniciales del objeto con ellos, como todos nuestros objetos de gato que deberan ser
base en esos argumentos, al usar la palabra clave this. capaces de maullar() y comer(). As que necesitamos poder
Cuando usamos this en un objeto, nos estamos refiriendo a la adjuntar funciones a nuestras definiciones de tipo de objeto, y
instancia actual de un objeto, refirindose a s mismo. podemos hacer eso definindolas en lo que se llama el object
Necesitamos almacenar las propiedades en this para prototype (prototipo del objeto):
asegurarnos de que las podamos recordar ms tarde. Book.prototype.readItAll=function(){
this.currentPage=this.numPages;
Para crear una instancia de un objeto Book, declaramos una
println("Leste"+this.numPages+"pginas!");
variable nueva para almacenarla, despus utilizamos la
palabra clave new (nuevo), seguida del nombre de la funcin };
constructora y pasamos los argumentos que espera el Es como si definiramos una funcin de manera normal,
constructor: excepto que la colgamos del prototipo de Book en lugar de
definirla globalmente. As es como JavaScript sabe que esta es
varbook=newBook("SueosdeRobot","Isaac una funcin que se puede llamar en cualquier objeto Book, y
Asimov",320); que esta funcin debe tener acceso a this del libro sobre el
Entonces podemos acceder a las propiedades que cual se llama.
almacenamos en el objeto utilizando la notacin de punto:
Entonces podemos llamar a la funcin (a la que llamamos
println("Meencantleer"+book.title);//Me un mtodo, ya que est adjunta a un objeto), as:
encantleerSueosdeRobot
println(book.author+"esmiautorfavorito");// varbook=newBook("Rebelinenlagranja","George
"IsaacAsimov"esmiautorfavorito Orwell",112);
Vamos a contrastar esto por un minuto, y mostrar qu hubiera book.readItAll();//Leste112pginas!
pasado si no hubiramos configurado correctamente nuestra Recuerda, el objetivo del diseo orientado a objetos es que nos
funcin constructora: facilita hacer mltiples objetos relacionados (instancias de
objetos). Veamos eso en cdigo:
varBook=function(title,author,numPages){
}; varpirate=newBook("PirateCinema","Cory
varbook=newBook("LittleBrother","Cory Doctorow",384);
Doctorow",380); vargiver=newBook("TheGiver","LoisLowry",179);
println("Ilovedreading"+book.title);//Iloved vartuck=newBook("TuckEverlasting","Natalie
readingundefined Babbit",144);
println(book.author+"ismyfavauthor");//
undefinedismyfavoriteauthor pirate.readItAll();//Youread384pages!
Si le pasamos los argumentos a la funcin constructora pero giver.readItAll();//Youread179pages!
no los almacenamos explcitamente en this, tuck.readItAll();//Youread144pages!
Ese cdigo nos da tres libros que son parecidos: todos tienen
los mismos tipos de propiedades y comportamiento, pero
tambin son diferentes. Genial!
Ahora, si piensas acerca del mundo, los perros y los gatos son
distintos tipos de objetos, as que probablemente crearas
diferentes tipos de objeto para ellos si estuvieras programando
un Gato y un Perro. Un gato podra maullar(), un perro
podra ladrar(). Pero tambin son parecidos: tanto el perro
como el gato podran comer(), ambos tendran una edad,
un nacimiento y una muerte. Ambos son mamferos y eso
significa que tienen mucho en comn, aunque tambin sean
diferentes.
En ese caso, queremos usar la idea de la herencia del
objeto. Un tipo de objeto podra heredar propiedades y
comportamiento de un tipo de objeto padre, pero tambin
tener sus propias cosas nicas. Todos los Gatos y Perros
podran heredar de Mamfero, as que no tendran que
inventarse el comer() desde cero. Cmo haramos eso en
JavaScript?
Volvamos al ejemplo de libro y digamos que ese Book es el
tipo de objeto "padre", y queremos hacer dos tipos de objetos
que hereden de l: Paperback e EBook.
Un paperback es como un libro, pero tiene una cosa principal
diferente, al menos para nuestro programa: tiene una imagen
de portada. Entonces, nuestro constructor necesita tomar
cuatro argumentos, para recibir esa informacin adicional:
varPaperBack=function(title,author,numPages, this.numPages=0;
cover){
//...
} quemarlo!
Ahora, no queremos tener que hacer todo el trabajo que ya
hicimos en el constructor de Book para recordar esos primeros
tres argumentos: queremos aprovechar el hecho de que el
cdigo para eso sera el mismo. As que en realidad podemos
llamar al constructor de Book desde el constructor
de PaperBack y pasarle esos argumentos:
varPaperBack=function(title,author,numPages,
cover){
Book.call(this,title,author,numPages);
//...
};
Todava tenemos que almacenar la propiedad cover en el
objeto, as que necesitamos una lnea ms que se encargue de
eso:
varPaperBack=function(title,author,numPages,
cover){
Book.call(this,title,author,numPages);
this.cover=cover;
};
Ahora, tenemos un constructor para nuestro PaperBack, que le
ayuda a compartir las mismas propiedades que los Books, pero
tambin queremos que nuestro PaperBack herede sus
mtodos. Aqu est como hacer eso, dicindole al programa
que el prototipo de PaperBack debe estar basado en el
prototipo de Book:
PaperBack.prototype=Object.create(Book.prototype);
Tambin podramos querer adjuntarle un comportamiento
especfico al paperback, como poder quemarlo, y podemos
hacer eso al definir funciones en el prototipo, despus de la
lnea de arriba:
PaperBack.prototype.burn=function(){
println("Ohno,quemastetodaslas"+
this.numPages+"pginas");
};
Y ahora podemos crear un nuevo paperback, leerlo todo y
varcalvin=newPaperBack("TheEssentialCalvin&
Hobbes","BillWatterson",256,"http://ecx.images
amazon.com/images/I/61M41hxr0zL.jpg");
calvin.readItAll();//Youread256pages!
calvin.burn();//Omg,youburntall256pages!
(Bueno, en realidad no vamos a quemarlo, porque es un libro
asombroso, pero tal vez si estuviramos varados en un
desierto glacial y desesperados en busca de calor y a punto de
morir).
Y ahora puedes ver cmo podemos utilizar los principios de
diseo orientado a objetos en JavaScript para crear datos ms
complejos para tus programas y modelar mejor los mundos de
tus programas.
Planear un proyecto de programacin
Google ClassroomFacebookTwitterCorreo electrnico
Convertirse en un programador no solo es aprenderse la
sintaxis y los conceptos de un lenguaje de programacin: se
trata de averiguar cmo usar ese conocimiento para hacer
programas. Hiciste un montn de programas en este curso, en
los desafos y proyectos, pero ahora debes tener ideas para
nuevos programas (ideas que te emocionen mucho) y
tratar de convertir esas ideas en programas reales.
Probablemente no sepas todo lo que necesites para tu
programa cuando lo empieces, y eso est totalmente bien. Te
motivars para aprender esas cosas nuevas porque realmente
quieres hacer que tu programa sea real. Los programadores
estn constantemente aprendiendo nuevas cosas para nuevos
proyectos, y eso es parte por lo cual nos encanta.
Vayamos a travs del proceso de planear un proyecto de
programacin:
1. Qu quieres hacer?
Cuando empec a programar, me encontr constantemente
pensando en nuevos programas por hacer y escribindolos en
una lista. Era adicto al poder de la creacin, y haba tanto que
mi cerebro quera hacer. Si tu eres as, entonces
probablemente ya tienes una idea de lo que quieres hacer, y
tal vez ya tienes tu propia lista.
Si todava no tienes una idea, entonces aqu hay algunas
preguntas para ayudarte en una lluvia de ideas:
Cul es tu juego favorito, electrnico, de mesa, de
deportes? Podras hacer una versin simplificada, digital de
eso? Podras cambiarlo un poco, como darle otro tema o
personajes principales?
Cules son tus campos acadmicos favoritos? Si te
encanta el arte, podras hacer un programa para hacer arte?
Si te encanta la historia, que tal una lnea de tiempo
interactiva? Si te encanta la ciencia, qu tal una simulacin
cientfica?
Cul es tu pelcula o programa favorito de televisin?
Podras hacer una versin digital de una escena o un personaje
de ah? Tal vez hacer un juego basado en eso?
Cul es un dispositivo de la vida real que te encanta?
Podras hacer una simulacin de eso?
Una vez que hayas escogido una idea, deberas escribir una
descripcin de ella. Por ejemplo, si decidiera hacer un clon de
"Breakout", porque ese es mi juego electrnico retro favorito,
podra escribir:
Breakout: un juego en donde controlas una paleta en la parte
inferior de la pantalla y la usas para golpear una pelota hacia
arriba y en ngulos para romper bloques. El objetivo es romper
todos los bloques y no dejar que la bola caiga al suelo
demasiadas veces.
Vas a detallar esa descripcin despus, pero por ahora eso te
da una idea suficientemente buena para continuar en el
proceso de planeacin.
2. Qu tecnologa usars?
En este paso, necesitas considerar con qu tecnologas
(lenguajes/bibliotecas/ambientes) ests familiarizado o cules
puedes aprender fcilmente, y cules de ellas son las ms
adecuadas para el trabajo. Para muchos de ustedes, esa lista
puede ser de un solo elemento, "1. JS+ProcessingJS", y eso
hace que tu decisin sea fcil.
Nuestro ambiente JS+ProcessingJS funciona muy bien para necesito en mi programa para cambiar entre estados del
hacer animaciones, juegos, visualizaciones y simulaciones. programa.
Solo revisa los programas de la comunidad para ver el amplio
rango de programas que la gente hace aqu. Maquetas esbozadas de un clon de Breakout

Nuestro ambiente no funciona para otras cosas como juegos Ahora puedes usar esas maquetas para ayudarte a hacer una
multi-jugador, aplicaciones mviles o aplicaciones de lista de caractersticas, en donde pienses acerca de cada una
procesamiento de datos. Si sabes otros lenguajes/ambientes de las caractersticas de tu programa, y convertirla en una
(como JS+HTML, Python, SCRATCH, Swift, etc.) y ests lista.
pensando en construir algo que no tiene mucho sentido hacer
Para mi clon de Breakout, esta podra ser mi lista de
con ProcessingJS, entonces considera cul de esas tecnologas
caractersticas, separadas por escena:
sera mas adecuada para tu programa. Si quieres construir
esas cosas pero no sabes otras tecnologas, tal vez quieras Escena del juego
replantearte una nueva idea para tu programa.
Tu puedes aprender una nueva tecnologa para un nuevo Paleta controlada por el usuario
proyecto, pero en especial si ests empezando a programar, Bloques de varios colores
es una buena idea primero volverte muy bueno en tu Movimiento angulado de la pelota
primer lenguaje. Deteccin de choques
Desplegar vida
Si yo decidiera hacer un juego como Breakout, escogera Desplegar puntuacin
JS+ProcessingJS, dado que ya s esa tecnologa y tambin Efectos de sonido
funciona muy bien para juegos en 2D como ese. Escena principal

Botn de jugar
Botn de ayuda
3. Qu caractersticas incluir? Escena de ayuda
Aqu es donde realmente nos metemos a planear de verdad, y Texto
en donde (creo) se pone divertido. Tu objetivo en este paso es Botn para regresar
averiguar qu es lo que ests haciendo en realidad: cmo se Escena de ganar
ver, qu caractersticas incluir, qu
caractersticas no incluir. Encabezado
Animacin de fuegos artificiales
Lo primero que puedes hacer son "maquetas": bocetos que se Escena de perder
parezcan a lo que ests haciendo, pero sin los detalles como
colores o tamaos exactos. Puedes hacer maquetas en papel o Texto
con con programas en lnea: Botn para reiniciar
4. Pero qu caractersticas debe incluir?
Para darte una idea de cmo se ven las maquetas, a
continuacin incluyo maquetas de mi clon de Breakout. Hice Si todos tuviramos un tiempo infinito para hacer todos los
bocetos para cada escena de manera separada y dibuj programas en nuestras cabezas, entonces incluiran todas las
flechas entre ellas para mostrar cmo una escena conduce a caractersticas en nuestra lista. Pero no lo tenemos, as que en
otra. Esas flechas me ayudarn a entender la lgica que este paso tienes que decidir cules caractersticas son las ms
 importantes, y cules caractersticas hars solo si tenemos (P3) Botn para regresar
tiempo. Esto tambin te ayudar a averiguar en qu orden (P2) Escena de ganar
implementar las caractersticas, de las ms a las menos
importantes. (P2) Encabezado
(P3) Animacin de fuegos artificiales
Para ayudarte a averiguar la importancia de cada (P2) Escena de perder
caracterstica, hazte estas preguntas:
(P2) Texto
Si compartiera esto con un amigo, cules (P3) Botn para reiniciar
caractersticas me gustara estar seguro que funcionaran? Como un consejo general para aquellos de ustedes haciendo
Cules caractersticas me emocionan ms construir? juegos, aqu estn las caractersticas que recomiendo no
Cules caractersticas son las ms nicas de mi priorizar: mens, niveles mltiples, grficos 3D. Enfcate en lo
programa? que es nico y divertido acerca de tu juego, despus agrega
De cules caractersticas aprender ms al esas cosas adicionales.
implementarlas?
Hay algunas caractersticas que parecen demasiado Tambin puedes convertir tu lista priorizada en versiones del
complicadas para mi nivel actual de habilidades? proyecto, de modo que puedas ver fcilmente lo que necesitas
Despus, revisa tu lista del paso anterior y ordena la lista o implementar en cada versin, y siempre puedes detenerte
agrgale un rango de importancia a cada caracterstica. despus de una versin particular y estar contento con lo que
has hecho.
Para mi lista de caractersticas del clon de Breakout, puse "P1",
"P2" y "P3" junto a las caractersticas, que significan prioridad Aqu est como se veran las versiones para mi clon de
alta (P1), prioridad media (P2) y prioridad baja (P3). Decid Breakout:
priorizar los mecanismos nicos del juego por encima de las
V1
caractersticas generales del juego como las escenas, porque
eso se me hace ms emocionante de este proyecto: Paleta controlada por el usuario
Bloques de varios colores
(P1) Escena del juego
Movimiento angulado de la pelota
(P1) Paleta controlada por el usuario Deteccin de choques
(P1) Bloques de varios colores V2
(P1) Movimiento angulado de la pelota
Desplegar vida
(P1) Deteccin de choques
Desplegar puntuacin
(P2) Desplegar vida
Escena de jugar con botn de jugar
(P2) Desplegar puntuacin
Escena de ganar con encabezado
(P3) Efectos de sonido
V3
(P2) Escena principal
Efectos de sonido
(P2) Botn de jugar
Botn de ayuda
(P3) Botn de ayuda
Fuegos artificiales
(P3) Escena de ayuda
Escena de perder con botn para reiniciar
(P3) Texto
 5. Cmo lo vas a implementar? Una vez que ya hayas pensado acerca de la arquitectura de
alto nivel, debe ser ms claro qu puedes empezar a codificar
Ya tienes una idea de qu caractersticas vas a construir primero.
primero en tu programa. Pero si empiezas ahora, estars
viendo un programa completamente en blanco sin nada de Puedes decidir escribir todo tu programa en pseudocdigo
cdigo escrito, y eso puede ser intimidante. Cules variables primero, del cual hablamos ms adelante en esta leccin.
debes escribir primero? Cules funciones? Bsicamente, significara escribir todo el programa en espaol
dentro de un comentario, y despus poco a poco convertir eso
Una manera en la que puedes averiguar eso es pensar acerca en cdigo.
de la "arquitectura de alto nivel" de tu programa (separarlo en
categoras como "objetos", "lgica", "interaccin del usuario",
"datos del usuario" y "escenas") y despus pensar acerca de
cmo puedes implementarlas, como tipos de objeto orientados 6. Cul es tu cronograma?
a objetos, funciones o variables.
Cunto tiempo tienes para hacer este programa? Cuntas
Por ejemplo, aqu est una arquitectura para mi clon de semanas y cunto tiempo cada da? Qu caractersticas vas a
Breakout: escribir cada semana? Tu objetivo en este paso es averiguar
un cronograma para tu proyecto, el cual es particularmente
Objetos importante si tienes una fecha lmite, pero tambin es til para
que puedas empezar a entender cunto tiempo te toma
Brick (.isHit())
escribir un programa.
Paddle (.move())
Ball (.move()) Aqu est un cronograma para mi clon de Breakout,
Escenas suponiendo 2-4 horas de trabajo cada semana:
Inicio Semana 1: diseo y pseudocdigo
Juego Semana 2: visualizaciones preliminares
Fin Semana 3: mecnica del movimiento/choque de la
Lgica pelota
Semana 4: mecnica de la puntuacin
Choque pelota-bloque (function, usar bounding box) Semana 5: escenas (inicio/ganar/perder)
ngulo de la paleta con la pelota (function, invertir Semana 6: pulir, pruebas manuales (revisin de
ngulo) calidad), preparacin para demostracin
Interaccin del usuario Averiguar los cronogramas para proyectos de programacin es
difcil. Algunas cosas que parecen fciles toman mucho ms
Movimiento de la paleta con el teclado (keyPressed)
tiempo del esperado (como algn error extrao con el cual te
Botones para cambiar escenas (mouseClicked) pasas horas depurando), algunas cosas que parecen difciles
Datos del usuario toman menos tiempo del esperado. Como una regla general,
Muertes de la pelota (array) supn que te vas a tardar ms de lo que piensas, y ajusta a
medida que vayas avanzando.
Golpes de la pelota (array)
Ests listo!?

Con suerte esto te da una idea del proceso de planear un

proyecto de programacin, y te inspira a empezar un proyecto
ahora. Dependiendo en qu quieras construir, tambin puedes
decidir tomar otros cursos antes, como JS avanzado: juegos y
visualizaciones o JS avanzado: simulaciones naturales, para
darte ms ideas para construir juegos y simulaciones.

Lo importantes es asegurarte de que empieces a hacer tus

propios proyectos en algn punto, porque ah es donde vas a
aprender ms, y tambin donde vas a tener la mayor alegra
de programar, porque ests haciendo tus sueos realidad.