//Claro necesita ser pulido.. pero para que entiendas la idea..
window.addEventListener('keyup', function(){
   console.log('Se solto la tecla..');
   context.restore();
}, true);
 

window.addEventListener('keyup', function(){
    redrawAllStored();
}, true);

function redrawStoredLines(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
 
        if(storedLines.length==0){ return; }
 
        // redibuja cada linea guardada
        for(var i=0;i<storedLines.length;i++){
            ctx.beginPath();
            ctx.moveTo(storedLines[i].x1,storedLines[i].y1);
            ctx.lineTo(storedLines[i].x2,storedLines[i].y2);
            ctx.stroke();
        }
    }

	// Variables globales
 
 
	function main(){	 
		window.addEventListener('keydown', dirigir, true);
		//Miestras tenga la tecla mantenida..
		window.addEventListener('keyup', keyup, true);
		var canvas  = document.getElementById("canvas2D");
		var cWidth  = document.getElementById("canvas2D").width;
		var cheight = document.getElementById("canvas2D").height;
		var context = canvas.getContext("2d");
		var player={direction:39, posX:0, posY:20, ancho:10, alto:10};
		var enemigo={posX:200, posY:200, ancho:50, alto:50};
		var lineaDibujada={X1:20, Y1:20, X2:player.posX, Y2:player.posY};
		//context.fillRect(20,20,50,50);
 
		function init(){
			if(typeof game_loop!="undefined"){
				clearInterval(game_loop);
			}
			game_loop=setInterval(main,200);
		}
 
		function dibujarLinea(X1,Y1,X2,Y2){
			//context.save(); No es necesario
			context.moveTo(X1,Y1);
			context.lineTo(X2,Y2);
			context.strokeStyle = "#f00";
			context.stroke();
			//context.restore(); No es necesario
		}
 
		function keyup(){
			console.log('Se suelta la tecla...');
			//Mientras se presione la tecla mostrar la linea..
			context.restore();
		}
 
		function dirigir(evt) {
			if(evt.keyCode!=null){
				switch(evt.keyCode){
					case 39:
						if(player.posX<cWidth-4){
							player.posX+=2;
						}
						break;
					case 37:
						if(player.posX>-1){
							player.posX-=2;
						}
					break;
					case 38:
						if(player.posY>-1){
							player.posY -=2;
						}
						break;
					case 40:
						if(player.posY<cheight-4){
							player.posY+=2;
						}
						break;
					default:
						player.posX=player.posX;
						player.posY=player.posY;	
				}
			}
 
			//Cuando se presiona una tecla es cuando dibujamos la linea
			dibujarLinea(lineaDibujada.posX1,lineaDibujada.posY1,player.posX,player.posY);
			//Guardamos la linea dibujada
			context.save();
		}
 
		function main(){
			setBackground();
			//No lo necesitamos dentro del loop..
			//dibujarLinea(lineaDibujada.posX1,lineaDibujada.posY1,player.posX,player.posY);
			drawEnemigo();		
			drawPlayer();
			moverEnemigo();
		}
 
		function moverEnemigo(){
			var aleatorio	=Math.random();
			aleatorio		=aleatorio*100;
			if(aleatorio<25){
				if(enemigo.posX<cWidth-20){
					enemigo.posX+=10;	
				}else{
					enemigo.posX-=10;
				}
 
			}
			if(aleatorio>=25&& aleatorio<45){
				if (enemigo.posX>20){
					enemigo.posX-=10;
				}else{
					enemigo.posX+=10;
				}
			}
			if(aleatorio>=45 && aleatorio<70){
				if(enemigo.posY>20){
					enemigo.posY-=10;
				}
				else{
					enemigo.posY+=10;	
				}
			}
			if(aleatorio>=70 && aleatorio<=100){
				if(enemigo.posY<cheight-20){
					enemigo.posY+=10;
				}else{
					enemigo.posY-=10;
				}
			}
		}
 
		function setBackground(){
		//	context.save();  No es necesario
		context.fillStyle="white";
		context.fillRect(0,0,cWidth,cheight);
		context.strokeStyle="black";
		context.strokeRect(0,0,cWidth,cheight);
		//	context.restore();  No es necesario
		}
 
		function drawPlayer(){
			//	context.save();  No es necesario
			context.fillStyle="blue";
			context.fillRect(player.posX,player.posY, player.ancho,player.alto);
			//	context.restore();  No es necesario
		}
 
		function drawEnemigo(){
			//context.save();  No es necesario
			context.fillStyle="Red";
			context.fillRect(enemigo.posX,enemigo.posY, enemigo.ancho,enemigo.alto);
			//context.restore();  No es necesario
		}
 
		setBackground();
		init();
	}