Usando el teclado
Nuestro rectángulo ya se mueve por el lienzo, pero para verdaderamente interactuar con él, necesitamos indicarle a dónde queremos que vaya. Para eso, necesitamos primero una variable dónde guardar la tecla presionada:
Y agregar al final de nuestro código un escucha del teclado que almacene la tecla presionada:
Nuestro rectángulo ya se mueve por el lienzo, pero para verdaderamente interactuar con él, necesitamos indicarle a dónde queremos que vaya. Para eso, necesitamos primero una variable dónde guardar la tecla presionada:
[color=#000000]var lastKey=null;[/color]
Y agregar al final de nuestro código un escucha del teclado que almacene la tecla presionada:
[color=#000000]document.addEventListener('keydown',function(evt){
lastKey=evt.keyCode;
},false);[/color]
Mediante este método, podremos tomar decisiones en el juego sabiendo la última tecla presionada. Cada tecla tiene un valor numérico, el cual tendremos que comparar para realizar la acción deseada dependiendo la tecla presionada. Una buena forma de saber cuál ha sido la última tecla presionada, sería agregando esta línea en nuestra función “paint”:
[color=#000000]ctx.fillText('Last Key: '+lastKey,0,20); [/color]
Por ahora no debes preocuparte de eso. Usaremos las teclas izquierda, arriba, derecha y abajo, cuyos valores numéricos son 37, 38, 39 y 40 respectivamente. Primero, necesitaremos una nueva variable que almacene la dirección de nuestro rectángulo:
[color=#000000]var dir=0; [/color]
Esta variable “dir” tendrá un valor del 0 al 3, siendo 0 hacia arriba, y rotando en dirección de las manecillas del reloj para demás valores cada cuarto de hora.
Para tener mejor ordenado nuestro código, lo dividiremos en dos partes: Una función “game” que contendrá todos los movimientos de nuestros objetos, y nuestra función “paint” que dibuja todo en el lienzo. Por tanto, modifiquemos nuestra función “run” de esta forma:
[color=#000000]function run(){
setTimeout(run,50);
game();
paint(ctx);
}[/color]
Aunque todo podría hacerse directo desde “paint”, es recomendable hacerlo de esta forma para evitar un error en el que lo que ocurre en pantalla no es lo mismo que pasa en nuestro juego (Si mezclas ambos al mismo tiempo, por eso es mejor mover primero y al final dibujarlo), además, hacerlo de forma separada facilita saber dónde ocurren los eventos para modificarlos posteriormente.
Ahora, creemos nuestra función “game”. Comencemos por detectar la dirección que tomará nuestro rectángulo dependiendo la última tecla presionada:
[color=#000000]function game(){
// Change Direction
if(lastKey==38)
dir=0;
if(lastKey==39)
dir=1;
if(lastKey==40)
dir=2;
if(lastKey==37)
dir=3;
}[/color]
Después, moveremos nuestro rectángulo dependiendo la dirección que se haya tomado:
[color=#000000] // Move Rect
if(dir==0)
y-=10;
if(dir==1)
x+=10;
if(dir==2)
y+=10;
if(dir==3)
x-=10;[/color]
Por último, buscaremos si el rectángulo ha salido de la pantalla, y en dado caso, lo regresaremos a la misma:
[color=#000000] // Out Screen
if(x>canvas.width)
x=0;
if(y>canvas.height)
y=0;
if(x<0)
x=canvas.width;
if(y<0)
y=canvas.height;[/color]
Te habrás dado cuenta que antes de cada bloque de código, agregué una referencia precedida de dos diagonales ( // ). Esto es un comentario, y son bastante funcionales para describir qué ocurre en cada sección del código, así, si es necesario modificarlo después, podremos identificar con facilidad sus componentes.
Los comentarios también sirven para “eliminar” líneas de código, pero que podríamos querer utilizar después, por ejemplo, la que dibuja en pantalla cuál fue la última tecla presionada (No querremos que la gente que juegue nuestro juego la vea, ¿O si?).
Guarda el juego y abre “index.html”. Si todo está de forma correcta, ahora podrás controlar al pequeño rectángulo usando las flechas del teclado. ¡Felicidades!
Podría dar por concluida la lección de hoy, pero aprovechando que estamos viendo como usar el teclado, te contaré un pequeño truco que se usa para poner “Pause” a un juego. Comenzaremos por supuesto, creando una variable que indicará si el juego está en pausa:
Los comentarios también sirven para “eliminar” líneas de código, pero que podríamos querer utilizar después, por ejemplo, la que dibuja en pantalla cuál fue la última tecla presionada (No querremos que la gente que juegue nuestro juego la vea, ¿O si?).
Guarda el juego y abre “index.html”. Si todo está de forma correcta, ahora podrás controlar al pequeño rectángulo usando las flechas del teclado. ¡Felicidades!
Podría dar por concluida la lección de hoy, pero aprovechando que estamos viendo como usar el teclado, te contaré un pequeño truco que se usa para poner “Pause” a un juego. Comenzaremos por supuesto, creando una variable que indicará si el juego está en pausa:
[color=#000000]var PAUSE=true;[/color]
Ahora, encerraremos todo el contenido de nuestra función “game” en una condicional “if(!PAUSE)”, o sea, si el juego no está en pausa. Hasta el momento hemos hecho condicionales de una sola línea, por lo que no hemos usado llaves. Pero en caso de ser utilizada más de una línea en la condicional, se deben usar llaves igual que en las funciones, y como en este caso se encerrarán a TODAS las líneas de la función “game”, definitivamente se deberán usar las llaves.
Al final de la condicional “if(!PAUSE)”, agregaremos estas líneas para que al presionar la tecla ENTER (número 13), se cambie el juego entre pausado y sin pausa:
[color=#000000] // Pause/Unpause
if(lastKey==13){
PAUSE=!PAUSE;
lastKey=null;
}[/color]
Es muy importante que estas líneas no las encierres dentro del “if(!PAUSE)”, o de lo contrario, jamás podrás quitar la pausa (Por que jamás entrarás a esa parte del código). La asignación “PAUSE=!PAUSE” indica que cambio su valor por el opuesto (falso si es verdadero o verdadero si es falso), y después nulificamos “lastKey”, o de lo contrario, el juego estaría poniendo y quitando pausa sin fin hasta que se presione otra tecla.
Por último, dibujaremos en nuestra función “paint” el texto “PAUSE”, si la pausa está activada:
Por último, dibujaremos en nuestra función “paint” el texto “PAUSE”, si la pausa está activada:
[color=#000000] if(PAUSE)
ctx.fillText('PAUSE',140,75);[/color]
Actualicemos el juego. Ahora cada vez que presionemos la tecla Enter, el juego entrará o saldrá de la pausa.
Código Final:
Código Final:
[color=#000000]window.addEventListener('load',init,false);
var canvas=null,ctx=null;
var x=50,y=50;
var lastKey=null;
var PAUSE=true;
var dir=0;
function init(){
canvas=document.getElementById('canvas');
canvas.style.background='#000';
ctx=canvas.getContext('2d');
run();
}
function run(){
setTimeout(run,50);
game();
paint(ctx);
}
function game(){
if(!PAUSE){
// Change Direction
if(lastKey==38)
dir=0;
if(lastKey==39)
dir=1;
if(lastKey==40)
dir=2;
if(lastKey==37)
dir=3;
// Move Rect
if(dir==0)
y-=10;
if(dir==1)
x+=10;
if(dir==2)
y+=10;
if(dir==3)
x-=10;
// Out Screen
if(x>canvas.width)
x=0;
if(y>canvas.height)
y=0;
if(x<0)
x=canvas.width;
if(y<0)
y=canvas.height;
}
// Pause/Unpause
if(lastKey==13){
PAUSE=!PAUSE;
lastKey=null;
}
}
function paint(ctx){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillStyle='#0f0';
ctx.fillRect(x,y,10,10);
ctx.fillStyle='#fff';
//ctx.fillText('Last Key: '+lastKey,0,20);
if(PAUSE)
ctx.fillText('PAUSE',140,75);
}
document.addEventListener('keydown',function(evt){
lastKey=evt.keyCode;
},false);[/color]