
16/06/2014, 18:46
|
| | Fecha de Ingreso: diciembre-2013
Mensajes: 24
Antigüedad: 11 años, 3 meses Puntos: 1 | |
No me funciona este código de juego con canvas Hola amigos y amigas,
Siguiendo este tutorial para realizar el típico juego snake, termini haciéndolo pero no me funciona, sólo muestra la imagen final del tutorial pero no me permite "jugarlo":
http://juegos.canvas.ninja/2012/02/el-juego-de-la-serpiente.html
El código es el siguiente:
Los ficheros se encuentran también en la web del tutorial, lo seguí paso a paso pero no encontré posible solución, igualmente el web developer de mozilla no me marca ningún error.... :(
Ayuda please!
Código:
window.addEventListener('load',init,false);
var canvas=null,ctx=null;
var lastPress=null;
var pause=true,gameover=true;
var dir=0,score=0;
var body=new Array();
var food=new Rectangle(80,80,10,10);
//var wall=new Array();
var iBody=new Image(),iFood=new Image();
var aEat=new Audio(),aDie=new Audio();
iBody.src='assets/body.png';
iFood.src='assets/fruit.png';
aEat.src='assets/chomp.m4a';
aDie.src='assets/dies.m4a';
//wall.push(new Rectangle(100,50,10,10));
//wall.push(new Rectangle(100,100,10,10));
//wall.push(new Rectangle(200,50,10,10));
//wall.push(new Rectangle(200,100,10,10));
var KEY_ENTER=13;
var KEY_LEFT=37;
var KEY_UP=38;
var KEY_RIGHT=39;
var KEY_DOWN=40;
function random(max){
return Math.floor(Math.random()*max);
}
function init(){
canvas=document.getElementById('canvas');
ctx=canvas.getContext('2d');
run();
repaint();
}
function run(){
setTimeout(run,50);
act();
}
function repaint(){
requestAnimationFrame(repaint);
paint(ctx);
}
function reset(){
score=0;
dir=1;
body.length=0;
body.push(new Rectangle(40,40,10,10));
body.push(new Rectangle(0,0,10,10));
body.push(new Rectangle(0,0,10,10));
food.x=random(canvas.width/10-1)*10;
food.y=random(canvas.height/10-1)*10;
gameover=false;
}
function act(){
if(!pause){
// GameOver Reset
if(gameover)
reset();
// Move Body
for(var i=body.length-1;i>0;i--){
body[i].x=body[i-1].x;
body[i].y=body[i-1].y;
}
// Change Direction
if(lastPress==KEY_UP&&dir!=2)
dir=0;
if(lastPress==KEY_RIGHT&&dir!=3)
dir=1;
if(lastPress==KEY_DOWN&&dir!=0)
dir=2;
if(lastPress==KEY_LEFT&&dir!=1)
dir=3;
// Move Head
if(dir==0)
body[0].y-=10;
if(dir==1)
body[0].x+=10;
if(dir==2)
body[0].y+=10;
if(dir==3)
body[0].x-=10;
// Out Screen
if(body[0].x>canvas.width-body[0].width)
body[0].x=0;
if(body[0].y>canvas.height-body[0].height)
body[0].y=0;
if(body[0].x<0)
body[0].x=canvas.width-body[0].width;
if(body[0].y<0)
body[0].y=canvas.height-body[0].height;
// Wall Intersects
//for(var i=0,l=wall.length;i<l;i++){
// if(food.intersects(wall[i])){
// food.x=random(canvas.width/10-1)*10;
// food.y=random(canvas.height/10-1)*10;
// }
//
// if(body[0].intersects(wall[i])){
// gameover=true;
// pause=true;
// }
//}
// Body Intersects
for(var i=2,l=body.length;i<l;i++){
if(body[0].intersects(body[i])){
gameover=true;
pause=true;
aDie.play();
}
}
// Food Intersects
if(body[0].intersects(food)){
body.push(new Rectangle(food.x,food.y,10,10));
score++;
food.x=random(canvas.width/10-1)*10;
food.y=random(canvas.height/10-1)*10;
aEat.play();
}
}
// Pause/Unpause
if(lastPress==KEY_ENTER){
pause=!pause;
lastPress=null;
}
}
function paint(ctx){
ctx.fillStyle='#000';
ctx.fillRect(0,0,canvas.width,canvas.height);
//ctx.fillStyle='#0f0';
for(var i=0,l=body.length;i<l;i++){
//body[i].fill(ctx);
ctx.drawImage(iBody,body[i].x,body[i].y);
}
//ctx.fillStyle='#999';
//for(var i=0,l=wall.length;i<l;i++){
// wall[i].fill(ctx);
//}
//ctx.fillStyle='#f00';
//food.fill(ctx);
ctx.drawImage(iFood,food.x,food.y);
ctx.fillStyle='#fff';
//ctx.fillText('Last Press: '+lastPress,0,20);
ctx.fillText('Score: '+score,0,10);
if(pause){
ctx.textAlign='center';
if(gameover)
ctx.fillText('GAME OVER',150,75);
else
ctx.fillText('PAUSE',150,75);
ctx.textAlign='left';
}
}
document.addEventListener('keydown',function(evt){
lastPress=evt.keyCode;
},false);
function Rectangle(x,y,width,height){
this.x=(x==null)?0:x;
this.y=(y==null)?0:y;
this.width=(width==null)?0:width;
this.height=(height==null)?this.width:height;
this.intersects=function(rect){
if(rect!=null){
return(this.x<rect.x+rect.width&&
this.x+this.width>rect.x&&
this.y<rect.y+rect.height&&
this.y+this.height>rect.y);
}
}
this.fill=function(ctx){
if(ctx!=null){
ctx.fillRect(this.x,this.y,this.width,this.height);
}
}
}
window.requestAnimationFrame=(function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback){window.setTimeout(callback,17);};
})();
|