PACMAN JAVASCRIPT CANVAS OOP STYLE PROTOTYPE

PAC_MAN.js

// jquery laden
// onload get id from canvas
// ctx . draw circle

//$(document)

// Shorthand for $( document ).ready()


// var shapes 

 var  ctx     ; 
// var _canvas  ;
 var colors = [];
 var allShapes =[];
 var allEnemies =[];
 var anzahl = 0;
 var margin =5;
 //var grid = [[],[],[],[],[],[],[],[]],
 var position=[0,50,100,150,200,250,300,350,400];
 var event ={pageX:0,PageY:0};
 var board =[];
 var playerSpeed = 50;
 var enemySpeed  = 4;
 var allPlayers  = [];
 var fruits      = [];
  
 var bricks       = [];
 var Points       = 10;
 var myAudio ;



var init = function() {

         _canvas = document.getElementById('PaintBoard');
        // _reset  = document.getElementById('idReset') ;
         _anzahl = document.getElementById("anzahl")  ;
         _points = document.getElementById("idPunkte")  ;
         
    
        if (_canvas.getContext){
          ctx = _canvas.getContext('2d');
          };  
        initGrid();
        pushColors();
    _canvas.addEventListener("mousedown", doMouseDown, false);

   //  _reset.addEventListener("click",onclickReset,false);
   
};

var selectCanvas = function(ev){
   
   // alert(ev.id );
       _canvas = document.getElementById(ev.id);
         if (_canvas.getContext){
           ctx = _canvas.getContext('2d');
      };
       _canvas.addEventListener("mousedown", doMouseDown, false);
     //  _canvas.addEventListener("mouseout", onclickReset, false);
       // ctx.clearRect(0, 0, _canvas.width, _canvas.height);
       
};

var onclickReset = function(event){
    
    
       // durchlauf des arrays 
       // methode clear()
    //ctx.clearRect(0, 0, _canvas.width, _canvas.height);  
    
};



var initGrid= function(){
      
        
   ///  backgroundImage.onload = function()
     //{
   //          ctx.drawImage(backgroundImage, 0, 0); 
        var xposition= 50;
        var yposition= 50;
        var board= new Array(9);
    
        //ctx.fillRect(0, 0, _canvas.width, _canvas.height);
    
     for (var i=0;i<=9;i++){
           board[i] = new Array(9);
         for (var j=0;j<=9;j++) {
             board[i][j]="-";
             ctx.strokeRect(j*xposition,i*yposition,50,50);
                                }
                           };
     
     
     //};

};


var doMouseDown = function(event) {
    var x = event.pageX - _canvas.offsetLeft,
        y = event.pageY - _canvas.offsetTop;

  allShapes.forEach(function(element) {
        if (y > element.positionY && y < element.positionY + element.height && x > element.positionX && x < element.positionX + element.width) {
         alert('clicked an element'+element.name);
        }
    });
    
     
   
    _anzahl.innerHTML= allShapes.length;
    };
 
 
 var createShapes= function(anzahl){
    
    
    var i=0;
     while ( i <= anzahl) {
        brick = new Shape(i);
        bricks.push(brick);
        i++;
    }
        //s1.clone();
        
    };


var pushColors = function(){
   
    colors.push("red");
    colors.push("blue");
    colors.push("green");
    colors.push("yellow");
    colors.push("orange");
    
    
};

var getRandomColor = function() {
    
    var i = Math.floor((Math.random() * colors.length) + 1); 
   
    return colors[i];
};

