html 拼图游戏,HTML 和 JS 的拼图游戏

html

拼图

.picture{

border: 1px solid black;

}

拼图

低

高

Js

var context=document.getElementById('puzzle').getContext('2d');

var img=new Image();

img.src='defa.jpg';

img.addEventListener('load',drawTiles,false);

var boardSize=document.getElementById('puzzle').width;

var titleCount=document.getElementById('scale').value;

var titleSize=boardSize/titleCount;

var clickLoc=new Object;

clickLoc.x=0;

clickLoc.y=0;

var emptyLoc=new Object;

emptyLoc.x=0;

emptyLoc.y=0;

var solved=false;

var boardPants=new Object;

setBoard();

document.getElementById('scale').οnchange=function(){

titleCount=this.value;

titleSize=boardSize/titleCount;

setBoard();

drawTiles();

};

记录鼠标的位置，通过onmousemove和onclick来判断点移动

document.getElementById('puzzle').οnmοusemοve=function(e){

clickLoc.x=Math.floor((e.pageX-this.offsetLeft)/titleSize);

clickLoc.y=Math.floor((e.pageY-this.offsetTop)/titleSize);

};

document.getElementById('puzzle').οnclick=function(){

if (distance(clickLoc.x,clickLoc.y,emptyLoc.x,emptyLoc.y)==1){

slideTile(emptyLoc,clickLoc);

drawTiles();

}

if (solved){

setTimeout(function(){

alert('You solved it!');

},500);

}

};

function setBoard(){

boardPants=new Array(titleCount);

for (var i=0;i

boardPants[i]=new Array(titleCount);

for (var j=0;j

boardPants[i][j]=new Object;

boardPants[i][j].x=(titleCount-1)-i;

boardPants[i][j].y=(titleCount-1)-j;

}

}

emptyLoc.x=boardPants[titleCount-1][titleCount-1].x;

emptyLoc.y=boardPants[titleCount-1][titleCount-1].y;

solved=false;

}

function drawTiles(){

context.clearRect(0,0,boardSize,boardSize);

for (var i=0;i

for (var j=0;j

var x=boardPants[i][j].x;

var y=boardPants[i][j].y;

if (i!=emptyLoc.x||j!=emptyLoc.y||solved==true){

context.drawImage(img,x*titleSize,y*titleSize,titleSize,titleSize,i*titleSize,j*titleSize,titleSize,titleSize);

}

}

}

}

function distance(x1,y1,x2,y2){

return Math.abs(x1-x2)+Math.abs(y1-y2);

}

function slideTile(toLoc,fromLoc){

if (!solved){

boardPants[toLoc.x][toLoc.y].x=boardPants[fromLoc.x][fromLoc.y].x;

boardPants[toLoc.x][toLoc.y].x=boardPants[fromLoc.x][fromLoc.y].y;

boardPants[fromLoc.x][fromLoc.y].x=titleCount-1;

boardPants[fromLoc.x][fromLoc.y].y=titleCount-1;

toLoc.x=fromLoc.x;

toLoc.y=fromLoc.y;

checkSolved();

}

}

判断结束

function checkSolved(){

var flag=true;

for (var i=0;j

for (var j=0;j

if (boardPants[i][j].x !=i||boardPants[i][j].y !=j){

flag=false

}

}

}

solved=flag;

}

效果