4WinBoard_Demo.js

var xmlHttp; 
var Board;
var currentchip ;
var currentplayer;   ;
var lastchip ={color:"yellow"};
var wincounter =4 ;


function httpGet(theUrl)
{
         xmlHttp = new XMLHttpRequest();
         xmlHttp.onreadystatechange = ProcessRequest;
         xmlHttp.open( "GET", theUrl, false );
    
var ProcessRequest = function () {
  
    return xmlHttp.responseText;
};
};

$( document ).ready(function() {
   
      start_game();
         
});


var start_game = function(){
    

        p1       = new Player();
        p1.id    = 1; 
        p1.name  = "Erster";
        p1.color = "Yellow";
        p1.chip  = new Chip("p1.color");
        p1.coins = 0;
        p1.status="Y";
        
        
        p2       = new Player();
        p2.id    = 2;
        p2.name  = "Zweiter";
        p2.color = "Red";
        p2.chip  = new Chip("p2.color");
        p2.coins = 0;
        p2.status="R";
        
        currentplayer= p1 ;
        
        
        Board = new board();
        Board.sbctx.font="20px Georgia";
        Board.sbctx.strokeText("Welcome to 4WINS BATTLE",10,50);
        Board.sbctx.strokeText(p1.name+" : "+p2.name,10,100);
        Board.sbctx.strokeText("CLICK ON Board : "+p1.name,10,180);
        
        Board.createMatrix();
        Board.generateSzenario();
        Board.drawMatrix();
    
}

var Player= function(){
   this.id =1   ;
   this.name ="Player";
   this.color    ;
   this.chip     ;
   this.coins    ;
   this.file = "";
};



var Chip = function(col){
    this.pos = {};
    this.pos.x ="";
    this.pos.y ="";
    this.radius = 40;
   // alert("new chip"+ e.pageX +" : "+ e.pageY) ;
    this.img    = new Image();
    this.width  = this.radius;
    this.height = this.radius;
    this.color  = col   ;
    this.name   = "";
   
    if (this.color === "Yellow"){
         this.img.src = "img/chipyellow.png";
         this.name   = "Y";
    };
       if (this.color === "Red"){
         this.img.src = "img/chipred.png";
          this.name   = "R";
    };
    
 
    
    };


Chip.prototype.draw = function(e) {
       isSet=0;
      this.pos = getCoord(e);
      //alert(this.pos.x +":"+this.pos.y);
      //this.img.onload = function(){};
      
     // this.img.onload = function(){alert("loaded")};
      
          
    while(Board.checkMatrix(this.pos)===1){
           
         // Board.ctx.clearRect(this.positionX-this.radius/2+17 , this.positionY-this.radius/2+8, this.width+8,this.height+25);
           this.positionX   = this.pos.x*Board.cellWidth   ;
           this.positionY   = this.pos.y*Board.cellHeight  ;
          Board.drawMatrix(); 
           if (this.pos.y === 9 ){
               isSet=1;
               Board.setMatrix(this.pos.y,this.pos.x,this.name); 
            break;
            }
            else 
            {     
          //Board.setMatrix(this.pos.y-1,this.pos.x,this.name); 
            this.pos.y +=1;   
        };};
    
       // alert ("out setzte:"+this.pos.y+"status"+this.name);
        if (isSet === 0){
              this.pos.y-- ;
        Board.setMatrix(this.pos.y,this.pos.x,this.name); 
      
               }
        Board.ctx.drawImage(this.img, this.positionX-this.radius/2+5 , this.positionY-this.radius/2+5,this.width*2,this.height*2 );
        
   } ;
          
  
    
var getCoord = function(e) {
    var pos={};
    posa   = e.pageX - Board.canvas.offsetLeft;
    posb  =  e.pageY - Board.canvas.offsetTop;
   
    
    pos.x  = Math.ceil(posa/50)-1 ;
    pos.y  = Math.ceil(posb/50)-1 ;
    //Math.ceil(n / 50) * 50;
    // alert(pos.x +"- :- "+pos.y);
     
    return pos;

};


var clicker = function(e){
    var nextplayer ;
      
       //currentchip = p1.chip;
        Board.sbctx.clearRect(0,0,300,300);
        Board.sbctx.font="15px Georgia";
        Board.sbctx.strokeText("Am ZUG:                 \n\
       -->  move#"+ currentplayer.name  ,10,20);
        Board.sbctx.font="25px Georgia";
        Board.sbctx.strokeText("Spieler : "+p1.name,10,50);
        Board.sbctx.strokeText("Score: "+  p1.coins,10,80);
     
     
        Board.sbctx.font="15px Georgia";
  
   
        Board.sbctx.font="25px Georgia";
        Board.sbctx.strokeText("Spieler : "+p2.name,10,150);
        Board.sbctx.strokeText("Score: "+  p2.coins,10,180);
       //currentplayer = p1 ;
          if (currentplayer.id ===1) {
              //alert("jetzt clickts");
              currentplayer = p1;
              p1.chip = new Chip(currentplayer.color);
              nextplayer =p2;
          }
          else 
          {  currentplayer = p2;
              p2.chip = new Chip(currentplayer.color);
             
                nextplayer =p1;
           } ;
  
       currentplayer.chip.draw(e); 
       Board.drawMatrix()  ;
       //alert("BOARD: "+currentplayer.chip.pos.y +" "+currentplayer.chip.pos.x);
       Board.checkWin(currentplayer.chip.pos);
       currentplayer.coins++;
       currentplayer = nextplayer ;
       
       
    };
    
    
   


