1、软件五班 黄智彬1毕业设计论文院校：广州城建职业学院院系：信息工程学院班级：15 软件五班姓名：黄智彬学号：1504220518题目：h5 的五子棋指导老师：俞新凯日期：2017 年 11 月 20软件五班 黄智彬2摘要随着 IT 技术的发展，很多日常生活中的游戏都被搬到了计算机里供大家娱乐，尤其是博弈类的棋类游戏，如中国的象棋，围棋，五子棋等，今年来人们对人工智能技术的研究成果使得斯算计在这些博弈游戏中能战胜很多玩家。其次，五子棋作为一个棋类竞技运动，在民间十分流行，为了熟悉五子棋规则及技巧，以及研究简单的人工智能，决定用Java 开发五子棋游戏。主要完成人机对战的功能。在人机对弈中通过深度
2、搜索和估值模块来提高电脑旗手的智能。分析估值模块中的影响精准性的几个要素，以及提出一些提高精准性的办法，以及对它们搜索的节点数进行比较，在这些算法的基础山分析一些提高电脑AI 方案，如递归算法、电脑学习等。算法的研究有助于理解程序结构，增强逻辑思维能力，在其他人工智能方面也有很大的参考作用。本系统是五子棋游戏，该系统采用面向过程的开发方法。主要包括问题定义、可行性研究、需求分析、总体设计、详细设计、编码和测试等部分。 本系统主要包括人机对弈和人人对弈两种游戏类型。其中五子棋人机对弈是计算机博弈中的一种。研究其计算机算法，可以让我们看到人工智能的稚形，也有助于我们人脑的开发。五子棋是我国发明的，
3、研究它可以让更多的外国人了解五子棋，这有助于我国优秀文化的推广。 本系统是在HBuilder 与 h5 语言环境下开发的一个直观大方的自定义界面的带部分 AI 功能的五子棋游戏，游戏程序实现人机对弈和人人对弈，自动智能计算最佳落子位置，而且程序能够自动的判定游戏的获胜方和游戏的结束与否，实现对战双方顺利进行博弈。关键词：五子棋；HTML；JavaScript;CSS;AI软件五班 黄智彬3目录 摘要 目录 第一章 引言 1 1 项目开发背景 1 2 项目开发目标 1 3 项目开发的意义 1 第二章 页面制作相关技术介绍 2 1 HTML 2 2 JavaScript 3 3 CSS 4 4 A
4、I 5 第三章 HTML 开发五子棋的原型设计 5 第四章 游戏主要逻辑 6 第五章 结束语 7 参考文献 8软件五班 黄智彬4 致谢 9引言1.项目开发背景五子棋是人们喜欢的一种棋类游戏，近来，随着计算机的快速发展，一计算机作为对战平台，各种棋类游戏如雨后春笋般纷纷冒出，使得那些喜爱下棋，又常常苦于没有对手的棋迷们能随时过棋瘾。随着信息时代的不断发展，带动了游戏产业的飞速提升，游戏成为了生活中必不可少的娱乐方式之一。游戏的种类逐渐从单一化向多元化发展。其中休闲类游戏占据着游戏市场的重要位置。无论是棋牌类游戏还是益智类游戏都备受大众喜爱，例如“斗地主”“麻将”“连连看”等；此外，游戏的开发模式
5、也多种多样，各具特色。其中，基于 HTML5 开发的游戏，以其独特的跨平台型和清凉型，切无需进行客户端下载与安装，即可进行游戏，实现“即点即玩”，获得了很好的用户体验，并且具有很强的社交传播性。2.项目开发目标为了增强思维能力，有助于修身养性带动相关产业的发展，促进科学技术的提高。游戏会分为人机对弈和人人对弈，以适应更多玩家的需求。3.项目开发意义五子棋游戏的玩法少不了人机对战的模式，玩家和计算机各执黑棋和白棋，双方依次交替落子，任何一方首先实现 5 个棋子的连接则为胜利方。其中，计算机的落子是通过算法计算实现的。AI 方首先需要遍历整个棋盘上还没有落子的交叉点，通过算法给这些交叉点分别计算得
6、分，得分最高的交叉点则是 AI 方需要落子的地方。依靠这种算法，AI 方不仅需要连接 5 个棋子，还需要阻止玩家首先取得胜利，从而实现玩家与计算机的对战模式。软件五班 黄智彬5页面制作相关技术 1.HTML这次项目大部分是用 html 构造的，为什么要选 html 呢？它其实是文本，它需要浏览器的解释，它的编辑器大体可以分为三种，一：基本文本、文本编辑软件 使用微软自带的记事本或写字板都可以编写，当然，如果你用 WPS 来编写，也可以。不过存盘时请使用.htm 或者.html 作为扩展名，这样就方便浏览器认出直接解释执行了。二：半所见即所得软件 如：FCK-EDITER、E-webediter
7、 等在线网页编辑器；三：所见即所得软件 使用最广泛的编辑器，完全可以一点不懂 HTML 的知识就可以做出网页。四：所见即所得软件与版所见即所得的软件相比 开发速度更快，效率高，且直观的表现更强。任何地方进行修改只需要刷新即可显示。这次我用的是 HTML5，它是 HTML 的最新标准，它提供了许多用以加强交互和多媒体支持的新元素，如 Canvas,audio,video 等，这些新元素使得浏览器不依赖 Flash 等第三方插件即可开发高质量的原生程序。HTML5 提供的 Canvas 是 HTML5 网页游戏开发中最重要的元素，它提供了新的网页编程接口，开发者可以通过 JavaScript 处理
8、画布内的图像,可以在画布中绘制直线、圆、矩形等基本形状，实现游戏画面或其他虚拟图像的实时渲染，完成游戏画面的搭建，使游戏的开发变得更加便捷。目前各大浏览器逐渐完善对 Canvas 渲染功能的支持，因此，使用 Canvas 绘制出的游戏画面运行速度明显加快。与其他技术开发的游戏相比，基于 HTML6 开发的游戏有两点主要优势：一是其相关技术免费开放、规范并且易于推广；二是无需安装插件，减少了用户的麻烦，提高了安全性，是众多游戏开发者的优先选择。本设计基于 HTML5 进行五子棋游戏的开发，是用户在与计算机对战时充分开动电脑，体验简单的人工智能算法的下其逻辑，给用户体验带来一定的乐趣。软件五班 黄
9、智彬6 2.JavaScriptJavaScript 一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML（标准通用标记语言下的一个应用）网页上使用，用来给 HTML网页增加动态功能。JavaScript 是一种属于网络的脚本语言，已经被广泛用于 Web 应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常 JavaScript 脚本是通过嵌入在 HTML 中来实现自身的功能的。总体来说它有以下几个特点：一： JavaScript 是一
10、种解释性脚本语言，主要用来向 HTML 页面添加交互行为，可以直接嵌入 HTML 页面，但写成单独的 js 文件有利于结构和行为的分离。它的跨平台特性，是它在绝大多数浏览器的支持下，可以在多种平台下运行。二: JavaScript 脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。JavaScript 提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。三： JavaScript 是一种采用事件驱动的脚本语言,它不需要经过 Web 服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标
11、在网页中进行鼠标点击或上下移、窗口移动等操作 JavaScript 都可直接对这些事件给出相应的响应。在未来很长时间里都是热点语言，改进之后加上硬件提升，JavaScript 甚至有可能成为一门主流的图形软件开发工具，毕竟配合 HTML，CSS 之后很易用，入门门槛很低。然后看看 node 的发展情况，未来代替 Python 和 PHP 也说不定，JavaScript 可是天然的 web 基因。软件五班 黄智彬7 3.CSSCSS 即层叠样式表（Cascading Stylesheet）。是一种用来表现 HTML 或 XML 等文件样式的计算机语言。Web 开发中采用 CSS 技术，可以有效地
12、控制页面的布局、字体、颜色、背景和其它效果。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，只需要一些简单的修改，就可以改变网页的外观和格式。总体来说，CSS 具有以下特点：一：丰富的样式定义 CSS 提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。二：易于使用和修改 CSS 可以将样式定义在 HTML 元素的 style 属性中，也可以将其定义在 HTML 文档的 head
13、er 部分，也可以将样式声明在一个专门的 CSS 文件中，以供 HTML 页面引用。总之， CSS 样式表可以将所有的样式声明统一存放，进行统一管理。三：多页面应用 CSS 样式表可以单独存放在一个 CSS 文件中，这样我们就可以在多个页面中使用同一个 CSS 样式表。CSS 样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。四：层叠 简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套 CSS 样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到
14、页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。这次我用的是 CSS3。 CSS3 是 CSS 的升级版本，这套新标准提供了更加丰富且实用的规范，如：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等等，目前有很多浏览器已经相继支持这项升级的规范，如：Firefox、Chrome、Safari、Opera 等等。在 Web 开发中采用 CSS3 技术将会显著的美化我们的应用程序，提高用户体验，同时也能极大的提高程序的性能软件五班 黄智彬8 AI人工智能（Artificial Intelligence），英文缩写为 AI。它
15、是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。人工智能从诞生以来，理论和技术日益成熟，应用领域也不断扩大，可以设想，未来人工智能带来的科技产品，将会是人类智慧的“容器”。人工智能可以对人的意识、思维的信息过程的模拟。人工智能不是人的智能，但能像人那样思考、也可能超过人的智能。人工智能是一门极富挑战性的科学，从事这项工作的人必须懂得计算机知识，心理学和哲学。人工智能是包括十分广
16、泛的科学，它由不同的领域组成，如机器学习，计算机视觉等等，总的说来，人工智能研究的一个主要目标是使机器能够胜任一些通常需要人类智能才能完成的复杂工作。但不同的时代、不同的人对这种“复杂工作”的理解是不同的。别的不说，在这次的项目里，系统可以实现电脑自动下棋，扫描整个棋盘记录连在一起的黑白棋子数，实现人与电脑有次序的下棋，判断人与电脑的胜负软件五班 黄智彬9HTML 开发五子棋的原型设计 1.思路框架基于 HTML5 技术的五子棋游戏结合 HTML5、CSS3 和 JavaScript 进行开发，利用JavaScript 调用 Canvas 自带的 API 对棋盘和棋子的绘制和游戏主要逻辑的编写。如下图所示软件五班 黄智彬10 2.界面设计棋盘设计：棋盘大小为 450x450 像素的正方形，横竖各 15 条线，构成 255 个交叉点，也可以设计多种风格的棋盘供用户选择。风格设计：五子棋起源于中国，本次设计就以五子棋一贯以来的简朴风格的基调进行设计。选用白色和灰色作为游戏界面的主色调。棋子设计：依旧是虽然简单但还是最具有代表力的黑白两种棋子。 3.页面布局游戏界面通过 HTML 进行布局，通过 CSS 进行样式调整，Canvas 作为承载棋盘和棋子的画布。
