Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/06/2014, 18:46
kiritosuu
 
Fecha de Ingreso: diciembre-2013
Mensajes: 24
Antigüedad: 10 años, 4 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);};
})();