61,112
社区成员
发帖
与我相关
我的任务
分享怎么用纯HTML+jq写一个简单的五子棋？求大神帮忙完善一下！
求解!
怎么让五个子连接在一起就显示胜利！
代码到这就卡住了！
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-1.12.4.min库.js"></script>
<script>
$(function () {
for (var i = 0; i <= 1013; i++) {
$("ul").append("<li></li>");
}
var a = 1;
$("ul>li").click(function () {
var $b = $("li").index(this);
if (a == 1) {
$(this).append("<div class='box' style='background-color:#000;width:15px;height:15px;border-radius:10px;border:solid rgb(10,10,10) 1px;'></div>");
a = 0;
}
else if (a == 0) {
$(this).append("<div class='box2' style='background-color:#f0f0f0;width:15px;height:15px;border-radius:10px;border:solid rgb(10,10,10) 1px;'></div>");
a = 1;
}
})
[
})
</script>
<style>
* {
margin: 0px;
padding: 0px;
}
.box1 {
border: 2px solid #808080;
overflow: hidden;
position: relative;
width: 898px;
height: 599px;
margin: 0px auto;
position: relative;
}
.box2, .box {
position: absolute;
margin-left: 2px;
margin-top: 2px;
}
ul {
margin: 0px auto;
width: 900px;
height: 1000px;
list-style: none;
overflow: hidden;
position: relative;
}
li {
border: 1px solid #fff;
opacity: 2;
background-color: #808080;
width: 21px;
height: 21px;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<ul>
</ul>
</div>
</body>
</html>
怎么让五个子连接在一起就显示胜利！
代码到这就卡住了！
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-1.12.4.min库.js"></script>
<script>
$(function () {
for (var i = 0; i <= 1013; i++) {
$("ul").append("<li></li>");
}
var a = 1;
$("ul>li").click(function () {
var $b = $("li").index(this);
if (a == 1) {
$(this).append("<div class='box' style='background-color:#000;width:15px;height:15px;border-radius:10px;border:solid rgb(10,10,10) 1px;'></div>");
a = 0;
}
else if (a == 0) {
$(this).append("<div class='box2' style='background-color:#f0f0f0;width:15px;height:15px;border-radius:10px;border:solid rgb(10,10,10) 1px;'></div>");
a = 1;
}
})
[
})
</script>
<style>
* {
margin: 0px;
padding: 0px;
}
.box1 {
border: 2px solid #808080;
overflow: hidden;
position: relative;
width: 898px;
height: 599px;
margin: 0px auto;
position: relative;
}
.box2, .box {
position: absolute;
margin-left: 2px;
margin-top: 2px;
}
ul {
margin: 0px auto;
width: 900px;
height: 1000px;
list-style: none;
overflow: hidden;
position: relative;
}
li {
border: 1px solid #fff;
opacity: 2;
background-color: #808080;
width: 21px;
height: 21px;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<ul>
</ul>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
qq_42771048 2018-12-10
- 打赏
- 举报
http://www.3yiguan.com/
qiliangya 2017-10-23
- 打赏
- 举报
提供一个思路，判断五子是否连接在一起，总共有四个方向，当落子的时候，根据落子的坐标对着四个方向所在的直线做一次判断即可。（菜鸟，大佬勿喷）