function roundedRect(ctx,x,y,width,height,radius){
  ctx.beginPath();
  ctx.moveTo(x,y+radius);
  ctx.lineTo(x,y+height-radius);
  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
  ctx.lineTo(x+width-radius,y+height);
  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
  ctx.lineTo(x+width,y+radius);
  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
  ctx.lineTo(x+radius,y);
  ctx.quadraticCurveTo(x,y,x,y+radius);
  ctx.stroke();
};



 var Hero = function() {
     
     
   this.img = new Image('floko.png');
   this.img.src='floko.png';
   this.shapes =  []   ;
   this.direction = 1  ;
   //this.positionX =  position[Math.floor((Math.random() * 8) + 0)]+margin; //event.pageX - _canvas.offsetLeft;
   //this.positionY =  position[Math.floor((Math.random() * 6) + 0)]+margin; //event.pageY - _canvas.offsetTop;
   this.positionX = 0+margin;
   this.positionY = 0+margin;
   this.width     =  50;
   this.height    =  40;
  
   //this.color     =  getRandomColor();
  
   //position x/y 0 50 100 150 200 250 300 350 
   //             0 50 100 150 200 250 300 350
   
 };
 
      Hero.prototype.draw      = function() {
    // this.img.src='floko.png';   
   // ctx.save();
    ctx.drawImage(this.img, this.positionX , this.positionY,this.width,this.height );
   // ctx.translate(this.positionX,this.positionY);
   
   // ctx.restore();
      // alert('stroke anzahl'+anzahl);    
   };
      Hero.prototype.clear     = function(){
      
       ctx.clearRect(this.positionX, this.positionY, this.width, this.height);
   };
      Hero.prototype.walkright = function(){
        //hero.clear();
        myAudio.play();
        hero.positionX += playerSpeed*this.direction ;
        if (hero.positionX > _canvas.width-hero.width) {
            hero.positionX = _canvas.width-hero.width;
        }
        hero.draw();
       
   };
      Hero.prototype.walkleft  = function(){
        myAudio.play();
        hero.positionX -= playerSpeed ;
            if (hero.positionX < 0+hero.width) {
            hero.positionX = 0;
        }
        hero.draw();
       
   };
      Hero.prototype.walkup    = function(){
        myAudio.play();
        hero.positionY -= playerSpeed ;
                if (hero.positionY < 0+hero.height) {
            hero.positionY = 0;
        }
        hero.draw();
       
   };
      Hero.prototype.walkdown  = function(){
       myAudio.play();
        hero.positionY += playerSpeed ;
                  if (hero.positionY > _canvas.height -hero.height) {
            hero.positionY = _canvas.height-hero.height;
                  }
        hero.draw();
       
   };
      
    Hero.prototype.checkCollision= function (oObject){
          
        
   if (this.positionX < oObject.positionX + oObject.width  && this.positionX + this.width  > oObject.positionX
       &&
       this.positionY < oObject.positionY + oObject.height && this.positionY + this.height > oObject.positionY) 
      {
     
     ctx.font="16px Verdana";
     ctx.strokeText("Come on Florina",this.positionX,this.positionY);
  // Fill with gradient
   //  ctx.strokeStyle=gradient;

     if (oObject.art === "brick") {
     this.poitionX =this.positionX-20; 
     this.walkleft();
           }
    
     if (oObject.art === "fruit") {
         if (oObject.healthy === 20) {
           slurpAudio.play(); 
         }  
        Points +=1;
        oObject.healthy -= 1;
        oObject.img.style.opacity = 0.4 ;//60-oObject.healty ;
        //oObject.clear();
        if (oObject.healthy <=0) 
          {
        
        delete fruits[fruits.indexOf(oObject)];
         // fruits.splice(oObject.index+1,1);
          }
           }
     if (oObject.art === "enemy") {
        Points -=1;
        
          
      }
     
       ctx.strokeText("Punkte: "+Points, 400,20,100,100);
      _points.innerHTML= Points;
      if (Points<=0){alert("GAME OVER")}
      }
  };
            
   
