Heim > Artikel > Web-Frontend > So implementieren Sie ein Puzzle in js objektorientiert

So implementieren Sie ein Puzzle in js objektorientiert

零到壹度Original: 2018-04-04 13:46:591836Durchsuche

In diesem Artikel wird hauptsächlich die objektorientierte Implementierung von Puzzles in js vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Schauen Sie sich den Editor an

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 🎜>

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. Spielbildmaterialien

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Puzzle in js objektorientiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Praktische Analyse der Ajax-AnwendungNächster Artikel：Praktische Analyse der Ajax-Anwendung

In Verbindung stehende Artikel

Mehr sehen