Controlando el Personaje
Antes que nada vamos a descargar el archivo de trabajo como en cada clase.
Algo de matemática para empezar
Para sacarle el mayor provecho a este contenido, recomiendo releer la clase de
incrementadores, ya que usaremos prácticamente el mismo metodo para mover al personaje (el la clase anterior la usamos para mover el personaje o el fondo).
Como vemos en la imagen, la imagen de ironman esta en la posicion horizontal de la variable x y la vertical de la variable y, por lo tanto es la primera la que permitira moverlo a la derecha o a la izquierda. Si usamos x=x+10 le estamos especificando que incremente en 10 el valor de x, cada vez que se haga esto obtendremos 10 mas. Por ejemplo, si x comienza con un valor de 0, luego valdrá 10, luego 20, 30 ...etc.
Si deseamos que el personaje vaya hacia la izquierda debemos usar x=x-10, de tal manera que se le resta 10 en cada ciclo. si X comienza con un valor de 100, luego valdra 90, 80, 70... etc.
Los valores marcados en rojo, son lo mismo que describimos ya pero para la variabe y donde sumar hara que el personaje baje (y=y+10), mientras que restar lo hara subir (y=y-10).
Detección de teclas
Cada tecla tiene un codigo que podemos detectar, para eso usamos en clase el script de Wes Bos, una simple pagina que al presionar una tecla nos devuelve el codigo javascript para esa tecla. Pueden probarlo en este link (o bien buscar en alguna de las miles de tablas de keycodes de javascript disponibles online).
Para el caso nuestro usamos las siguientes teclas, para la derecha 39, izquierda 37, arriba 38, y abajo 40.
function KeyPressed
Como veran en el archivo hay una nueva funcion al final llamada keyPressed(), que se ejecuta cuando una tecla es presionada. Dentro de esta haremos la deteccion de la tecla 39 para que el objeto se mueva a la derecha, o sea incrementando el valor de x cada vez que la tecla es presionada x=x+10.
Al mostrarles esa pieza de código le pido a los alumnos que hagan lo mismo con las otras teclas, y rápidamente lo completan sin problemas.
Cada bloque IF es para una tecla, de tal manera podríamos asignar teclas a disparos, cambios de apariencia, de armas, etc.
Me gusta realizar la comparación con juegos FPS donde cada arma tiene asignada a un número en el teclado (aunque es más fácil hacerlo con la rueda del mouse, pero en una época el mouse tenía esa facilidad, ni tercer botón).
//Codigo de la clase
var x=200;var y=200;
var ameo;
var ameo2;
var fondo;
function setup() {
createCanvas(1000,600);
background(128);
ameo=loadImage("imagenes/raven1.png");
ameo2=loadImage("imagenes/raven2.png");
fondo=loadImage("imagenes/ciudad1.jpg");
}
function draw() {
image(fondo, 0,0,1000,600 )
image(ameo, x, y, 300,300)
}
function keyPressed() {
if (keyCode == 39) { x=x+40 }
if (keyCode == 37) { x=x-40 }
if (keyCode == 40) { y=y+40 }
if (keyCode == 38) { y=y-40 }
}