//***************************************************************************



 var Fruit = function(anz) {
     
     // xposition event.pageX - _canvas.offsetLeft; 253/50
     // yposition
     
     //posX = roundIt(event.pageX - _canvas.offsetLeft);
     //posY = roundIt(event.pageY - _canvas.offsetTop) ;
     
   this.img = new Image();
   this.index = parseInt(anz) ;
   this.name   = anz;
   this.art= "fruit";
   this.shapes =  ['apple.png','melone.png','starbucks.png']   ;
   this.positionX =  roundIt(Math.floor((Math.random() * _canvas.width) + 0))+margin; //event.pageX - _canvas.offsetLeft;
   this.positionY =  roundIt(Math.floor((Math.random() * _canvas.height) + 0))+margin; //event.pageY - _canvas.offsetTop;
   //this.positionX = posX+margin-50;
   //this.positionY = posY+margin-50;
   this.width     =  40;
   this.height    =  40;
   this.healthy   =  25;
   this.img.src=this.shapes[Math.floor((Math.random() * 3) + 0)]; 

   //this.randomizerColor();
   //position x/y 0 50 100 150 200 250 300 350 
   //             0 50 100 150 200 250 300 350
   
 };
 
    Fruit.prototype.clear = function() {
       
       ctx.clearRect(this.positionX, this.positionY, this.width,this.height); 
       
       
   };
    Fruit.prototype.draw= function() {
    
    ctx.save();
    ctx.drawImage(this.img, this.positionX , this.positionY,this.width,this.height );
    ctx.translate(this.positionX,this.positionY);
    ctx.restore();
    
      // alert('stroke anzahl'+anzahl);    
   };
 
 
  function roundIt(n) {
    return Math.ceil(n / 50) * 50;
}

 var Shape = function(anz) {
     
     // xposition event.pageX - _canvas.offsetLeft; 253/50
     // yposition
     
     //posX = roundIt(event.pageX - _canvas.offsetLeft);
     //posY = roundIt(event.pageY - _canvas.offsetTop) ;
     
   //this.img = new Image('pacman.png',50,50);
   this.name   = anz;
   this.art    = "brick";
   this.shapes =  []   ;
   this.positionX =  roundIt(Math.floor((Math.random() * _canvas.width) + 0))+margin; //event.pageX - _canvas.offsetLeft;
   this.positionY =  roundIt(Math.floor((Math.random() * _canvas.height) + 0))+margin; //event.pageY - _canvas.offsetTop;
   //this.positionX = posX+margin-50;
   //this.positionY = posY+margin-50;
   this.width     =  40;
   this.height    =  40;
   this.color     =  "lightblue";
   //this.randomizerColor();
   //position x/y 0 50 100 150 200 250 300 350 
   //             0 50 100 150 200 250 300 350
   
 };
 
 
 
 
   Shape.prototype.randomizerColor= function() {
     var r = Math.floor((Math.random() * 255) + 0);
     var g = Math.floor((Math.random() * 255) + 0);
     var b = Math.floor((Math.random() * 255) + 0);
     
     var col = "rgb(" + r + "," + g + "," + b + ")";
 
     this.color = col;
 };
   Shape.prototype.draw = function() {
    
   
    ctx.beginPath();
    //ctx.arc(this.positionX+this.width,this.positionY+this.width,this.width,0,2*Math.PI);
    
    ctx.rect(this.positionX,this.positionY,this.width  ,this.height  );
    ctx.fillStyle= this.color;
    
    ctx.fill();
    ctx.font="12px Verdana";
    
    ctx.strokeText(this.name, this.positionX+this.width/2, this.positionY+this.height/2, this.width);
    ctx.closePath();
    ctx.stroke();
   
   };
   Shape.prototype.clear = function() {
       
       ctx.clearRect(this.positionX, this.positionY, this.width*2+5,this.height*2+5); 
       
       
   };
   Shape.prototype.clone = function() {
      this.positionX =this.positionX+ 50;
     
      this.draw();
     
   }; 
   Shape.prototype.checkCollision= function (oObject){
          
        if (this.positionX < oObject.positionX + oObject.width  && this.positionX + this.width  > oObject.positionX
        &&
            this.positionY < oObject.positionY + oObject.height && this.positionY + this.height > oObject.positionY) {
          //alert("collision");
           
           this.flip();
           this.draw();
           //alert("colission");
           this.direction = (this.direction)*-1 ;
          
           this.draw();
         }};
   
   
   
   
 //*****************************************************************************  
 var Enemy = function(e_anzahl){
         
     
     posX = roundIt(Math.floor((Math.random() * 400) + 0));
     posY = roundIt(Math.floor((Math.random() * 400) + 0));
  
   this.direction = 2;
   this.ydirection= 2;
   this.continous = 25;
   this.step      = 0;
   this.rnd = 0;
   this.art = "enemy";
   this.img = new Image();
   this.img.src ='pacman.png';
   this.isRight = true;
   
   
   this.name   = "enemy_"+e_anzahl;
   this.shapes =  []   ;
   //this.positionX =  position[Math.floor((Math.random() * 8) + 0)]+margin; //event.pageX - _canvas.offsetLeft;
   //this.positionY =  position[Math.floor((Math.random() * 6) + 0)]+margin; //event.pageY - _canvas.offsetTop;
   this.positionX = posX+margin;
   this.positionY = posY+margin;
   this.width     =  32;
   this.height    =  32;
   //this.color     =  getRandomColor();
   //this.randomizerColor();
   //position x/y 0 50 100 150 200 250 300 350 
   //             0 50 100 150 200 250 300 350
       
  
       
   };
   
   
   Enemy.prototype.flip = function(){
       // this.clear();
        if (this.isRight === true) {
        this.img.src ='pacmanleft.png';
        this.isRight=false;
        this.draw();
        //alert("isright");
        }
        if ( this.isRight === false) {
        this.img.src ='pacman.png';
        this.draw();
        this.isRight=true;
        // alert("isleft");
        }
        
        
    } 
  //****************************************************************************

   Enemy.prototype.draw= function() {
     //this.img.src='pacmanleft.png';   
    ctx.save();
    ctx.drawImage(this.img, this.positionX , this.positionY,this.width,this.height );
    ctx.translate(this.positionX,this.positionY);
   
    ctx.restore();
      // alert('stroke anzahl'+anzahl);    
   };
   //***************************************************************************
   
   Enemy.prototype.clear= function(){
       ctx.clearRect(this.positionX-2, this.positionY-2, this.width+10, this.height+10);
   };
   
   Enemy.prototype.walk= function(){
      this.continous--;
      if( this.positionX >= _canvas.width-this.width-30){
      
         this.direction=-enemySpeed;
         this.img.src = 'pacmanleft.png';
         //alert ("direction:"+direction);
     }
     
         if( this.positionX <= 0+30){
      //alert(" positionX: "+enemy.positionX+"canvas:"+ _canvas.widht-enemy.width);
         this.direction=enemySpeed;
         this.img.src = 'pacman.png';
         //alert ("direction:"+direction);
     }
      this.positionX +=this.direction ; 
      // this.draw();
   };
    
   Enemy.prototype.walkup= function(){
          
      this.rnd =Math.floor((Math.random() * this.continous) + 0);  
       this.continous--; 
      if (this.rnd <= 10) {
          
          if( this.positionY >= _canvas.height -this.width-30){
              this.ydirection=-enemySpeed;  
            }
     
          if( this.positionY <= this.height+30){
      
              this.ydirection=enemySpeed;
       
     }
       this.positionY += this.ydirection ;
      
      
     
              }
       
   };
   
   Enemy.prototype.checkCollision= function (oObject){
          
        if (this.positionX < oObject.positionX + oObject.width  && this.positionX + this.width  > oObject.positionX
        &&
            this.positionY < oObject.positionY + oObject.height && this.positionY + this.height > oObject.positionY) {
          //alert("collision");
           this.direction = (this.direction)*-1 ;
          
            //this.walk();
            this.flip();
         }};
   
   
  //****************************************************************************     
  // };
   
     var createEnemy = function(i){
     
       enemy = new Enemy(i) ;
      //enemy.draw();
      
      allEnemies.push(enemy);  
      //alert("enemies pushed");
   };


     var createFruit = function(i){
     
       fruit = new Fruit(i) ; 
      
       fruits.push(fruit); 
       //fruits.
      //alert("enemies pushed");
   };


     var createHero = function(){
      hero = new Hero() ;
      //enemy.draw();
      allPlayers.push(hero);
        
   };


  var renderUpdate= function(){
    ctx.clearRect(0,0,_canvas.width,_canvas.height);
    initGrid();
    
       ctx.strokeText("Punkte: "+Points, 400,20,100,100);
      _points.innerHTML= Points;
      
    hero.draw();
     
        fruits.forEach(function(fruit) {
         //player.clear();
         
         hero.checkCollision(fruit);
          
         fruit.draw();      
     });
    
   
    allEnemies.forEach(function(enemy) {
    
     // alert(" positionX: "+enemy.positionX +"canvas:"+ _canvas.width);//-enemy.width);
     
     hero.checkCollision(enemy);
     enemy.draw();
    
      bricks.forEach(function(brick) {
           
             enemy.checkCollision(brick); 
             hero.checkCollision(brick);
             //enemy.flip();
             brick.draw();
    });
      
      enemy.walk();
      
      
      //enemy.walkup();
      
     

        }
                 
    );
    
    
   
 };
  var createEnemies= function(){
   var i=1 ;
   
     createHero();
     createShapes(20); 
    while(i <= 12)
    { 
     createEnemy(i);
     createFruit(i);
     i++;
    }     
  } ;
   
  


