实现代码1：
<!-- //html和css -->
<!DOCTYPE html>
<html lang="en">
<!-- Head -->
<head>
<meta charset="UTF-8">
<title>五子棋</title>
<!-- css -->
<style type="text/css">
#container {
width: 531px;
height: 645px;
margin: 0 auto;
border: 1px solid blue;
background: url(qipan.jpg) no-repeat;
padding-top: 0px;
padding-left: 5px;
}
td {
width: 40px;
height: 33px;
}
table {
border-collapse: collapse;
width: 525px;
height: 465px;
}
</style>
<!-- css ends -->
<!-- script -->
<script src="wuzi.js"></script>
<!-- script ends -->
</head>
<!-- Head Ends -->
<!-- Body -->
<body>
<!-- Container -->
<div id="container">
<!-- table model -->
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<!-- 控件模块 -->
<br>
<div>
<p> 当前棋手：
<img id="qizi" src="">
<input type="button" value="黑棋先行" onclick="status1()">
<input type="button" value="白棋先行" onclick="status2()">
<input type="button" value="再来一局" onclick="window.location.href=window.location">
<input type="button" value="退出游戏" onclick="closeFunction()">
</p>
</div>
</div>
<!-- Container Ends -->
</body>
<!-- Body Ends -->
</html>
<script type="text/javascript">
//js部分代码
/*状态事件*/
function status1() {
document.getElementById('qizi').src = "black.png";
}
function status2() {
document.getElementById('qizi').src = "white.png";
}
/* 控件事件 */
function closeFunction() {
if (confirm("是否退出游戏？")) {
window.close();
} else {
history.back();
}
}
/* 判断输赢 */
var cnt = (function() {
var curr = 'black';
return function() {
var tmp = curr;
if (curr == 'black') {
curr = 'white';
} else {
curr = 'black';
}
return tmp;
}
})();
var tds = document.getElementsByTagName('td');
var iswin = false; // 有没有分出胜负
// 负责下棋，即改变单元格的背景
var xia = function() {
// 判断是否已分出胜负
var color = cnt();
if (iswin) {
alert('游戏结束!');
return;
}
if (this.style.background.indexOf('.png') >= 0) {
alert('不能重复放置棋子！');
return;
}
this.style.background = 'url(' + color + '.png)';
judge.call(this, color); // 下完棋后判断胜负
}
// 判断胜负的函数
var judge = function(color) {
// 找当前这颗棋的坐标
// td在tr中索引，即是横坐标
// tr是table的索引，即是纵坐标
var curr = {
x: this.cellIndex,
y: this.parentElement.rowIndex,
color: color
};
var line = ['', '', '', '']; //分别放置横，竖，左右下斜上棋
// 循环225单元格
for (var i = 0, tmp = {}; i < 225; i++) {
// 取当前循环到的这颗棋的坐标
tmp = {
x: tds[i].cellIndex,
y: tds[i].parentElement.rowIndex,
color: '0'
};
// 取当前循环到的这颗棋的颜色，分别b,w 0（空）来表示
if (tds[i].style.background.indexOf('black') >= 0) {
tmp.color = 'b';
} else if (tds[i].style.background.indexOf('white') >= 0) {
tmp.color = 'w';
}
if (curr.y == tmp.y) {
// 在一个横线上
line[0] += tmp.color;
}
if (curr.x == tmp.x) {
// 在一个竖线上
line[1] += tmp.color;
}
if ((curr.x + curr.y) == (tmp.x + tmp.y)) {
//在左斜线上
line[2] += tmp.color;
}
if ((curr.x - tmp.x) == (curr.y - tmp.y)) {
//在右斜线上
line[3] += tmp.color;
}
}
// 判断4条线上，有没有连续的4个w,或4个b
color = color == 'black' ? 'bbbbb' : 'wwwww'; //赢家的颜色
for (var i = 0; i < 4; i++) {
if (line[i].indexOf(color) >= 0) {
alert(color + '胜了！(b表示黑方胜，w表示白方胜)');
iswin = true; // 标志已经分出胜负
break;
}
}
}
window.onload = function() {
document.getElementsByTagName('table')[0].onclick = function(ev) {
// 1. 下棋
// 2. 判断胜负
xia.call(ev.srcElement);
};
}
</script>
效果演示如下图：
实现代码2：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
canvas {
margin: 10px;
border: 2px solid #000;
}
#box {
display: inline-block;
position: absolute;
margin-top: 200px;
margin-left: 100px;
}
span {
font: 24px "微软雅黑";
display: inline-block;
height: 50px;
}
input {
margin-top: 30px;
display: block;
width: 100px;
height: 50px;
font: 16px "微软雅黑";
color: #fff;
background-color: #0099cc;
}
</style>
</head>
<body>
<canvas width="640" height="640" id="cas">
您的浏览器不支持canvas，请升级到最新的浏览器
</canvas>
<div id="box">
<span id="txt"></span>
<input type="button" id="btn" value="重新开始" />
</div>
<script>
var flag = true; //true代表白棋下的棋子，false代表黑棋下的棋子
var isWin = false; //判断是否结束，true结束，false没有结束
var step = 40; //设置每个格子的宽高都是40
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
var cas = document.getElementById("cas"); // 获取画布对象
var ctx = cas.getContext("2d"); //画布上下文
// 创建图片对象
var img_b = new Image();
img_b.src = "imgs/b.png"; //设置黑棋图片路径
var img_w = new Image();
img_w.src = "imgs/w.png"; //设置白棋图片路径
// 用二维数组来保存棋盘，0代表没有走过，1为白棋走过，2为黑棋走过
var arr = new Array(15); //声明一个一维数组
for (var i = 0; i < 15; i++) {
arr[i] = new Array(15); //每个值再声明一个一维数组，这样就组成了一个二维数组
for (var j = 0; j < 15; j++) {
arr[i][j] = 0;
}
}
//绘制棋盘
function drawLine() {
for (var i = 0; i < cas.width / step; i++) {
// 画竖线
ctx.moveTo((i + 1) * step, 0);
ctx.lineTo((i + 1) * step, cas.height);
// 画横线
ctx.moveTo(0, (i + 1) * step);
ctx.lineTo(cas.width, (i + 1) * step);
ctx.stroke();
}
}
//获取鼠标点击的位置
cas.onclick = function(e) {
// 先判断游戏是否结束
if (isWin) {
alert("游戏已经结束，请刷新重新开始！");
return 0;
}
//判断棋子显示的地方，四条边上不显示棋子，
//鼠标点击的位置减去边框距离页面的上和左的距离（10），减去一个格子宽高的一半（20）
var x = (e.clientX - 10 - 20) / 40;
var y = (e.clientY - 10 - 20) / 40;
//进行取整来确定棋子最终显示的区域
x = parseInt(x);
y = parseInt(y);
//如果超出棋盘或者在棋盘边界直接返回，边界上不能画棋子
if (x < 0 || x >= 15 || y < 0 || y >= 15) {
return;
}
//进行判断该位置是否已经显示过棋子
if (arr[x][y] != 0) {
alert("你不能在这个位置下棋");
return;
}
// 判断是显示黑子还是白子
if (flag) { //白子
flag = false; //将标志置为false,表示下次为黑子
drawChess(1, x, y); //调用函数来画棋子
} else { //黑子
flag = true; //将标志置为true,表示下次为白子
drawChess(2, x, y); //调用函数来画棋子
}
}
//画棋子
function drawChess(num, x, y) {
//根据x和y确定图片显示位置,让图片显示在十字线中间，因为一个格子为40，图片大小为30，所以40-30/2等于25，所以需要加上25
var x0 = x * step + 25;
var y0 = y * step + 25;
if (num == 1) {
//绘制白棋
ctx.drawImage(img_w, x0, y0);
arr[x][y] = 1; //白子
} else if (num == 2) {
// 绘制黑棋
ctx.drawImage(img_b, x0, y0);
arr[x][y] = 2; //黑子
}
//调用函数判断输赢
judge(num, x, y);
}
//判断输赢
function judge(num, x, y) {
var n1 = 0, //左右方向
n2 = 0, //上下方向
n3 = 0, //左上到右下方向
n4 = 0; // 右上到左下方向
//***************左右方向*************
//先从点击的位置向左寻找，相同颜色的棋子n1自加，直到不是相同颜色的棋子，则跳出循环
for (var i = x; i >= 0; i--) {
if (arr[i][y] != num) {
break;
}
n1++;
}
//然后从点击的位置向右下一个位置寻找，相同颜色的棋子n1自加，直到不是相同颜色的棋子，则跳出循环
for (var i = x + 1; i < 15; i++) {
if (arr[i][y] != num) {
break;
}
n1++;
}
//****************上下方向************
for (var i = y; i >= 0; i--) {
if (arr[x][i] != num) {
break;
}
n2++;
}
for (var i = y + 1; i < 15; i++) {
if (arr[x][i] != num) {
break;
}
n2++;
}
//****************左上到右下斜方向***********
for (var i = x, j = y; i >= 0, j >= 0; i--, j--) {
if (i < 0 || j < 0 || arr[i][j] != num) {
break;
}
n3++;
}
for (var i = x + 1, j = y + 1; i < 15, j < 15; i++, j++) {
if (i >= 15 || j >= 15 || arr[i][j] != num) {
break;
}
n3++;
}
//****************右上到左下斜方向*************
for (var i = x, j = y; i >= 0, j < 15; i--, j++) {
if (i < 0 || j >= 15 || arr[i][j] != num) {
break;
}
n4++;
}
for (var i = x + 1, j = y - 1; i < 15, j >= 0; i++, j--) {
if (i >= 15 || j < 0 || arr[i][j] != num) {
break;
}
n4++;
}
//用一个定时器来延时，否则会先弹出对话框，然后才显示棋子
var str;
if (n1 >= 5 || n2 >= 5 || n3 >= 5 || n4 >= 5) {
if (num == 1) { //白棋
str = "白棋赢了，游戏结束！"
} else if (num == 2) { //黑棋
str = "黑棋赢了，游戏结束！"
}
txt.innerHTML = str;
isWin = true;
}
}
//重新开始
btn.onclick = function() {
flag = true;
isWin = false;
for (var i = 0; i < 15; i++) {
for (var j = 0; j < 15; j++) {
arr[i][j] = 0;
}
}
ctx.clearRect(0, 0, 640, 640);
txt.innerHTML = "";
drawLine();
}
drawLine();
</script>
</body>
</html>
效果演示如下图：
参考资料：
https://www.cnblogs.com/xbyl/p/5733830.html
https://www.jb51.net/article/128503.htm