当代人类已经离不开电子设备和互联网，电子游戏也成为了许多人生活中不可或缺的一部分。今天，我想分享一款使用HTML制作并可以在浏览器中玩的五子棋小游戏。
关于五子棋 游戏规则：五子棋是在一个15×15的棋盘上进行对弈。两名玩家交替落子，一方执黑子，另一方执白子。玩家的目标是先在横线、竖线或斜线上形成连续的五个自己颜色的棋子，即五子相连，便获得胜利。简单易学：五子棋的规则相对简单，上手容易，适合所有年龄段的人玩。但由于其在策略上有着较高的深度，因此在高水平的对局中也能展现出复杂而精妙的对弈思路。发展历程：五子棋在中国有着悠久的历史，在古代就已经流传。它既是一种棋艺，也是一种智力竞技活动。五子棋的规则和棋具逐渐完善，并在现代得到了广泛的推广和普及。国际影响：五子棋不仅在中国受到广泛喜爱，也在世界范围内有一定的影响力。国际五子棋联合会（IGF）是负责五子棋国际比赛的组织机构，其旨在促进五子棋在全球的发展和推广。电脑对弈：由于五子棋规则简单且策略复杂，在计算机领域有很高的应用价值。已经有许多优秀的人工智能程序和电脑软件能够与人类棋手进行对弈，并在某些情况下能够战胜人类高手。 技术选型我们将用纯HTML+CSS+JS完成这个小游戏
准备工作准备工作非常的简单我们只需要准备一个HTML文件即可。 下面是我们小游戏中将会用的标签
元素用法和功能定义HTML文档的根元素定义文档头部包含的信息，如标题、关键词和样式表等定义文档的标题，显示在浏览器的标题栏上定义文档的主体部分，包含可见内容-定义标题，从大到小的六个级别，一般用于内容结构的层次化显示创建绘图区域，用于绘制图形、图像和动画元素是HTML中最常用的容器元素之一，它用于组织和包裹其他HTML元素。它本身没有特定的语义或样式，只是一个通用的容器。元素是HTML中最小的容器元素之一，它用于组织和包裹单个或少量的HTML元素。类似于，本身没有特定的语义或样式，只是一个通用的容器。
准备工作完成之后我们就可以来布局我们的页面了。 我们的五子棋小游戏由三个部分组成，第一块是标题，第二块是棋盘，第三块是功能按钮。 
简单编辑一下样式 
因为我们棋盘是使用canvas，所以我们需要通过js来绘制我们的棋盘。
var chess = document.getElementById("chess_board");var context = chess.getContext('2d');context.strokeStyle = '#bfbfbf'; //边框颜色 //绘制棋盘window.onload = function() {for (var i = 0; i if (over) {return;}if (!me) {return;}// 悔棋功能可用 backbtn.className = backbtn.className.replace(new RegExp("(\\s|^)unable(\\s|$)"), " ");var x = e.offsetX;var y = e.offsetY;var i = Math.floor(x / 33.5);var j = Math.floor(y / 33.5);_nowi = i;_nowj = j;if (chressBord[i][j] == 0) {oneStep(i, j, me);chressBord[i][j] = 1; //我，已占位置 for (var k = 0; k // debugger; myWin[k]++;_compWin[k] = computerWin[k];computerWin[k] = 6; //这个位置对方不可能赢了 if (myWin[k] == 5) {// window.alert('你赢了'); resultTxt.innerHTML = '恭喜，你赢了！';over = true;}}}if (!over) {me = !me;computerAI();}}}// 摔跤猫子下棋 var computerAI = function() {var myScore = [];var computerScore = [];var max = 0;var u = 0,v = 0;for (var i = 0; i myScore[i][j] = 0;computerScore[i][j] = 0;}}for (var i = 0; i if (chressBord[i][j] == 0) {for (var k = 0; k if (myWin[k] == 1) {myScore[i][j] += 200;} else if (myWin[k] == 2) {myScore[i][j] += 400;} else if (myWin[k] == 3) {myScore[i][j] += 2000;} else if (myWin[k] == 4) {myScore[i][j] += 10000;}if (computerWin[k] == 1) {computerScore[i][j] += 220;} else if (computerWin[k] == 2) {computerScore[i][j] += 420;} else if (computerWin[k] == 3) {computerScore[i][j] += 2100;} else if (computerWin[k] == 4) {computerScore[i][j] += 20000;}}}if (myScore[i][j] > max) {max = myScore[i][j];u = i;v = j;} else if (myScore[i][j] == max) {if (computerScore[i][j] > computerScore[u][v]) {u = i;v = j;}}if (computerScore[i][j] > max) {max = computerScore[i][j];u = i;v = j;} else if (computerScore[i][j] == max) {if (myScore[i][j] > myScore[u][v]) {u = i;v = j;}}}}}_compi = u;_compj = v;oneStep(u, v, false);chressBord[u][v] = 2; //摔跤猫子占据位置 for (var k = 0; k computerWin[k]++;_myWin[k] = myWin[k];myWin[k] = 6; //这个位置对方不可能赢了 if (computerWin[k] == 5) {resultTxt.innerHTML = '摔跤猫子战胜了你，还得继续努力啊！';over = true;}}}if (!over) {me = !me;}backAble = true;returnAble = false;var hasClass = new RegExp('unable').test(' ' + returnbtn.className + ' ');if (!hasClass) {returnbtn.className += ' ' + 'unable';}}//画棋子 var oneStep = function(i, j, me) {context.beginPath();context.arc(15 + i * 33.5, 15 + j * 33.5, 13, 0, 2 * Math.PI); // 画圆 context.closePath();//渐变 var gradient = context.createRadialGradient(15 + i * 33.5 + 2, 15 + j * 33.5 - 2, 13, 15 + i * 33.5 + 2, 15 + j * 33.5 - 2, 0);if (me) {gradient.addColorStop(0, '#2d2d2d');gradient.addColorStop(1, '#636766');} else {gradient.addColorStop(0, '#d1d1d1');gradient.addColorStop(1, '#f9f9f9');}context.fillStyle = gradient;context.fill();} 效果图