Contenido principal

¡Empieza aquí!

Introducción a esta lección

¿Listo para sumergirte en algo de código?

En esta lección vas a construir un modelo sencillo de un muñeco de nieve y articularlo con JavaScript. Después puedes extender el modelo para crear tu propio personaje en el proyecto final.

En esta lección vas a llenar algunas partes importantes de un programa mucho más grande, parecido a cómo las personas trabajan con software en Pixar.

Resumen de la lección

Primero vas a construir unos círculos al usar objetos.

Después vas a combinar varias figuras en un arreglo de objetos.

Por último vas a escribir funciones deformadoras de modo que puedas mover y desplazar tu modelo.

Al final, ¡estarás listo para el proyecto final!

¿Qué necesitas saber antes de empezar?

Si nunca has programado nada antes, te recomendamos pasar por nuestro curso de Introducción a JS para aprender los conceptos de variables, arreglos, funciones y objetos. Y, por supuesto, ¡regresa cuando estés listo!
Si ya has programado antes pero no en Khan Academy, te recomendamos que primero te familiarizes con nuestro ambiente, al crear un nuevo programa aquí.
Si ya aprendiste a programar aquí en Khan Academy, ¡perfecto! Solo repasa los siguientes conceptos y refresca cualquier habilidad que tengas un poco olvidada.
Esta lección aborda temas de matemáticas (ecuaciones para transformaciones geométricas) apropiadas para segundo de secundaria en adelante. Puedes repasar este concepto en nuestra lección de escenarios y puestas en escena.

Repaso rápido de los conceptos de programación que usarás

Variables

var sulleysAge = 15;

Esto crea una variable llamada $sulleysAge$ ‍ que almacena el valor $15$ ‍.

¡Repasa variables aquí!

Arreglos

var ages = [2, 4, 8];

Esto crea un arreglo llamado $ages$ ‍ que almacena tres valores: $2, 4, 8$ ‍.
$ages [1]$ ‍ tiene el valor $4$ ‍.

¡Repasa arreglos aquí!

Funciones

var sayHello = function () {

text ("Hello world!", 100, 200);

}

Esto crea una función llamada $sayHello$ ‍ que cuando sea llamada escribirá el texto $"Hello world!"$ ‍ en la pantalla en las coordenadas $(100, 200)$ ‍.

var sayHello = function (x, y) {

text ("Hello world!", x, y);

}

Esta función $sayHello$ ‍ ahora tiene dos parámetros de entrada, $x$ ‍ y $y$ ‍, para definir las coordenadas del texto.

¡Repasa funciones aquí!

Objetos

var snowman = {};

Esto crea un objeto vacío llamado $snowman$ ‍.

var snowman = {

age : 2,

color : "white",

likes : ["milk", "cold days"]

}

El objeto $snowman$ ‍ ahora contiene tres propiedades: $snowman . age = 2$ ‍ y $snowman . color = "white"$ ‍. La tercera propiedad de $snowman$ ‍ es un arreglo llamado $likes$ ‍.