当前位置:首页 > 博客 >Javascript > 正文

js游戏之五子棋

时间:2017-03-14 16:35   作者:admin   点击:

之前其实我有写过一个版本,但是那个是按照视频一步一步做的,这个是自己按思路来写的,更加深刻点,记录一下,主要是为了联系对js的面向对象编程。
地址:https://github.com/FengLin2016/javascript/blob/master/gobang.html

<!DOCTYPE html>    
<html lang="en">    
<head>    
	<meta charset="UTF-8">    
	<title>五子棋游戏</title>    
</head>    
<style>    
	*{margin:0;padding: 0;}    
	table{background: transparent url(images/bg.jpg) no-repeat -25px -25px; background-size: 100%; }    
	table td{width: 50px; height: 50px;}    
	table td.white{background: transparent url(images/white.png) no-repeat center center; background-size: 100%;}    
	table td.black{background: transparent url(images/black.png) no-repeat center center; background-size: 100%;}    
</style>    
<body>    
</body>    
<script>    
//声明类    
function goBang(){    
	this.at='black';    
	this.winer='';    
	this.gameOver=false;    
}    
//定义原型函数    
goBang.prototype={    
	//初始化    
	init:function(){    
		this.creatTable();    
		this.play();    
	},    
	//创建table    
	creatTable:function(){    
		var h='';    
		for(var i=0;i<15;i++){    
			h+='<tr>'    
			for(var j=0;j<15;j++){    
				h+='<td></td>'    
			}    
			h+='</tr>'    
		}    
		document.getElementsByTagName('body')[0].innerHTML='<table border="0" cellspacing="0" cellpadding="0">'+h+'</table>';    
	},    
	//下棋    
	play:function(){    
		var table=document.getElementsByTagName("table")[0];    
		var td   =document.getElementsByTagName("td");    
		var that =this;    
		table.onclick=function(e){    
			e=e||window.event;    
			var i = parseInt(e.clientX/50);    
			var j = parseInt(e.clientY/50);    
			if(table.getElementsByTagName("tr")[j].getElementsByTagName("td")[i].className!=''){    
				alert("此处已有棋子!");    
				return;    
			}    
			if(that.gameOver){    
				alert("此游戏已结束("+that.winer+"胜)!请刷新重新下!");    
				return;    
			}    
			if(that.at=='black'){    
				table.getElementsByTagName("tr")[j].getElementsByTagName("td")[i].className="white";    
				that.at="white";    
			}else{    
				table.getElementsByTagName("tr")[j].getElementsByTagName("td")[i].className="black";    
				that.at="black";    
			}    
			that.isWin(i,j);    
		}    
	},    
	//判断输赢    
	isWin:function(i,j){    
		var tds=document.getElementsByTagName("td");    
		var winLine=[[],[],[],[]],color='0';    
		for(t=0;t<tds.length;t++){    
			if(tds[t].className=='black'){    
				color='b';    
			}else if(tds[t].className=='white'){    
				color='w';    
			}else{    
				color='0';    
			}    
			//横行    
			if(j==tds[t].parentNode.rowIndex){    
				winLine[0]+=color;    
			}    
			//纵向    
			if(i==tds[t].cellIndex){    
				winLine[1]+=color;    
			}    
			//正斜    
			if((i+j)==(tds[t].cellIndex+tds[t].parentNode.rowIndex)){    
				winLine[2]+=color;    
			}    
			//反斜    
			if((i-tds[t].cellIndex)==(j-tds[t].parentNode.rowIndex)){    
				winLine[3]+=color;    
			}    
		}    
		if(winLine[0].indexOf("wwwww")>0||winLine[1].indexOf("wwwww")>0||winLine[2].indexOf("wwwww")>0||winLine[3].indexOf("wwwww")>0){    
			alert("白棋胜!");    
			this.winer="白";    
			this.gameOver=true;    
			return;    
		}    
		if(winLine[0].indexOf("bbbbb")>0||winLine[1].indexOf("bbbbb")>0||winLine[2].indexOf("bbbbb")>0||winLine[3].indexOf("bbbbb")>0){    
			alert("黑棋胜!");    
			this.winer="黑";    
			this.gameOver=true;    
			return;    
		}    
	}    
}    
new goBang().init();    
/*总结:    
	1、我之前写过一次这个游戏,现在写又忘了,当时的胜负判断的方式,这是这个游戏的重点    
	2、判断胜负用的是每次下一步棋都去遍历了整个棋盘,将横、竖、正斜、反斜等四个方向的className进行记录(存在一个二维数组中),然后直接去判断这个数组的四个方向上里面连续的wwwww和bbbbb就可以了。    
	3、上边的思路是有了,但是我觉得这样是不是太不简洁,因为每次下棋都要去遍历整个数组,我想的是根据当前下棋的位置来判断当前位置的横、竖、正斜、反斜等四个方向(横向向右如果和当前不一样就向左,一共计数五个就代表胜利!其他三个方向类似),来进行判断胜负。(待实验)??    
	4、后面等有时间再做看哈能不能实现机器自动下棋?    
*/    
</script>