Rumah > Artikel > hujung hadapan web > js面向对象之如何实现拼图游戏

js面向对象之如何实现拼图游戏

零到壹度asal: 2018-04-04 13:46:591892semak imbas

这篇文章主要介绍了js面向对象之如何实现拼图游戏,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

二、游戏图片素材

Atas ialah kandungan terperinci js面向对象之如何实现拼图游戏. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：ajax的应用实战解析Artikel seterusnya：ajax内部值无法在外部调用的解决方法

Artikel berkaitan

Lihat lagi