毕业设计论文
院校：广州城建职业学院
院系：信息工程学院
班级：15软件五班
姓名：黄智彬
学号：1504220518
题目：h5的五子棋
指导老师：俞新凯
日期：2017年11月20
摘要
随着IT技术的发展，很多日常生活中的游戏都被搬到了计算机里供大家娱乐，尤其是博弈类的棋类游戏，如中国的象棋，围棋，五子棋等，今年来人们对人工智能技术的研究成果使得斯算计在这些博弈游戏中能战胜很多玩家。其次，五子棋作为一个棋类竞技运动，在民间十分流行，为了熟悉五子棋规则及技巧，以及研究简单的人工智能，决定用Java开发五子棋游戏。主要完成人机对战的功能。在人机对弈中通过深度搜索和估值模块来提高电脑旗手的智能。分析估值模块中的影响精准性的几个要素，以及提出一些提高精准性的办法，以及对它们搜索的节点数进行比较，在这些算法的基础山分析一些提高电脑AI方案，如递归算法、电脑学习等。算法的研究有助于理解程序结构，增强逻辑思维能力，在其他人工智能方面也有很大的参考作用。
本系统是五子棋游戏，该系统采用面向过程的开发方法。主要包括问题定义、可行性研究、需求分析、总体设计、详细设计、编码和测试等部分。 本系统主要包括人机对弈和人人对弈两种游戏类型。其中五子棋人机对弈是计算机博弈中的一种。研究其计算机算法，可以让我们看到人工智能的稚形，也有助于我们人脑的开发。五子棋是我国发明的，研究它可以让更多的外国人了解五子棋，这有助于我国优秀文化的推广。 本系统是在HBuilder与h5语言环境下开发的一个直观大方的自定义界面的带部分AI功能的五子棋游戏，游戏程序实现人机对弈和人人对弈，自动智能计算最佳落子位置，而且程序能够自动的判定游戏的获胜方和游戏的结束与否，实现对战双方顺利进行博弈。
关键词：五子棋；；丰富的样式定义CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
易于使用和修改CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。
2.界面设计
棋盘设计：棋盘大小为450x450像素的正方形，横竖各15条线，构成255个交叉点，也可以设计多种风格的棋盘供用户选择。
风格设计：五子棋起源于中国，本次设计就以五子棋一贯以来的简朴风格的基调进行设计。选用白色和灰色作为游戏界面的主色调。
棋子设计：依旧是虽然简单但还是最具有代表力的黑白两种棋子。
3.页面布局
游戏界面通过HTML进行布局，通过CSS进行样式调整，Canvas作为承载棋盘和棋子的画布。游戏主要逻辑
落子的实现
落子需要给棋子绑定一个onclick事件。以黑子为例，当点击鼠标实现黑棋的落子，具体代买如下：
Chess.οnclick=function(e){var x=e.offset X;
Var y=e. offset Y;
Var i=Math.floor(x/30);var j=Math.floor(y/30);one Step(i,j,ture);}以上代码中，offset代表了HTML元素相对自己的offset Parent元素的位置，由于落子的实现是在棋盘中完成的，所以这里的父级为Canvas元素。e.offset X是相对于Canvas坐标系的左上角开始的坐标。由于棋盘在Canvas绘制左右各留白15个像素，且黑白棋子和棋盘的每个格子各位30x30个像素。棋盘的坐标系相对于Canvas向右下方移动了15个像素，所以棋子横纵坐标各整除30，刚好每隔30个像素落到横纵线的交叉点上，从而完成落子的实现。
赢法数组的计算
首先用一个三位数组记录五子棋所有的算法，数组取得前面两位数据代表五子棋的棋盘坐标，第三个数据表示赢法的种类。每种赢法在棋盘上只显示5个棋子，并且这些棋子相互连接成一条线，可以为横线、竖线或是斜线，用true代表交叉点存在棋子，棋盘上的其余位置都为fals
