js面向對象之如何實現拼圖游戲

來源：懂視網責編：小OO 時間：2020-11-27 19:56:33

js面向對象之如何實現拼圖游戲

一、html代碼。<；，<。DOCTYPE html>；<；html lang="；en"；>；<；head>；<；meta charset="；UTF-8"；>；<；title>；拼圖小游戲<；/title>；<；style>；body。二、js代碼；

推薦度：

點擊下載本文 文檔為doc格式

導讀一、html代碼。<；，<。DOCTYPE html>；<；html lang="；en"；>；<；head>；<；meta charset="；UTF-8"；>；<；title>；拼圖小游戲<；/title>；<；style>；body。二、js代碼；

這篇文章主要介紹了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('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(); 
	}	
}

二、游戲圖片素材