HTML 五子棋
思路
1.棋盘与棋子
棋盘为纵横十五道也就是14×14的方格，这里使用table作为棋盘方格，可以在html中定义一个table，但并不填充tb与tr，使用js进行批量填充，这样可以节约代码书写。
棋子为黑白棋子，需要落在棋盘线的交点处，因此需要为棋子设置定位。由于棋子是圆的，因此要设置圆角，颜色也要互相不同，可以棋子设置为相同的类。然后针对白棋黑棋分别设置颜色等属性。
2.落子与位置
落子需要根据鼠标位置落子，可以设置鼠标点击事件，点击后在最近的一个焦点放置棋子。棋子要轮番放置，因此需要定义flag来判断棋子颜色属性。当一方获胜后，棋盘应不能继续下棋。为了使用户能够更清晰的查看棋子，需要有一个棋子跟随用户的鼠标，也就是定义鼠标移动函数。落子位置也不可以是之前别的棋子落过的位置，当然也不可以超出棋盘。
3.胜负判断
如果每次落子都将所有的棋子进行查询，不方便，因此可以只判断此次落子是否会影响胜负即可，可以在js中定义一个二维数组来对棋子进行映射。对于不同颜色与空白区域分别用一个数字加以区分。对于每一个落下的棋子，都判断其八方，即上，下，左，右，左上，右下，左下，右上的棋子是否与其本身是同颜色，如果不是，则停止。如果是则继续累加。如果最终累加和大于5，则返回胜利。根据所下棋子颜色判断胜利方。
4.其他功能
增加清空棋盘功能，清空的同时重置js二维数组，让用户可以重新下棋。增加计分板功能，获胜会使分数增加。换色功能，使用户互相更换颜色，同时计分板的分数也对应更换。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五子棋</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
width: 420px;
height: 420px;
border-spacing: 0px;
margin-left: 50%-210px;
}
td {
width: 28px;
height: 28px;
border: 1px solid gray;
}
.qi {
width: 14px;
height: 14px;
border-radius: 50%;
box-sizing: content-box;
}
.white {
background-color: white;
border: 0.5px solid black;
}
.black {
background-color: black;
border: 0.5px solid gray;
}
#baiqi {
width: 14px;
height: 14px;
border-radius: 50%;
box-sizing: content-box;
background-color: white;
border: 0.5px solid black;
}
#heiqi {
width: 14px;
height: 14px;
border-radius: 50%;
box-sizing: content-box;
background-color: black;
border: 0.5px solid gray;
}
.zhanji div[id^=x] {
height: 20px;
float: left;
margin-right: 5px;
}
.zhanji p {
float: left;
text-align: center;
height: 100%;
font-size: 17px;
}
.zhanji b {
float: left;
text-align: center;
height: 20px;
font-size: 17px;
font-weight: 400;
color: red;
}
</style>
<script>
var shengfu = 0;
var qizi = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
];
var flag = 0;
var xuanse = 0;
var a = 0;
var b = 0;
window.onload = function () {
qipan();
}
function qipan() {
var tableAll = document.getElementsByTagName("table");
for (var i = 1; i < 15; i++) {
var table = tableAll[0];
table.innerHTML += "<tr id=tr" + i + "></tr>";
var tr = document.getElementById("tr" + i);
for (var j = 1; j < 15; j++) {
tr.innerHTML += "<td id=td" + i + "k" + j + "></td>";
}
}
}
document.onmousemove = function (e) {
if (shengfu == 0 && e.x <= 420 && e.y > 20 && e.y < 440) {
if (flag == 0) {
var a = document.getElementById("heiqi");
a.style.visibility = "visible";
a.style.position = "absolute";
a.style.left = e.x - 7 + "px";
a.style.top = e.y - 7 + "px";
}
else {
var a = document.getElementById("baiqi");
a.style.visibility = "visible";
a.style.position = "absolute";
a.style.left = e.x - 7 + "px";
a.style.top = e.y - 7 + "px";
}
}
else {
var a = document.getElementById("baiqi");
a.style.visibility = "hidden";
var b = document.getElementById("heiqi");
b.style.visibility = "hidden";
}
}
document.onmousedown = function (e) {
if (shengfu == 0 && e.x <= 420 && e.y > 20 && e.y < 440) {
var dobo = document.body;
var x = Math.round(e.x / 30);
var y = Math.round((e.y - 20) / 30);
if (x <= 14 && y <= 14 && shengfu == 0) {
if (flag == 0) {
if (qizi[x][y] == 0) {
var mm = document.getElementById("heiqi");
mm.style.visibility = "hidden";
qizi[x][y] = 1;
dobo.innerHTML += "<div class='black qi' style='position: absolute; left: " + (x * 30 - 7) + "px; top: " + (y * 30 + 13) + "px;''></div>"
flag = 1;
if (panduan(x, y)) {
alert("黑棋胜利");
shengfu = 1;
if (xuanse == 0) {
a++;
}
if (xuanse == 1) {
b++;
}
}
}
}
else if (flag == 1) {
if (qizi[x][y] == 0) {
var mm = document.getElementById("baiqi");
mm.style.visibility = "hidden";
qizi[x][y] = 2;
dobo.innerHTML += "<div class='white qi' style='position: absolute; left: " + (x * 30 - 7) + "px; top: " + (y * 30 + 13) + "px;''></div>"
flag = 0;
if (panduan(x, y)) {
alert("白棋胜利");
shengfu = 1;
if (xuanse == 0) {
b++;
}
if (xuanse == 1) {
a++;
}
}
}
}
}
if (shengfu == 1) {
document.getElementById("a").innerHTML = a;
document.getElementById("b").innerHTML = b;
}
}
}
function panduan(x, y) {
var changdu = [1, 1, 1, 1];
var xkuozhan = x;
var ykuozhan = y;
var dir = [[[-1, 0], [1, 0]], [[0, -1], [0, 1]], [[-1, -1], [1, 1]], [[1, -1], [-1, 1]]
];
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 2; j++) {
var shunsai = true;
while (shunsai) {
xkuozhan += dir[i][j][0];
ykuozhan += dir[i][j][1];
if (xkuozhan >= 0 && xkuozhan <= 14 && ykuozhan >= 0 && ykuozhan <= 14) {
if ((qizi[xkuozhan][ykuozhan] == qizi[x][y])) {
changdu[i]++;
}
else
shunsai = false;
} else {
shunsai = false;
}
}
xkuozhan = x;
ykuozhan = y;
}
}
for (var k = 0; k < 4; k++) {
if (changdu[k] >= 5) {
return true;
}
}
return false;
}
function qingkong() {
var dobo = document.body;
while (document.getElementsByClassName("qi").length > 0) {
dobo.removeChild(document.getElementsByClassName("qi")[0]);
}
shengfu = 0;
flag = 0;
qizi = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],]
}
function huanse() {
xuanse = 1 - xuanse;
}
</script>
</head>
<body>
<div class="zhanji">
<div id="x1">
<p>选手1获胜</p><b id="a">0</b>
<p>盘</p>
</div>
<div id="x2">
<p>选手2获胜</p><b id="b">0</b>
<p>盘</p>
</div>
</div>
<br>
<table>
</table>
<input type="button" value="更换颜色" onclick="huanse()">
<input type="button" value="清空棋盘" onclick="qingkong()">
<div id="heiqi" style="visibility: hidden;z-index: 1;"></div>
<div id="baiqi" style="visibility: hidden;z-index: 1;"></div>
</body>
</html>
浙公网安备 33010602011771号