<head>
<script language="javascript" type="text/javascript">
var ciclos=0;
var iteraciones=1;
var jugador;
/* CONTROLES */
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_RIGHT = 39;
var KEY_DOWN = 40;
var KEY_SPACE = 32;
var aTecla = [];
var nDireccion = 32
var x=0;
var y=230;
window.onload=function(){ canvas=document.getElementById("miCanvas"); canvas.width = 640;
canvas.height= 480;
if(canvas && canvas.getContext){ ctx = canvas.getContext("2d"); if(ctx){ imgEscenario= new Image();
imgEscenario.src="Escenario.png";
imgEscenario.onload=function(){ level = new Escenario();
imagen=new Image();
imagen.src="sprite.png";
imagen.onload=function(){ jugador = new Player();
anima();
}
}
}else{ alert("Error al crear el contexto"); }
}
}
/* PERSONAJE */
function Player(){ this.w = 96;
this.h = 96;
this.x = (canvas.width/2)-(this.w/2);
this.y = 230;
this.direccion = "R";
this.salto = false;
this.sube = false
this.dibuja= dibujaPlayer;
}
function dibujaPlayer(){ if(aTecla[KEY_LEFT] || aTecla[KEY_RIGHT]){ if(ciclos>3){ ciclos=0;
iteraciones++;
}
ciclos++;
if(iteraciones>8){ iteraciones=1;
}
if(aTecla[KEY_LEFT]){ nDireccion=0;
jugador.direccion="L";
if(!jugador.salto){ ctx.drawImage(imagen, 32*iteraciones,nDireccion , 31,31 , canvas.width/2-64,canvas.height-230, 96,96);
}else{ if(jugador.sube){ jugador.y+=5;
}else{ jugador.y-=5;
}
if(jugador.y>230+120){ jugador.sube=false;
}
if(jugador.y<=230){ jugador.y=230;
jugador.salto=false;
}
if(jugador.sube)
ctx.drawImage(imagen, 160,64 , 33,34 , canvas.width/2-64,canvas.height-jugador.y, 105,105);
else
ctx.drawImage(imagen, 128,64 , 33,34 , canvas.width/2-64,canvas.height-jugador.y, 105,105);
}
}
else if(aTecla[KEY_RIGHT]){ nDireccion=32;
jugador.direccion="R";
if(!jugador.salto){ ctx.drawImage(imagen, 32*iteraciones,nDireccion , 31,31 , canvas.width/2-64,canvas.height-230, 96,96);
}else{ if(jugador.sube){ jugador.y+=5;
}else{ jugador.y-=5;
}
if(jugador.y>230+120){ jugador.sube=false;
}
if(jugador.y<=230){ jugador.y=230;
jugador.salto=false;
}
if(jugador.sube)
ctx.drawImage(imagen, 0,64 , 33,34 , canvas.width/2-64,canvas.height-jugador.y, 105,105);
else
ctx.drawImage(imagen, 32,64 , 33,34 , canvas.width/2-64,canvas.height-jugador.y, 105,105);
}
}
}else{ if(!jugador.salto){ ctx.drawImage(imagen, 0,nDireccion , 31,31 , canvas.width/2-64,canvas.height-230, 96,96);
}else{ if(jugador.sube){ jugador.y+=5;
}else{ jugador.y-=5;
}
if(jugador.y>230+120){ jugador.sube=false;
}
if(jugador.y<=230){ jugador.y=230;
jugador.salto=false;
}
if(jugador.direccion=="L"){ if(jugador.sube)
ctx.drawImage(imagen, 160,64 , 33,34 , canvas.width/2-64,canvas.height-jugador.y, 105,105);
else
ctx.drawImage(imagen, 128,64 , 33,34 , canvas.width/2-64,canvas.height-jugador.y, 105,105);
}else{ if(jugador.sube)
ctx.drawImage(imagen, 0,64 , 33,34 , canvas.width/2-64,canvas.height-jugador.y, 105,105);
else
ctx.drawImage(imagen, 32,64 , 33,34 , canvas.width/2-64,canvas.height-jugador.y, 105,105);
}
}
}
}
/* ESCENARIO */
function Escenario(){ this.dibuja = dibujaEscenario;
}
function dibujaEscenario(){ if(ciclos>3){ switch(jugador.direccion){ case "R":
x -= 13;
if(x<=-canvas.width) x=0;
break;
case "L":
x += 13;
if(x>=canvas.width) x=0;
break;
}
}
ctx.drawImage(imgEscenario, 0,0 , imgEscenario.width,imgEscenario.height, -canvas.width+x,0 , canvas.width,canvas.height);
ctx.drawImage(imgEscenario, 0,0 , imgEscenario.width,imgEscenario.height, x,0 , canvas.width,canvas.height);
ctx.drawImage(imgEscenario, 0,0 , imgEscenario.width,imgEscenario.height, canvas.width+x,0 , canvas.width,canvas.height);
}
/* MOTOR */
function anima(){ requestAnimationFrame(anima);
level.dibuja()
jugador.dibuja();
}
/* LISTENERS */
document.addEventListener("keydown",function(e){ if(e.keyCode == KEY_SPACE){ if(!jugador.salto){ jugador.salto=true;
jugador.sube=true;
}
}
aTecla[e.keyCode]=true
});
document.addEventListener("keyup",function(e){ aTecla[e.keyCode]=false;
iteraciones=0;
ciclos=2;
});
</script>
</head>
<body>
<div>
<canvas id="miCanvas"></canvas>
</div>
</body>
Crear cuenta
Mismo escenario pero hoja de sprites aumentada.