Home  >  Article  >  Web Front-end  >  How to implement jigsaw puzzle in js object-oriented

How to implement jigsaw puzzle in js object-oriented

零到壹度
零到壹度Original
2018-04-04 13:46:591899browse

This article mainly introduces how to implement js object-oriented jigsaw puzzle. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor and take a look.

1. HTML code

<!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(&#39;begin&#39;);
}
</script>

</head>

<body>
<button id="begin">开始</button>
</body>
</html>

2. JS code

function PinTuGame(id){
	var that = this;
	this.oBtn = document.getElementById(id);
	this.oTable = document.createElement(&#39;table&#39;);
	this.oTbody = document.createElement(&#39;tbody&#39;);
	this.aTd = null;
	this.aTdMsg = [];		//用于存储每个图片的信息
	this.num = 0;			//用于判断拼图是否完成
	this.oTable.cellSpacing = &#39;0&#39;;
	
	this.createElem();		//初始化游戏界面
	this.oBtn.onclick = function(){
		for(var i = 0; i<that.aTd.length; i++){
			that.aTd[i].style.opacity = 1;	
		}
		this.innerHTML = &#39;重新开始&#39;;
		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(&#39;tr&#39;);
			for(var j =0; j<4; j++){
				var oTd = document.createElement(&#39;td&#39;);
				this.num ++;
				var tdMsg = {
					seq: this.num,
					bgPosition: -100*j+&#39;px &#39;+ -100*i+&#39;px&#39; 	
				};	
				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(&#39;td&#39;);
		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 == &#39;0&#39; ){
							
							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(&#39;恭喜,胜利啦!&#39;);
		location.reload();  
	}	
}

2. Game picture materials


# #

The above is the detailed content of How to implement jigsaw puzzle in js object-oriented. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn