JS
PHP
HTML5
CSS3
jQuery
SQL
BootStrap5
Other
其他 字符串 数组 正则 存储 表单 数据库 选择器 屏幕 历史 时间 数学 元素 节点 属性 窗口 地址 动画 棋子 查找 排序 全局 JSON 浏览器 数据类型
其他 字符串 数组 正则 存储 表单 数据库 选择器 屏幕 历史 时间 数学 元素 节点 属性 窗口 地址 动画 棋子 查找 排序 全局 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>
运行结果