↓返回底部
JS PHP HTML5 CSS3 jQuery SQL BootStrap5 Other
其他 字符串 数组 正则 存储 表单 数据库 选择器 屏幕 历史 时间 数学 元素 节点 属性 窗口 地址 动画 棋子 查找 排序 全局 JSON 浏览器 数据类型

js五子棋(20种情形)

<meta charset="utf-8">
<?php
define('MAX_INDEX',10);
define('CHESS_SIZE',40);
?>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
<style>
body{ background-color:#f5f5f5;}
.btn{ width:<?=CHESS_SIZE?>px; height:<?=CHESS_SIZE?>px; padding:0; margin:0; border:dotted 1px #f5f5f5; background-color:#ccc; font-size:10px; color:#aaa;}
#divWinner{ font-size:30px; color:red;}
</style>
<div id="divWinner"></div>

<table border="1">
<tr>
<td valign="bottom">y<br>↑</td>
<td><table border="0" cellpadding="0" cellspacing="0">
<?php for($y=MAX_INDEX-1;$y>=0;$y--):?>
<tr>
<?php for($x=0;$x<MAX_INDEX;$x++):?>
<td><button onclick="g.clickChess(this,<?=$x?>,<?=$y?>);" class="btn">x=<?=$x?><br>y=<?=$y?></button></td>
<?php endfor;?>
</tr>
<?php endfor;?>
</table>
</td>
</tr>
<tr>
<td valign="top" align="right">o</td>
<td>→x</td>
</tr>
</table>

<a href="?">重新来</a> | 
<a href="?" target="_blank">单独页面</a>
<div id="divTurn">黑棋先走</div>

<div id="divXY"></div>

<script>
var g = {
	index:0,
	maxIndex:<?=MAX_INDEX?>,
	//data[0][0] = 0;//空白位置
	//data[0][0] = 1;//黑棋
	//data[0][0] = 2;//白棋
	//data[0][0] = 3;//禁止下子
	data:[],
	initChessData:function(){
		for(var y=0;y<g.maxIndex;y++){
			g.data[y] = [];
			for(var x=0;x<g.maxIndex;x++){
				g.data[y][x] = 0;
			}
		}
	},
	gameOver:function(){
		for(var x=0;x<g.maxIndex;x++){
			g.data[x] = [];
			for(var y=0;y<g.maxIndex;y++){
				if(0==g.data[x][y]){
					g.data[x][y] = 3;
				}
			}
		}
	},
	isBlackChess:function(){
		if(0==g.index%2){
			return true;
		}
		return false;
	},
	clickChess:function(btn,x,y){
		if(0==g.data[x][y]){//非空白位置不能下子也
			if(g.isBlackChess()){
				btn.style.backgroundColor = '#666';
				g.data[x][y] = 1;
				g.checkWinner(x,y,1);
				divTurn.innerHTML = '当前是第'+(1+g.index)+'步,接下轮到白棋走';
			}
			else{
				btn.style.backgroundColor = 'white';
				g.data[x][y] = 2;
				g.checkWinner(x,y,2);
				divTurn.innerHTML = '当前是第'+(1+g.index)+'步,接下轮到黑棋走';
			}
			divXY.innerHTML = '[x,y]=['+x+','+y+']';
			btn.innerHTML = 1+g.index;
			g.index++;
		}
	},
	
	__checkChessValue:function(x){
		switch(x){
			case 1:g.gameOver();divWinner.innerHTML = '黑棋赢了';break;
			case 2:g.gameOver();divWinner.innerHTML = '白棋赢了';break;
			default:break;
		}
	},
	
	//水平方向
	checkDirectionX:function(x,y,chessValue){
		//水平①①①①⑤
		if(x-4>=0){
			if( chessValue==g.data[x-4][y] && 
				chessValue==g.data[x-3][y] && 
				chessValue==g.data[x-2][y] && 
				chessValue==g.data[x-1][y] && 
				chessValue==g.data[x-0][y]
			){
				g.__checkChessValue(chessValue);
			}
		}
		
		//水平①①①⑤①
		if(x-3>=0 && x+1<g.maxIndex){
			if( chessValue==g.data[x-3][y] && 
				chessValue==g.data[x-2][y] && 
				chessValue==g.data[x-1][y] && 
				chessValue==g.data[x-0][y] && 
				chessValue==g.data[x+1][y]
			){
				g.__checkChessValue(chessValue);
			}
		}
		
		//水平①①⑤①①
		if(x-2>=0 && x+2<g.maxIndex){
			if( chessValue==g.data[x-2][y] && 
				chessValue==g.data[x-1][y] && 
				chessValue==g.data[x-0][y] && 
				chessValue==g.data[x+1][y] && 
				chessValue==g.data[x+2][y]
			){
				g.__checkChessValue(chessValue);
			}
		}
		
		//水平①⑤①①①
		if(x-1>=0 && x+3<g.maxIndex){
			if( chessValue==g.data[x-1][y] && 
				chessValue==g.data[x-0][y] && 
				chessValue==g.data[x+1][y] && 
				chessValue==g.data[x+2][y] && 
				chessValue==g.data[x+3][y]
			){
				g.__checkChessValue(chessValue);
			}
		}
		
		//水平⑤①①①①
		if(x+4<g.maxIndex){
			if( chessValue==g.data[x+0][y] && 
				chessValue==g.data[x+1][y] && 
				chessValue==g.data[x+2][y] && 
				chessValue==g.data[x+3][y] && 
				chessValue==g.data[x+4][y]
			){
				g.__checkChessValue(chessValue);
			}
		}
	},
	
	//垂直方向
	checkDirectionY:function(x,y,chessValue){
		//垂直①①①①⑤
		if(y-4>=0){
			if( chessValue==g.data[x][y-0] && 
				chessValue==g.data[x][y-1] && 
				chessValue==g.data[x][y-2] && 
				chessValue==g.data[x][y-3] && 
				chessValue==g.data[x][y-4]
			){
				g.__checkChessValue(chessValue);
			}
		}
		
		//垂直①①①⑤①
		if(y-3>=0 && y+1<g.maxIndex){
			if( chessValue==g.data[x][y-3] && 
				chessValue==g.data[x][y-2] && 
				chessValue==g.data[x][y-1] && 
				chessValue==g.data[x][y-0] && 
				chessValue==g.data[x][y+1]
			){
				g.__checkChessValue(chessValue);
			}
		}
		
		//垂直①①⑤①①
		if(y-2>=0 && y+2<g.maxIndex){
			if( chessValue==g.data[x][y-2] && 
				chessValue==g.data[x][y-1] && 
				chessValue==g.data[x][y-0] && 
				chessValue==g.data[x][y+1] && 
				chessValue==g.data[x][y+2]
			){
				g.__checkChessValue(chessValue);
			}
		}
		
		//垂直①⑤①①①
		if(y-1>=0 && y+3<g.maxIndex){
			if( chessValue==g.data[x][y-1] && 
				chessValue==g.data[x][y-0] && 
				chessValue==g.data[x][y+1] && 
				chessValue==g.data[x][y+2] && 
				chessValue==g.data[x][y+3]
			){
				g.__checkChessValue(chessValue);
			}
		}
		
		//垂直⑤①①①①
		if(y+4<g.maxIndex){
			if( chessValue==g.data[x][y+0] && 
				chessValue==g.data[x][y+1] && 
				chessValue==g.data[x][y+2] && 
				chessValue==g.data[x][y+3] && 
				chessValue==g.data[x][y+4]
			){
				g.__checkChessValue(chessValue);
			}
		}
	},
	
	//升序方向
	checkDirectionASC:function(x,y,chessValue){
		//升序①①①①⑤
		if(x-4>=0 && y-4>=0){
			if( chessValue==g.data[x-0][y-0] && 
				chessValue==g.data[x-1][y-1] && 
				chessValue==g.data[x-2][y-2] && 
				chessValue==g.data[x-3][y-3] && 
				chessValue==g.data[x-4][y-4]
			){
				g.__checkChessValue(chessValue);
			}
		}
		
		//升序①①①⑤①
		if(x-3>=0 && y-3>=0 && x+1<g.maxIndex && y+1<g.maxIndex){
			if( chessValue==g.data[x-3][y-3] && 
				chessValue==g.data[x-2][y-2] && 
				chessValue==g.data[x-1][y-1] && 
				chessValue==g.data[x-0][y-0] && 
				chessValue==g.data[x+1][y+1]
			){
				g.__checkChessValue(chessValue);
			}
		}
		
		//升序①①⑤①①
		if(x-2>=0 && y-2>=0 && x+2<g.maxIndex && y+2<g.maxIndex){
			if( chessValue==g.data[x-2][y-2] && 
				chessValue==g.data[x-1][y-1] && 
				chessValue==g.data[x-0][y-0] && 
				chessValue==g.data[x+1][y+1] && 
				chessValue==g.data[x+2][y+2]
			){
				g.__checkChessValue(chessValue);
			}
		}
		
		//升序①⑤①①①
		if(x-1>=0 && y-1>=0 && x+3<g.maxIndex && y+3<g.maxIndex){
			if( chessValue==g.data[x-1][y-1] && 
				chessValue==g.data[x-0][y-0] && 
				chessValue==g.data[x+1][y+1] && 
				chessValue==g.data[x+2][y+2] && 
				chessValue==g.data[x+3][y+3]
			){
				g.__checkChessValue(chessValue);
			}
		}
		
		//升序⑤①①①①
		if(x+4<g.maxIndex && y+4<g.maxIndex){
			if( chessValue==g.data[x+0][y+0] && 
				chessValue==g.data[x+1][y+1] && 
				chessValue==g.data[x+2][y+2] && 
				chessValue==g.data[x+3][y+3] && 
				chessValue==g.data[x+4][y+4]
			){
				g.__checkChessValue(chessValue);
			}
		}
	},
	
	//降序方向
	checkDirectionDESC:function(x,y,chessValue){
		//降序①①①①⑤
		if(x-4>=0 && y+4<g.maxIndex){
			if( chessValue==g.data[x-0][y+0] && 
				chessValue==g.data[x-1][y+1] && 
				chessValue==g.data[x-2][y+2] && 
				chessValue==g.data[x-3][y+3] && 
				chessValue==g.data[x-4][y+4]
			){
				g.__checkChessValue(chessValue);
			}
		}
		
		//降序①①①⑤①
		if(x-3>=0 && y+3<g.maxIndex && x+1<g.maxIndex && y-1>=0){
			if( chessValue==g.data[x-3][y+3] && 
				chessValue==g.data[x-2][y+2] && 
				chessValue==g.data[x-1][y+1] && 
				chessValue==g.data[x-0][y+0] && 
				chessValue==g.data[x+1][y-1]
			){
				g.__checkChessValue(chessValue);
			}
		}
		
		//降序①①⑤①①
		if(x-2>=0 && y-2>=0 && x+2<g.maxIndex && y+2<g.maxIndex){
			if( chessValue==g.data[x-2][y+2] && 
				chessValue==g.data[x-1][y+1] && 
				chessValue==g.data[x-0][y-0] && 
				chessValue==g.data[x+1][y-1] && 
				chessValue==g.data[x+2][y-2]
			){
				g.__checkChessValue(chessValue);
			}
		}
		
		//降序①⑤①①①
		if(x-1>=0 && y-3>=0 && x+3<g.maxIndex && y+1<g.maxIndex){
			if( chessValue==g.data[x-1][y+1] && 
				chessValue==g.data[x-0][y-0] && 
				chessValue==g.data[x+1][y-1] && 
				chessValue==g.data[x+2][y-2] && 
				chessValue==g.data[x+3][y-3]
			){
				g.__checkChessValue(chessValue);
			}
		}
		
		//降序⑤①①①①
		if(x+4<g.maxIndex && y-4>=0){
			if( chessValue==g.data[x+0][y+0] && 
				chessValue==g.data[x+1][y-1] && 
				chessValue==g.data[x+2][y-2] && 
				chessValue==g.data[x+3][y-3] && 
				chessValue==g.data[x+4][y-4]
			){
				g.__checkChessValue(chessValue);
			}
		}
	},
	
	checkWinner:function(x,y,chessValue){
		//水平方向
		g.checkDirectionX(x,y,chessValue);
		
		//垂直方向
		g.checkDirectionY(x,y,chessValue);
		
		//升序方向
		g.checkDirectionASC(x,y,chessValue);
		
		//降序方向
		g.checkDirectionDESC(x,y,chessValue);
	},
};
g.initChessData();
</script>

运行结果

定义和用法

  • Server Sent | 在线编辑 | 1.php |
  • 欢迎纠错:如果发现错误,请发到我的QQ:3166692976,感谢!
  • 本站及其内容仅作为站长本人学习探索之用途,不保证(包括但不限于)内容的准确性、有效性。本站保留解释权。
  • 心不得满,事不得全。鸟飞不尽,话说不完。休息一下吧!
  • 1500km.com,   Copyright ©2022,   all rights received.
  • ↑返回顶部