$(function(){
function PuzzleGame(){
this.attributeHandler()
}
PuzzleGame.prototype=$.extend(PuzzleGame.prototype,{
attributeHandler:function(){
this.kBoardWidth = 3; //column count
this.kBoardHeight =3; //rouw count
this.kPieceWidth =99; //every pic width
this.kPieceHeight =99; //every pic height
this.kPixelWidth = 2 + this.kBoardWidth * this.kPieceWidth; //canvas'width
this.kPixelHeight = 2 + this.kBoardHeight * this.kPieceHeight; //canvas'height
this.exchangeTimes = 100; //change Times
this.simulator; //canvasObj
this.gDrawingContext; //canvasÔªËصÄcontextÄÚÈÝ
this.gMoveCountElem; //Òƶ¯²½ÊýÔªËؽڵã
this.gMoveCount; //
this.gPieces; //all pices array
this.gNumPieces;
this.initGame();
this.winFlg=0; //win mark
this.orderIndex=new Array();
},
initGame:function(){
var self=this;
this.timeStamp=["00",90]; // game tiem
this.simulator = $("#edit-simulator");
this.gDrawingContext=this.simulator[0].getContext("2d");
this.simulator.width(this.kPixelWidth);
this.simulator.height(this.kPixelHeight);
this.gMoveCountElem = this.moveCountElement;
this.gMoveCount = 0;
var img = new Image(); // Create new Image object
img.onload = function(){
self.newGame(0);
var start=0;
var first=1;
$("#start-stop").click(function(){
$("#sweep").remove();
if(!start){
start=1;
if(first){
first=0;
self.newGame(1);
}
$(this).css("background-image","url(/images/example/stop.png)");
self.count=window.setInterval(function(){
// if(self.timeStamp[1]==0 && self.timeStamp[0]){
// self.timeStamp[0]--;
// self.timeStamp[1]=60;
// }
self.timeStamp[1]--;
var second=self.timeStamp[1]<10?"0"+self.timeStamp[1]:self.timeStamp[1];
var minite=self.timeStamp[0];
$("#timer").text(minite+":"+second);
self.timer= Number(self.timeStamp[1]);
if(self.timer==0&&self.winFlg
$(".maskOver").show();
$(".maskOver .againBtn").click(function(){
$(".maskOver").hide()
self.initGame();
});
$(".maskOver .quitBtn").click(function(){
$(".maskOver").hide()
self.initGame();
});
}else if((self.winFlg==self.kBoardWidth*self.kBoardHeight-1)&&self.timer>=0){
window.clearInterval(self.count);
alert("you win")
}
$("#tip").click(function(){
for(var i=0; i
var p=self.gPieces[i];
var p2=self.originalPieces
var column = p.column;
var row = p.row;
var index = p.index;
var _row = parseInt(index/self.kBoardWidth);
var _column = index-_row*self.kBoardWidth;
var sy = _row*self.kPieceWidth;
var sx = _column*self.kPieceHeight ;
var dx = column * self.kPieceWidth;
var dy = row * self.kPieceHeight;
self.gDrawingContext.font = "italic 30px sans-serif";
self.gDrawingContext.textBaseline="middle"
// this.gDrawingContext.strokeText(p.index+1, dx,dy);
var order= 0;
// if(isNaN(self.orderIndex[order])) //alert(row+"----"+column+"")
for(var j=0;j
alert(p2[j].column);
if(p2[j].row==row && p2[j].column==column){
order = p2[j].index;
}
}
break;
self.gDrawingContext.fillText(order, sx,sy+50);
}
})
}, 1000);
}else{
start=0;
window.clearInterval(self.count);
$(this).css("background-image","url(/images/example/memoryGame_play.png)");
$("#edit-simulator").after("");
}
self.startGame();
})
}
img.src =$("#pic").attr("src");
},
newGame:function(flg){
var gMoveCount = 0;
$("#movecount").text(gMoveCount);
var timer1=this.timeStamp[0];
var timer2=this.timeStamp[1]<10?"0"+this.timeStamp[1]:this.timeStamp[1];
$("#timer").text(timer1+":"+timer2);
this.gPieces = new Array(this.kBoardWidth * this.kBoardHeight-1);
this.originalPieces=new Array(this.kBoardWidth * this.kBoardHeight-1);
//put every pic's attribute to an 2d array
for(var i=0; i
var column = i-row*this.kBoardWidth;
this.gPieces[i]=new Cell(row,column,i);
this.originalPieces[i]=new Cell(row,column,i);
}
function Cell(row,column,index){
this.row = row; //every pic's row info
this.column = column; //every pic's column info
this.index = index; //every pic's index info
}
//put the blank pic'info to last one
this.gPieces[this.kBoardWidth*this.kBoardHeight-1] = new Cell(this.kBoardHeight-1,this.kBoardWidth-1,-1);
this.originalPieces[this.kBoardWidth*this.kBoardHeight-1] = new Cell(this.kBoardHeight-1,this.kBoardWidth-1,-1);
this.gNumPieces = this.gPieces.length;
if(flg) this.randExchange();
this.gDrawingContext.clearRect(0, 0, this.kPixelWidth, this.kPixelHeight);//clear the rected canvas
// game canvas inilization
for(var i=0; i
var order=this.originalPieces[i].row * this.kBoardWidth+this.originalPieces[i].column;
this.orderIndex[order]=this.originalPieces[i].index;
}
//draw pic's border
this.drawBoard();
},
drawBoard:function(){
var self=this;
self.gDrawingContext.beginPath();
//draw x horizontal ordinate
self.gDrawingContext.lineWidth=4
for (var x = 0; x <= self.kPixelWidth; x += self.kPieceWidth) {
self.gDrawingContext.moveTo(0.5 + x, 0);
self.gDrawingContext.lineTo(0.5 + x, self.kPixelHeight);
}
//vertical ordinate
for (var y = 0; y <= self.kPixelHeight; y += self.kPieceHeight) {
self.gDrawingContext.moveTo(0, 0.5 + y);
self.gDrawingContext.lineTo(self.kPixelWidth, 1.5 + y);
}
//modified the board's style
self.gDrawingContext.strokeStyle = "#fff";
self.gDrawingContext.stroke();
},
randExchange:function(){//random the order of the pics
var temp1,temp2,temp3;
for(var i=0; i
temp2 = parseInt(this.kBoardWidth*this.kBoardHeight*Math.random());
//change the any two column for random
temp3 = this.gPieces[temp1].column;
this.gPieces[temp1].column = this.gPieces[temp2].column;
this.gPieces[temp2].column = temp3;
temp3 = this.gPieces[temp1].row;
this.gPieces[temp1].row = this.gPieces[temp2].row;
this.gPieces[temp2].row = temp3;
}
},
drawPiece:function(p){
var column = p.column;
var row = p.row;
var index = p.index;
var _row = parseInt(index/this.kBoardWidth);
var _column = index-_row*this.kBoardWidth;
var sy = _row*this.kPieceWidth;
var sx = _column*this.kPieceHeight ;
var dx = column * this.kPieceWidth;
var dy = row * this.kPieceHeight;
var pic = document.getElementById("pic");
this.gDrawingContext.drawImage(pic,sx,sy,this.kPieceWidth,this.kPieceHeight,dx,dy,this.kPieceWidth,this.kPieceHeight);
},
startGame:function(){
var self=this;
$("#edit-simulator").click(function(e){
var emptyPieceNum = self.kBoardWidth*self.kBoardHeight-1;
var validMove = false;
var mouseX,mouseY;
if(e.pageX && e.pageY){
mouseX=e.pageX;
mouseY=e.pageY;
}else{
mouseX=e.clientX;
mouseY=e.clientY;
}
mouseX-=$(this).offset().left;
mouseY-=$(this).offset().top;
for(var i=0; i
var picrightborder= (self.gPieces[i].column+1) * self.kPieceWidth;
var pictopborder = self.gPieces[i].row*self.kPieceHeight;
var picbuttonborder =( self.gPieces[i].row+1)*self.kPieceHeight;
var isLeft=self.gPieces[i].row==self.gPieces[emptyPieceNum].row && self.gPieces[i].column==self.gPieces[emptyPieceNum].column-1;
var isRight=self.gPieces[i].row==self.gPieces[emptyPieceNum].row && self.gPieces[i].column==self.gPieces[emptyPieceNum].column+1;
var isTop=self.gPieces[i].column==self.gPieces[emptyPieceNum].column && self.gPieces[i].row==self.gPieces[emptyPieceNum].row-1;
var isButton=self.gPieces[i].column==self.gPieces[emptyPieceNum].column && self.gPieces[i].row==self.gPieces[emptyPieceNum].row+1;
var isBetween=mouseX >=picleftborder && mouseX<= picrightborder && mouseY>=pictopborder&&mouseY<=picbuttonborder;
if(self.gPieces[emptyPieceNum].column-1>=0 && isLeft && isBetween){
//if on the left
self.gPieces[i].column += 1;
self.gPieces[emptyPieceNum].column -= 1;
validMove = true;
break;
//if on the right
}else if(self.gPieces[emptyPieceNum].column+1
self.gPieces[emptyPieceNum].column += 1;
validMove = true;
break;
//if on the top
}else if(self.gPieces[emptyPieceNum].row-1>=0 && isTop && isBetween){
self.gPieces[i].row += 1;
self.gPieces[emptyPieceNum].row -= 1;
validMove = true;
break;
//if on the button
}else if(self.gPieces[emptyPieceNum].row+1
self.gPieces[emptyPieceNum].row += 1;
validMove = true;
break;
}
}
if(validMove){
self.winFlg=0
self.gDrawingContext.clearRect(0, 0, self.kPixelWidth, self.kPixelHeight);
for(var i=0; i
if(self.gPieces[i].column==self.originalPieces[i].column&&self.gPieces[i].row==self.originalPieces[i].row&&self.gPieces[i].index==self.originalPieces[i].index){
self.winFlg++
}
}
self.drawBoard();
self.gMoveCount++;
$("#movecount").text(self.gMoveCount);
}
});
},
tipGame:function(p,p2){
var column = p.column;
var row = p.row;
var index = p.index;
var _row = parseInt(index/this.kBoardWidth);
var _column = index-_row*this.kBoardWidth;
var sy = _row*this.kPieceWidth;
var sx = _column*this.kPieceHeight ;
var dx = column * this.kPieceWidth;
var dy = row * this.kPieceHeight;
this.gDrawingContext.font = "italic 30px sans-serif";
this.gDrawingContext.textBaseline="middle"
// this.gDrawingContext.strokeText(p.index+1, dx,dy);
var order= row*3 + column;
if(isNaN(this.orderIndex[order])) alert(row+"----"+column+"")
this.gDrawingContext.fillText(this.orderIndex[order]+1, sx,sy+50);
}
})
;
var qedit= new PuzzleGame();
})
html5 canvas 实现的拼图游戏
转载于:https://www.cnblogs.com/weiweisuo/archive/2012/08/17/puzzle_game.html