一、html代码
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>拼图小游戏</title> <style> body,td { margin:0; padding:0; } #begin { display:block; margin:20px auto; } table { margin:80px auto; background:#fff; border:10px solid pink; } td { width:100px; height:100px; border:1px solid #ccc; cursor:pointer; background:url(img.jpg) no-repeat; } </style> <script src="js.js"></script> <script> window.onload = function(){ var thisgame = new pintugame('begin'); } </script> </head> <body> <button id="begin">开始</button> </body> </html>
二、js代码
function pintugame(id){ var that = this; this.obtn = document.getelementbyid(id); this.otable = document.createelement('table'); this.otbody = document.createelement('tbody'); this.atd = null; this.atdmsg = []; //用于存储每个图片的信息 this.num = 0; //用于判断拼图是否完成 this.otable.cellspacing = '0'; this.createelem(); //初始化游戏界面 this.obtn.onclick = function(){ for(var i = 0; i<that.atd.length; i++){ that.atd[i].style.opacity = 1; } this.innerhtml = '重新开始'; that.atd[that.atd.length-1].style.opacity = 0; var ialpha = 100; var sp = -10; var timer = setinterval(function(){ ialpha += sp; that.otbody.style.opacity = ialpha / 100; if(ialpha <=0) { sp = -sp; that.randomelem();} if(ialpha > 100) {clearinterval(timer) }; },15); that.begingame(); } } pintugame.prototype = { //初始化游戏界面 createelem: function(){ for(var i =0; i<4; i++){ var otr = document.createelement('tr'); for(var j =0; j<4; j++){ var otd = document.createelement('td'); this.num ++; var tdmsg = { seq: this.num, bgposition: -100*j+'px '+ -100*i+'px' }; this.atdmsg.push(tdmsg); otr.appendchild(otd); } this.otbody.appendchild(otr); } this.otable.appendchild(this.otbody); document.body.appendchild(this.otable); this.atd = this.otbody.getelementsbytagname('td'); for(var i = 0; i<this.atd.length; i++){ this.atd[i].json = this.atdmsg[i]; this.atd[i].style.backgroundposition = this.atd[i].json.bgposition; } }, randomelem: function(){ //随机排序图片 this.atdmsg.sort(function (){ return math.random()-0.5; }); for(var i=0;i<this.atd.length;i++){ this.atd[i].json = this.atdmsg[i]; this.atd[i].style.backgroundposition = this.atd[i].json.bgposition; } }, begingame: function(){ //开始游戏 var that = this; var rows = this.otbody.rows; for(var i =0; i<4; i++){ for(var j =0; j<4; j++){ rows[i].cells[j].y = i; rows[i].cells[j].x = j; rows[i].cells[j].onclick = function(){ var arr = [ //获取该图片的上右下左，四个方向的坐标 [this.y-1, this.x], [this.y, this.x+1], [this.y+1, this.x], [this.y, this.x-1] ]; for(var i = 0; i<arr.length; i++){ if( arr[i][0]<0 || arr[i][1]<0 || arr[i][0]>3 || arr[i][1]>3)continue; if( rows[arr[i][0]].cells[ arr[i][1] ].style.opacity == '0' ){ rows[arr[i][0]].cells[ arr[i][1] ].style.opacity = 1; this.style.opacity=0; //与隐藏的td交换json对象 var thisjson = this.json; this.json = rows[arr[i][0]].cells[ arr[i][1]].json; rows[arr[i][0]].cells[arr[i][1]].json = thisjson; //与隐藏的td交换bakcground-position this.style.backgroundposition=this.json.bgposition; rows[arr[i][0]].cells[arr[i][1]].style.backgroundposition=rows[arr[i][0]].cells[arr[i][1]].json.bgposition; } } that.checkwin(); }; } } }, checkwin: function(){ //检测游戏是否完成 var ajson = []; for(var i = 0; i<this.atd.length; i++){ ajson.push(this.atd[i].json.seq); } for(var i = 0; i<ajson.length-1; i++){ if(ajson[i]>ajson[i+1])return; } for(var i = 0; i<this.atd.length; i++){ this.atd[i].style.opacity = 1; } alert('恭喜，胜利啦！'); location.reload(); } }
二、游戏图片素材
以上就是js面向对象之如何实现拼图游戏的详细内容。