<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#board{
background-color: orange;
width: 540px;
height:540px;
margin:10px auto;
}
#box{
width: 52px;
height:52px;
border:1px solid blue;
float: left;
overflow:hidden;
}
#white{
margin: 0 auto;
text-align: center;
width:50px;
height:50px;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
background-color:white;
}
#black{
width:50px;
height:50px;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
background-color:black;
}
#Btnclear{
margin:0px auto;
}
</style>
</head>
<body>
<div id="board" ></div>
<input type="button" name="" id="Btnclear" value="清空" />
</body>
</html>
<script src="jquery-3.2.1.min.js"></script>
<script>
var pos=new Array();
$(function () {
for(var i=0;i<=9;i++){
pos[i]=new Array();
for(var j=0; j<=9;j++){
pos[i][j]="";
$("#board").append('<div id="box"></div>');
}
}
});
$(function(){
$("div").on("mousedown",'#box',function(e){
var x=Math.floor((e.pageX-document.getElementById("board").offsetLeft)/54);
var y=Math.floor((e.pageY-document.getElementById("board").offsetTop)/54);
if (3==e.which) {
pos[x][y]="0";
$(this).append("<div id='black'></div>");
// alert("right");右键
} else if(1==e.which){
// alert(x+","+y);
pos[x][y]="1";
$(this).append("<div id='white'></div>");
// alert("left");左键
}
if (//x轴
pos[x+1][y]=="1"&&pos[x+2][y]=="1"&&pos[x+3][y]=="1"&&pos[x+4][y]=="1"
||pos[x-1][y]=="1"&&pos[x-2][y]=="1"&&pos[x-3][y]=="1"&&pos[x-4][y]=="1"
||pos[x-1][y]=="1"&&pos[x+1][y]=="1"&&pos[x+2][y]=="1"&&pos[x+3][y]=="1"
||pos[x+1][y]=="1"&&pos[x-1][y]=="1"&&pos[x-2][y]=="1"&&pos[x-3][y]=="1"
||pos[x-1][y]=="1"&&pos[x+1][y]=="1"&&pos[x-2][y]=="1"&&pos[x+2][y]=="1"
//y轴
||pos[x][y+1]=="1"&&pos[x][y+2]=="1"&&pos[x][y+3]=="1"&&pos[x][y+4]=="1"
||pos[x][y-1]=="1"&&pos[x][y-2]=="1"&&pos[x][y-3]=="1"&&pos[x][y-4]=="1"
||pos[x][y-1]=="1"&&pos[x][y+1]=="1"&&pos[x][y+2]=="1"&&pos[x][y+3]=="1"
||pos[x][y+1]=="1"&&pos[x][y-1]=="1"&&pos[x][y-2]=="1"&&pos[x][y-3]=="1"
||pos[x][y-1]=="1"&&pos[x][y+1]=="1"&&pos[x][y-2]=="1"&&pos[x][y+2]=="1"
//右斜
||pos[x+1][y-1]=="1"&&pos[x+2][y-2]=="1"&&pos[x+3][y-3]=="1"&&pos[x+4][y-4]=="1"
||pos[x-1][y+1]=="1"&&pos[x-2][y+2]=="1"&&pos[x-3][y+3]=="1"&&pos[x-4][y+4]=="1"
||pos[x+1][y-1]=="1"&&pos[x+2][y-2]=="1"&&pos[x+3][y-3]=="1"&&pos[x-1][y+1]=="1"
||pos[x-1][y+1]=="1"&&pos[x-2][y+2]=="1"&&pos[x-3][y+3]=="1"&&pos[x+1][y-1]=="1"
||pos[x-1][y+1]=="1"&&pos[x+1][y-1]=="1"&&pos[x-2][y+2]=="1"&&pos[x+2][y-2]=="1"
//左斜
||pos[x-1][y-1]=="1"&&pos[x-2][y-2]=="1"&&pos[x-3][y-3]=="1"&&pos[x-4][y-4]=="1"
||pos[x+1][y+1]=="1"&&pos[x+2][y+2]=="1"&&pos[x+3][y+3]=="1"&&pos[x+4][y+4]=="1"
||pos[x-1][y-1]=="1"&&pos[x-2][y-2]=="1"&&pos[x-3][y-3]=="1"&&pos[x+1][y+1]=="1"
||pos[x+1][y+1]=="1"&&pos[x+2][y+2]=="1"&&pos[x+3][y+3]=="1"&&pos[x-1][y-1]=="1"
||pos[x+1][y+1]=="1"&&pos[x-1][y-1]=="1"&&pos[x+2][y+2]=="1"&&pos[x-2][y-2]=="1"
) {
alert("白棋胜利");
}else if (
pos[x+1][y]=="0"&&pos[x+2][y]=="0"&&pos[x+3][y]=="0"&&pos[x+4][y]=="0"
||pos[x-1][y]=="1"&&pos[x-2][y]=="0"&&pos[x-3][y]=="1"&&pos[x-4][y]=="0"
||pos[x-1][y]=="1"&&pos[x+1][y]=="1"&&pos[x+2][y]=="1"&&pos[x+3][y]=="0"
||pos[x+1][y]=="1"&&pos[x-1][y]=="1"&&pos[x-2][y]=="1"&&pos[x-3][y]=="0"
||pos[x-1][y]=="1"&&pos[x+1][y]=="1"&&pos[x-2][y]=="1"&&pos[x+2][y]=="0"
//y轴
||pos[x][y+1]=="0"&&pos[x][y+2]=="0"&&pos[x][y+3]=="0"&&pos[x][y+4]=="0"
||pos[x][y-1]=="0"&&pos[x][y-2]=="0"&&pos[x][y-3]=="0"&&pos[x][y-4]=="0"
||pos[x][y-1]=="0"&&pos[x][y+1]=="0"&&pos[x][y+2]=="0"&&pos[x][y+3]=="0"
||pos[x][y+1]=="0"&&pos[x][y-1]=="0"&&pos[x][y-2]=="0"&&pos[x][y-3]=="0"
||pos[x][y-1]=="0"&&pos[x][y+1]=="0"&&pos[x][y-2]=="0"&&pos[x][y+2]=="0"
//右斜
||pos[x+1][y-1]=="0"&&pos[x+2][y-2]=="0"&&pos[x+3][y-3]=="0"&&pos[x+4][y-4]=="0"
||pos[x-1][y+1]=="0"&&pos[x-2][y+2]=="0"&&pos[x-3][y+3]=="0"&&pos[x-4][y+4]=="0"
||pos[x+1][y-1]=="0"&&pos[x+2][y-2]=="0"&&pos[x+3][y-3]=="0"&&pos[x-1][y+1]=="0"
||pos[x-1][y+1]=="0"&&pos[x-2][y+2]=="0"&&pos[x-3][y+3]=="0"&&pos[x+1][y-1]=="0"
||pos[x-1][y+1]=="0"&&pos[x+1][y-1]=="0"&&pos[x-2][y+2]=="0"&&pos[x+2][y-2]=="0"
//左斜
||pos[x-1][y-1]=="0"&&pos[x-2][y-2]=="0"&&pos[x-3][y-3]=="0"&&pos[x-4][y-4]=="0"
||pos[x+1][y+1]=="0"&&pos[x+2][y+2]=="0"&&pos[x+3][y+3]=="0"&&pos[x+4][y+4]=="0"
||pos[x-1][y-1]=="0"&&pos[x-2][y-2]=="0"&&pos[x-3][y-3]=="0"&&pos[x+1][y+1]=="0"
||pos[x+1][y+1]=="0"&&pos[x+2][y+2]=="0"&&pos[x+3][y+3]=="0"&&pos[x-1][y-1]=="0"
||pos[x+1][y+1]=="0"&&pos[x-1][y-1]=="0"&&pos[x+2][y+2]=="0"&&pos[x-2][y-2]=="0"
) {
alert("黑棋胜利");
}
// for(var i=1;i<=4;i++){
// for(var j=1; j<=4;j++){
// if () {}
// }
// }
// if (9-x<=4) {
// for (var i=0; i<=(9-x); i++) {
// pos[x+i][y]
// }
// }else{
// }
});
$("#Btnclear").click(function(){
// alert("clear");
$("div #box").children().remove();
});
});
// alert("box1")
document.oncontextmenu = function() {
return false;}
</script>
jquery实现五子棋简单案例
需积分: 38 186 浏览量
2017-12-08
22:16:58
上传
评论
收藏 31KB ZIP 举报
五子棋.zip （2个子文件） 
chapter4-5五子棋.html 7KB
jquery-3.2.1.min.js 85KB资源评论
qq_35250355
- 粉丝: 0
- 资源: 1
最新资源
- 基于springboot+layui的医院日常耗材管理系统.zip
- 计算机毕业设计-ASP.NET教育报表管理系统-权限管理模块(源代码+)-毕设源码实例.zip
- 计算机毕业设计-ASP.NET教务信息管理系统的设计与实现(源代码+)-毕设源码实例.zip
- Eleven的精益供应链管理-碓胤咨询龚胤全.rar
- 5套光伏、储能、充电收益测算表.zip
- C2 供应链集成演示平台操作手册（详细版）.rar
- 3套光储充一体化站CAD+PDF图纸.zip
- Screenshot_20240426_195831_com.huawei.android.launcher.jpg
- 2000-2023年各省专利侵权结案数据.xlsx
- C#使用NPOI操作合并单元格
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
