Contenido principal
Cambios de escena simples
Digamos que queremos contar la historia de Winston como un libro ilustrado de cuentos, y que el usuario haga clic para leer la siguiente parte de la historia. Empezaremos con una escena principal que solo tiene un título:
background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("La Historia de Winston", 10, 200);Ahora, queremos que el usuario pueda hacer clic para ver la primera parte de la historia, el épico nacimiento de Winston. Para hacer eso, podemos definir una función
mouseClicked que será llamada cuando el usuario haga clic con el ratón, y podemos poner ahí el código que dibuje nuestra segunda escena. Observa que tenemos que llamar a la función background() antes de dibujar la segunda escena; de lo contrario, veremos ambas escenas, una encima de la otra:mouseClicked = function() {
// Escena 2
background(173, 239, 255);
fill(7, 14, 145);
textSize(25);
text("¡Nace el pequeño Winston!", 10, 100);
image(getImage("creatures/BabyWinston"), 80, 150);
};Inténtalo en el programa a continuación. Haz clic para ver el cambio de escena y ¡que nazca el pequeño Winston!
Ahora quiero que intentes editar el código para la segunda escena, como cambiar el texto o la colocación de la imagen. ¿Te diste cuenta que cada vez que quieres ver los resultados de tu código editado tienes que hacer clic para ver la segunda escena?
Personalmente, me parece que molesto, pues significa que es tan tardado editar la escena 2 para que sea exactamente cómo la quiero. Imagina si tuviéramos 10 escenas y quisiera editar la escena 10. Tendríamos que hacer clic 10 veces para cada edición. ¡Pfff!
Así que resolvamos ese problema. Sí, tú y yo podemos sobrevivir a las cosas molestas, pero todos queremos ser programadores más productivos, y ¿no seremos más productivos si podemos ver los resultados de nuestra codificación en tiempo real? En este caso, una cosa fácil de hacer es encerrar todo el código de la escena 2 dentro de una función, llamar a esa función desde
mouseClicked y luego llamar esa función cuando estemos depurando. Esto es a lo que me refiero:var drawScene2 = function() {
background(173, 239, 255);
fill(7, 14, 145);
textSize(25);
text("¡Nace el pequeño Winston!", 10, 100);
image(getImage("creatures/BabyWinston"), 80, 150);
};
mouseClicked = function() {
drawScene2();
};
// Escena 1
background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("La historia de Winston", 10, 200);
drawScene2();Como convertimos la escena 2 en una función, también podemos convertir la escena 1 en una función, solo encerrando todo ese código y llamándolo.
var drawScene1 = function() {
background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("La historia de Winston", 10, 200);
};Ahora, prueba el programa a continuación. Esta vez, si quieres hacer modificaciones en la escena 2, simplemente puedes quitar el comentario de la llamada a
drawScene2() y ver que tus ediciones se vean de manera inmediata.Genial, así que ya tenemos una escena principal y una segunda escena. ¿Qué pasa si queremos mostrar una tercera escena? ¿O volver a la primera escena al hacer clic en la tercera? Tenemos que cambiar la lógica dentro de
mouseClicked de manera que se elija condicionalmente cuál de las escenas mostrar, en lugar de llamar siempre a la escena 2. Eso significa que necesitamos una instrucción if que revisará algún tipo de condición. Primero pensemos en términos de pseudocódigo:// Cuando el usuario haga clic en el ratón:
// si la escena actual es la #1, ve a la #2
// si la escena actual es la #2, ve a la #3
// si la escena actual es la #3, regresa a la #1Parece que necesitamos llevar un seguimiento de la "escena actual", y tendría más sentido llevarlo con un número. Vamos a declarar una variable global
currentScene para la escena actual, y a revisar su valor dentro de mouseClicked.var currentScene;
mouseClicked = function() {
if (currentScene === 1) {
drawScene2();
} else if (currentScene === 2) {
drawScene3();
} else if (currentScene === 3) {
drawScene1();
}
};Las condiciones se parecen a nuestro pseudocódigo, pero hay un problema: nunca asignamos el valor de
currentScene, así que esas condiciones nunca serán verdaderas. Podríamos asignarlo dentro de las condiciones del if, pero probablemente sea mejor asignarlo dentro de las funciones que dibujan las escenas, para que la variable esté definida correctamente sin importar donde llamemos las funciones que dibujan escenas.var drawScene1 = function() {
currentScene = 1;
...
};
var drawScene2 = function() {
currentScene = 2;
...
};
var drawScene3 = function() {
currentScene = 3;
...
};Hemos reunido todo en el siguiente programa. Haz clic y observa cómo hace ciclos hasta el inicio de la historia. Intenta agregar una escena cuatro (¿Winston conoce a Fulanos? ¿Winston conoce a Winstonia y se muda a Winstonsin?), y haz un derivado:
¿Quieres unirte a la conversación?
Hay una manera mas fácil para poner los códigos?(6 votos)
pues si si en vez de decir que la escena es la 2 o 3 dentro del código pongas escena ++; y asi si quieres añadir una escena en medio pues ya no tienes que cambiar todo es código xd(2 votos)
PREGUNTAS FRECUENTES:
¿Hay alguna otra manera de poner los codigos?
La respuesta es para que tiene pensado hacerlo, porque claramente hay maneras mas sencillas, las cuales no se aprendieron hasta esta parte del curso, por ejemplo, si estas en un proyecto real, no vas a cambiar de escena exactamente de esta manera, si te vas a dedicar a crear videojuegos, es muy poco probable que programes en JavaScript, si quieres programar videojuegos aprende c# con unix. En conclusión si hay otras maneras, si estas desarrollando en un proyecto real, en este capitulo te lo explica con l ainformacion que tenes al respecto hasta ahora.
¿QUE SON ESCENAS SIMPLES?
Cada escena es un estado distinto del programa que muestra información diferente en la pantalla, y hay alguna manera para que el usuario vaya de una escena a la siguiente. ... Puede ser un simple clic del ratón, una combinación de teclas, o tal vez sea seleccionar una escena mediante un menú. Aca vimos las escenas simpes, solamente haciendo un click en cualquier parte de la pantalla.
¿Por qué en este curso de JS avanzado hay en vez de vídeos documentos?
Son solos estos, no todos los de js avanzado. PERO ASEGURATE DE LEER Y COMPRENDER TODO. NO DEJES NADA ATRAS. LEE Y COMPRENDE Y SI NO ENTIOENDES PREGUNTA Y SI NO RESPNDEN BUSCA EN INTERNET RESPUESTAS PARECIDAS A TUS PREGUNTAS.(5 votos)- oye he avanzado y te aseguro que no hay ni un solo video , aun que entiendo me gustaría que hubiera videos(2 votos)
¿ que son escenas simples ?(3 votos)
¿Hay alguna otra manera de poner los códigos?(2 votos)
quien sabe como entro a classroom?(2 votos)- cómo hago el desafío cuentacuentos?(2 votos)
aquí tengo la respuesta
var drawScene1 =function(){
currentScene = 1;
background(200, 175, 178);
image(seed, 50,200);
text("Leafers started out as a seed",200,50);
};
var drawScene2 = function(){
currentScene = 2;
background (200, 175, 175);
image(seedling,120,340,100,100);
text(" Leafers is a seedling",200,50);
};
var drawScene3 = function(){
currentScene = 3;
background (200, 175, 176);
image(sapling,120,340,100,100);
text(" Leafers is a sapling",200,50);
};
var drawScene4 = function(){
currentScene = 4;
background (200, 175, 174);
image(tree,120,340,100,100);
text(" Leafers is a tree",200,50);
};
var drawScene5 =function(){
currentScene = 5;
background(150, 150, 175);
image(ultimate, 200,200);
text("In the end, Leafers became Ultimate Leafers",200,50);
};
drawScene1();
mouseClicked=function(){
if (currentScene === 1){
drawScene2();
}
else if (currentScene === 2){
drawScene3();
}
else if (currentScene === 3){
drawScene4();
}
else if (currentScene === 4){
drawScene5();
}
else if (currentScene === 5) {
drawScene1();
}
};(1 voto)
- una pregunta cual es la segunda imagen del cuentacuentos(2 votos)
- DESAFIO CUENTACUENTOS:
------------------------------------------------------
fill(0, 0, 0);
textSize(20);
textAlign(CENTER);
//images of Leafers
var seed= getImage("avatars/leafers-seed");
var seedling= getImage("avatars/leafers-seedling");
var sapling= getImage("avatars/leafers-sapling");
var tree= getImage("avatars/leafers-tree");
var ultimate = getImage("avatars/leafers-ultimate");
var currentScene;
var drawScene1 =function(){
currentScene = 1;
background(200, 175, 175);
image(seed, 50,200);
text("Leafers started out as a seed",200,50);
};
var drawScene2 = function(){
currentScene = 2;
background(255, 0, 0);
image(seedling, 50, 200);
text("started to grow", 200, 50);
};
var drawScene3 = function(){
currentScene = 3;
background(56, 143, 128);
image(sapling, 50, 200);
text("it is alredy a young tree", 200, 50);
};
var drawScene4 = function(){
currentScene = 4;
background(255, 255, 255);
image(tree, 50, 200);
text("it is a tree", 200, 50);
};
var drawScene5 =function(){
currentScene = 5;
background(150, 150, 175);
image(ultimate, 200,200);
text("In the end, Leafers became Ultimate Leafers",200,50);
};
drawScene1();
mouseClicked=function(){
if (currentScene === 1) {
drawScene2();
} else if(currentScene === 2){
drawScene3();
} else if(currentScene === 3){
drawScene4();
} else if(currentScene === 4){
drawScene5();
} else if(currentScene === 5) {
drawScene1();
}
};
---------------------------------------------------------------(2 votos) - por que me rechaza el programa
quiero ver el ejemplo de hacer clickmouse para cambiar de escena de ninguno me carga
ayuda no se como arreglar o porque pasa eso
y ya reinicie y nd(1 voto) 
Hay alguna manera de poder agruparlo todo en variantes?(1 voto)