var board = function(){
     
      this.qm = new Image();
      this.qm.src = "img/questionmark.png";
     
    this.width    = 500 ;
    this.height   = 500 ;
    
    this.canvas       = document.getElementById("Board1");
    this.scoreBoard   = document.getElementById("Board2");
    this.canvas.id    = "canvas";

    this.canvas.style.border = "silver 4px solid";
    
    this.canvas.width        = this.width ;
    this.canvas.height       = this.height ;
    this.canvas.classList.add("ccanvas");
    this.ctx   = this.canvas.getContext('2d');
    this.sbctx = this.scoreBoard.getContext('2d');
    this.canvas.addEventListener("click",clicker);
    


this.cols  = 10 ;
this.rows  = 10 ;

this.cellWidth   =   this.canvas.width  / this.cols;
this.cellHeight  =   this.canvas.height / this.rows;

this.matrix =[];

 // board[i] = new Array(9);

this.createMatrix = function(){
  for (i=0;i<=this.rows-1;i++) {
      this.matrix[i] = new Array(10);
       for(j=0;j<=this.cols-1;j++) {
          this.matrix[i][j] = "-" ;
         // alert("this.matrix[i[j]] :"+ this.matrix[i[j]] );
          //this.ctx.strokeText(i+":"+j,i*this.cellWidth+this.cellWidth/2,j*this.cellHeight+this.cellHeight/2 );
          
     };
  
 };
};

this.setMatrix = function(x,y,z) {
   //alert("setze matrix"+y+":"+x);
  this.matrix[x][y] =z;
  
  
};


this.generateSzenario = function(){
    for (i=1;i<=10;i++) {
       x = Math.floor(Math.random() * 10) + 0;
       y = Math.floor(Math.random() * 10) + 0;
      // alert(y+":"+x);
    this.setMatrix(y,x,"S");
   
    };
      this.drawMatrix();
};


this.drawMatrix = function(){
  for (i=0;i<=10-1;i++) {
       for(j=0;j<=10-1;j++) {
        
        if(this.matrix[i][j] === 'S') {
        //this.setMatrix(i,j,);
        this.ctx.fillStyle="white";
        this.ctx.fillRect((j)*this.cellWidth+5,(i)*this.cellHeight+5,this.cellWidth-5,this.cellHeight-5);
        this.ctx.drawImage(this.qm,(j)*this.cellWidth+5,(i)*this.cellHeight+5,this.cellWidth-5,this.cellHeight-5) ;
         
        
        }
        this.ctx.strokeRect((j)*this.cellWidth,(i)*this.cellHeight,this.cellWidth,this.cellHeight);
        //this.ctx.strokeText(this.matrix[i][j],(j)*this.cellWidth+this.cellWidth/2,(i)*this.cellHeight+this.cellHeight/2 );
     
     };
  
 };
};
this.checkWin = function(newPosition){
  var   eq=0;
    x   = newPosition.x ;
    y   = newPosition.y ;
    limx = x+3;
    minx = x-3;
    
     limy = 0;
     miny = 9;
    
    
    // CHECK X LINE POS +- 3
   // alert("status:"+this.matrix[y][x]);
       for(minx ; minx<=limx;minx++) {
       // alert("checking fileds:"+"x: "+minx +"y: "+y+"for: "+currentplayer.chip.name);
        if(this.matrix[y][minx] === currentplayer.chip.name) {
          //  alert("x: "+minx +"y: "+y + currentplayer.chip.name);
        eq++;}
        else {
        eq=0;   
        }
        if (eq===4){
        Board.sbctx.clearRect(0,0,300,300);
        Board.sbctx.font="30px Georgia";   
        Board.sbctx.strokeText("Winner is  : "+currentplayer.chip.name,10,180);      
        alert("Win: "+currentplayer.name +":"+eq);
        Board.ctx.clearRect(0,0,500,500);
        Board.createMatrix();
        Board.drawMatrix();
      
    
          start_game();
        //break;
        }
        };
        
        for(miny ; miny>=limy;miny--) {
        //alert("checking fileds:"+"x: "+minx +"y: "+y+"for: "+currentplayer.chip.name);
        if(this.matrix[miny][x] === currentplayer.chip.name) {
         //alert("x: "+miny +"y: "+y + currentplayer.chip.name);
        eq++;}
        else {
        eq=0;   
        }
        if (eq===4){
        Board.sbctx.clearRect(0,0,300,300);
        Board.sbctx.font="30px Georgia";   
        Board.sbctx.strokeText("Winner is  : "+currentplayer.chip.name,10,180);  
        alert("Win: "+currentplayer.name +":"+eq);
        Board.ctx.clearRect(0,0,500,500);
        Board.createMatrix();
        Board.drawMatrix();
        start_game();
   
      
        //break;
        }
        };
        
  
        
        
     };
   


this.checkMatrix = function(pos){
//alert("pos.y"+pos.y +": "+this.matrix[pos.y][pos.x]);

 if ( this.matrix[pos.y][pos.x] === '-'){
     return 1;    
     }
 else {
     return 2;};
     };

};


function sleepFor( sleepDuration ){
    var now = new Date().getTime();
    while(new Date().getTime() < now + sleepDuration){ /* do nothing */ } 
}

Demo 4WIN
using JavaScript Canvas and Prototype 4 OOP Design
draw on Canvas