//var interval = setInterval(mainLoop, 500);
   var mainloop = function() {
       // updateGame();
       // drawGame();
        
   if (anzahl === 0) {
     init();
     createEnemies();
   
     anzahl++;
      }
   // myAudio = new Audio("running-water-01.wav");
       
    myAudio = new Audio("beep-02.wav");
    slurpAudio = new Audio("bubbling2.wav");
    renderUpdate();
    anzahl++;
    //requestAnimFrame(mainLoop);
    };
   var animFrame = window.requestAnimationFrame ||
             window.webkitRequestAnimationFrame ||
             window.mozRequestAnimationFrame    ||
             window.oRequestAnimationFrame      ||
             window.msRequestAnimationFrame     ||
             null ;

    if ( animFrame !== null ) {
        var canvas = $('canvas').get(0);

        if ( 1==2) {
            var recursiveAnim = function() {
                mainloop();
                animFrame();
            };

            // setup for multiple calls
            window.addEventListener("MozBeforePaint", recursiveAnim, false);

            // start the mainloop
            animFrame();
        } else {
            var recursiveAnim = function() {
                mainloop();
                animFrame( recursiveAnim, canvas );
            };

            // start the mainloop
            animFrame( recursiveAnim, canvas );
        }
    } else {
        var ONE_FRAME_TIME = 1000 / 60.0 ;
        setInterval( mainloop, ONE_FRAME_TIME );
    }


    
 window.addEventListener('keydown', function(event) {
  switch (event.keyCode) {
    case 37: // Left
     
     hero.walkleft();
    break;

    case 38: // Up
     hero.walkup();
    break;

    case 39: // Right
     hero.walkright();
    break;

    case 40: // Down
    hero.walkdown();
    break;
  }
}, false);