该系统包括了前端和算法两大模块，其中，前端的代码是主要的展示，而算法则是内部的数据处理。前端是用户操作的主界面。后端算法是人工智能五子棋算法的主要体现。
前端实现
游戏首页
游戏的主页要求点击鼠标，一个漂亮的页面可以让玩家产生一种想要体验的冲动。主页的修饰可以用 CSS版面和 Canvas来完成。通过CSS的部分代码实现如下：
添加两个窗体：
<div>
<span class="timer">游戏开始，请落子</span>
<button class="rollback">悔棋</button>
</div>
<div class="chessboard"></div>
通过CSS3添加样式
.timer{
margin: 0 20px;
}
.rollback{
width: 70px;
height: 30px;
margin: 20px;
}//为游戏窗体设计格式
.chessboard{
width: 315px;
margin: 0 auto;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.chessboard .row{
overflow: hidden;
}
.chessboard .tile{
width: 20px;
height: 20px;
float: left;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
text-align: center;
line-height: 20px;
}
.chessboard .tile.current{
background-color: #ddd;
}
.chessboard .chess-max,.chessboard .chess-min{
font-size: 20px;
cursor: pointer;
-webkit-user-select: none;
}//为按钮添加样式
游戏开始界面
用户打开首页后进入到游戏的开始界面，在开始界面中可任选一点落子，开始下棋，同时可显示目前对局时间。为玩家提供了悔棋按钮，可返回上一步落子。如图：
胜利界面
对局开始后，玩家每下一子，人工智能会根据算法接着下一子。如果玩家战胜人工智能，网页会弹出窗口，宣布玩家的胜利，即游戏结束。实现结果如下图
标签：游戏,人工智能,前端,五子棋,1px,20px,chessboard From： https://www.cnblogs.com/yenaibo/p/17134930.html