h5的五子棋论文.docx
《h5的五子棋论文.docx》由会员分享，可在线阅读，更多相关《h5的五子棋论文.docx（12页珍藏版）》请在冰豆网上搜索。
h5的五子棋论文
毕业设计论文
院校：
广州城建职业学院
院系：
信息工程学院
班级：
姓名：
学号：
题目：
h5的五子棋
指导老师：
日期：
2017年11月20
摘要
随着IT技术的发展，很多日常生活中的游戏都被搬到了计算机里供大家娱乐，尤其是博弈类的棋类游戏，如中国的象棋，围棋，五子棋等，今年来人们对人工智能技术的研究成果使得斯算计在这些博弈游戏中能战胜很多玩家。
其次，五子棋作为一个棋类竞技运动，在民间十分流行，为了熟悉五子棋规则及技巧，以及研究简单的人工智能，决定用Java开发五子棋游戏。
主要完成人机对战的功能。
在人机对弈中通过深度搜索和估值模块来提高电脑旗手的智能。
分析估值模块中的影响精准性的几个要素，以及提出一些提高精准性的办法，以及对它们搜索的节点数进行比较，在这些算法的基础山分析一些提高电脑AI方案，如递归算法、电脑学习等。
算法的研究有助于理解程序结构，增强逻辑思维能力，在其他人工智能方面也有很大的参考作用。
本系统是五子棋游戏，该系统采用面向过程的开发方法。
主要包括问题定义、可行性研究、需求分析、总体设计、详细设计、编码和测试等部分。
本系统主要包括人机对弈和人人对弈两种游戏类型。
其中五子棋人机对弈是计算机博弈中的一种。
研究其计算机算法，可以让我们看到人工智能的稚形，也有助于我们人脑的开发。
五子棋是我国发明的，研究它可以让更多的外国人了解五子棋，这有助于我国优秀文化的推广。
本系统是在HBuilder与h5语言环境下开发的一个直观大方的自定义界面的带部分AI功能的五子棋游戏，游戏程序实现人机对弈和人人对弈，自动智能计算最佳落子位置，而且程序能够自动的判定游戏的获胜方和游戏的结束与否，实现对战双方顺利进行博弈。
关键词：
五子棋；HTML；JavaScript;CSS;AI
目录
◆摘要———————————————————Ⅰ
◆目录———————————————————Ⅱ
◆第一章引言—————————————————1
v1项目开发背景—————————————1
v2项目开发目标—————————————1
v3项目开发的意义———————————1
◆第二章页面制作相关技术介绍—————————2
v1HTML————————————————2
v2JavaScript——————————————3
v3CSS————————————————4
v4AI————————————————5
◆第三章HTML开发五子棋的原型设计—————5
◆第四章游戏主要逻辑——————————6
◆第五章结束语———————————————7
◆参考文献—————————————————8
◆致谢———————————————————9
引言
v1.项目开发背景
五子棋是人们喜欢的一种棋类游戏，近来，随着计算机的快速发展，一计算机作为对战平台，各种棋类游戏如雨后春笋般纷纷冒出，使得那些喜爱下棋，又常常苦于没有对手的棋迷们能随时过棋瘾。
随着信息时代的不断发展，带动了游戏产业的飞速提升，游戏成为了生活中必不可少的娱乐方式之一。
游戏的种类逐渐从单一化向多元化发展。
其中休闲类游戏占据着游戏市场的重要位置。
无论是棋牌类游戏还是益智类游戏都备受大众喜爱，例如“斗地主”“麻将”“连连看”等；此外，游戏的开发模式也多种多样，各具特色。
其中，基于HTML5开发的游戏，以其独特的跨平台型和清凉型，切无需进行客户端下载与安装，即可进行游戏，实现“即点即玩”，获得了很好的用户体验，并且具有很强的社交传播性。
v2.项目开发目标
为了增强思维能力，有助于修身养性带动相关产业的发展，促进科学技术的提高。
游戏会分为人机对弈和人人对弈，以适应更多玩家的需求。
v3.项目开发意义
五子棋游戏的玩法少不了人机对战的模式，玩家和计算机各执黑棋和白棋，双方依次交替落子，任何一方首先实现5个棋子的连接则为胜利方。
其中，计算机的落子是通过算法计算实现的。
AI方首先需要遍历整个棋盘上还没有落子的交叉点，通过算法给这些交叉点分别计算得分，得分最高的交叉点则是AI方需要落子的地方。
依靠这种算法，AI方不仅需要连接5个棋子，还需要阻止玩家首先取得胜利，从而实现玩家与计算机的对战模式。
页面制作相关技术
v1.HTML
这次项目大部分是用html构造的，为什么要选html呢？
它其实是文本，它需要浏览器的解释，它的编辑器大体可以分为三种，
一：
基本文本、文本编辑软件使用微软自带的记事本或写字板都可以编写，当然，如果你用WPS来编写，也可以。
不过存盘时请使用.htm或者.html作为扩展名，这样就方便浏览器认出直接解释执行了。
二：
半所见即所得软件如：
FCK-EDITER、E-webediter等在线网页编辑器；
三：
所见即所得软件使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页。
四：
所见即所得软件与版所见即所得的软件相比开发速度更快，效率高，且直观的表现更强。
任何地方进行修改只需要刷新即可显示。
这次我用的是HTML5，它是HTML的最新标准，它提供了许多用以加强交互和多媒体支持的新元素，如Canvas,audio,video等，这些新元素使得浏览器不依赖Flash等第三方插件即可开发高质量的原生程序。
HTML5提供的Canvas是HTML5网页游戏开发中最重要的元素，它提供了新的网页编程接口，开发者可以通过JavaScript处理画布内的图像,可以在画布中绘制直线、圆、矩形等基本形状，实现游戏画面或其他虚拟图像的实时渲染，完成游戏画面的搭建，使游戏的开发变得更加便捷。
目前各大浏览器逐渐完善对Canvas渲染功能的支持，因此，使用Canvas绘制出的游戏画面运行速度明显加快。
与其他技术开发的游戏相比，基于HTML6开发的游戏有两点主要优势：
一是其相关技术免费开放、规范并且易于推广；二是无需安装插件，减少了用户的麻烦，提高了安全性，是众多游戏开发者的优先选择。
本设计基于HTML5进行五子棋游戏的开发，是用户在与计算机对战时充分开动电脑，体验简单的人工智能算法的下其逻辑，给用户体验带来一定的乐趣。
v2.JavaScript
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。
通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
总体来说它有以下几个特点：
一：
JavaScript是一种解释性脚本语言，主要用来向HTML页面添加交互行为，可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
它的跨平台特性，是它在绝大多数浏览器的支持下，可以在多种平台下运行。
二:
JavaScript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。
JavaScript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。
而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
三：
JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。
在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
在未来很长时间里都是热点语言，改进之后加上硬件提升，JavaScript甚至有可能成为一门主流的图形软件开发工具，毕竟配合HTML，CSS之后很易用，入门门槛很低。
然后看看node的发展情况，未来代替Python和PHP也说不定，JavaScript可是天然的web基因。
v3.CSS
CSS即层叠样式表（CascadingStylesheet）。
是一种用来表现HTML或XML等文件样式的计算机语言。
Web开发中采用CSS技术，可以有效地控制页面的布局、字体、颜色、背景和其它效果。
CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，只需要一些简单的修改，就可以改变网页的外观和格式。
总体来说，CSS具有以下特点：
一：
丰富的样式定义CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
二：
易于使用和修改CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。
总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
三：
多页面应用CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。
CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。
这样就可以实现多个页面风格的统一。
四：
层叠简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。
例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。
这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。
这次我用的是CSS3。
CSS3是CSS的升级版本，这套新标准提供了更加丰富且实用的规范，如：
盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等等，目前有很多浏览器已经相继支持这项升级的规范，如：
Firefox、Chrome、Safari、Opera等等。
在Web开发中采用CSS3技术将会显著的美化我们的应用程序，提高用户体验，同时也能极大的提高程序的性能
vAI
人工智能（ArtificialIntelligence），英文缩写为AI。
它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。
工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。
人工智能从诞生以来，理论和技术日益成熟，应用领域也不断扩大，可以设想，未来人工智能带来的科技产品，将会是人类智慧的“容器”。
人工智能可以对人的意识、思维的信息过程的模拟。
人工智能不是人的智能，但能像人那样思考、也可能超过人的智能。
人工智能是一门极富挑战性的科学，从事这项工作的人必须懂得计算机知识，心理学和哲学。
人工智能是包括十分广泛的科学，它由不同的领域组成，如机器学习，计算机视觉等等，总的说来，人工智能研究的一个主要目标是使机器能够胜任一些通常需要人类智能才能完成的复杂工作。
但不同的时代、不同的人对这种“复杂工作”的理解是不同的。
别的不说，在这次的项目里，系统可以实现电脑自动下棋，扫描整个棋盘记录连在一起的黑白棋子数，实现人与电脑有次序的下棋，判断人与电脑的胜负
HTML开发五子棋的原型设计
v1.思路框架
基于HTML5技术的五子棋游戏结合HTML5、CSS3和JavaScript进行开发，利用JavaScript调用Canvas自带的API对棋盘和棋子的绘制和游戏主要逻辑的编写。
如下图所示
v2.界面设计
棋盘设计：
棋盘大小为450x450像素的正方形，横竖各15条线，构成255个交叉点，也可以设计多种风格的棋盘供用户选择。
风格设计：
五子棋起源于中国，本次设计就以五子棋一贯以来的简朴风格的基调进行设计。
选用白色和灰色作为游戏界面的主色调。
棋子设计：
依旧是虽然简单但还是最具有代表力的黑白两种棋子。
v3.页面布局
游戏界面通过HTML进行布局，通过CSS进行样式调整，Canvas作为承载棋盘和棋子的画布。
游戏主要逻辑
v落子的实现
落子需要给棋子绑定一个onclick事件。
以黑子为例，当点击鼠标实现黑棋的落子，具体代买如下：
Chess.onclick=function（e）{varx=e.offsetX;
Vary=e.offsetY;
Vari=Math.floor（x/30）;varj=Math.floor（y/30）;oneStep（i,j,ture）;}
以上代码中，offset代表了HTML元素相对自己的offsetParent元素的位置，由于落子的实现是在棋盘中完成的，所以这里的父级为Canvas元素。
e.offsetX是相对于Canvas坐标系的左上角开始的坐标。
由于棋盘在Canvas绘制左右各留白15个像素，且黑白棋子和棋盘的每个格子各位30x30个像素。
棋盘的坐标系相对于Canvas向右下方移动了15个像素，所以棋子横纵坐标各整除30，刚好每隔30个像素落到横纵线的交叉点上，从而完成落子的实现。
v赢法数组的计算
首先用一个三位数组记录五子棋所有的算法，数组取得前面两位数据代表五子棋的棋盘坐标，第三个数据表示赢法的种类。
每种赢法在棋盘上只显示5个棋子，并且这些棋子相互连接成一条线，可以为横线、竖线或是斜线，用true代表交叉点存在棋子，棋盘上的其余位置都为false,表示没有棋子存在。
赢法数组的计算的部分代码如下：
varcount=0;
for（vari=0,i<15,i++）{
for（varj=0;j<11;j++）{
wins[i][k][count]=true;}count++;}
参考文献
[1]胡崧， HTML 从入门到精通[M].北京：
中国青年出版社，2015.
[2]知新文化， HTML 完全手册与速查辞典[M].北京：
科学出版社，2015.
[3]杨选辉，网页设计与制作教程[M].北京：
清华大学出版社，2015.
[4]李光明，曹蕾，余辉.中文Dreamweaver 8 网页设计与实训教程[M].北京：
冶金工业出版社，2013.
[5]周德华，许铭霖.新编网页设计教程[M].北京：
冶金工业出版社，2013.
[6]黎志雄，黄彦湘，陈学中，基于HTML5游戏开发的研究与研究[I].东莞理工学院学报，2014，21（5）：
48-53.
[7]吴少军，网页游戏开发新趋势与新技术漫谈[J].当代教育理论与实践，2012.4（6）：
175-176.
[8]余飞，HTML图形图像处理技术研究[J].软件导刊，2015,14（9）：
169-171.
沈柯，司占军，基于HTML5网页游戏分析[J].网络通信，2012（24）:
71-72.
感谢语
本论文在俞新凯导师的悉心指导下完成的。
导师渊博的专业知识、严谨的治学态度，精益求精的工作作风，诲人不倦的高尚师德，严于律己、宽以待人的崇高风范，朴实无法、平易近人的人格魅力对本人影响深远。
不仅使本人树立了远大的学习目标、掌握了基本的研究方法，还使本人明白了许多为人处事的道理。
本次论文从选题到完成，每一步都是在导师的悉心指导下完成的，倾注了导师大量的心血。
在此，谨向导师表示崇高的敬意和衷心的感谢!
在写论文的过程中，遇到了很多的问题，在老师的耐心指导下，问题都得以解决。
所以在此，再次对老师道一声：
老师，谢谢您!
时光匆匆如流水，转眼便是大学毕业时节，春梦秋云，聚散真容易。
离校日期已日趋渐进，毕业论文的完成也随之进入了尾声。
从开始进入课题到论文的顺利完成，一直都离不开老师、同学、朋友给我热情的帮助，在这里请接受我诚挚的谢意!
在此我向广州城建职业学院的软件技术专业的所有老师表示衷心的感谢，谢谢你们两年多的辛勤栽培，谢谢你们在教学的同时更多的是传授我们做人的道理，谢谢三年里面你们孜孜不倦的教诲!
三年寒窗，所收获的不仅仅是愈加丰厚的知识，更重要的是在阅读、实践中所培养的思维方式、表达能力和广阔视野。
很庆幸这三年来我遇到了如此多的良师益友，无论在学习上、生活上，还是工作上，都给予了我无私的帮助和热心的照顾，让我在一个充满温馨的环境中度过两年多的大学生活。
感恩之情难以用言语量度，谨以最朴实的话语致以最崇高的敬意。
最后要感谢的是我的父母，他们不仅培养了我对中国传统文化的浓厚的兴趣，让我在漫长的人生旅途中使心灵有了虔敬的归依，而且也为我能够顺利的完成毕业论文提供了巨大的支持与帮助。
在未来的日子里，我会更加努力的学习和工作，不辜负父母对我的殷殷期望!
我一定会好好孝敬他们，报答他们!
爸妈，我爱你们!
“天下无不散之宴席”这两年多来遇见过很多人，也经历过很多事，感恩身边支持我，陪伴我的每一位朋友。
希望每一位朋友总有飞黄腾达之日，过上自己想要的生活。
愿十年后你我还是老友，坐下来一起喝酒。
我的读书生涯就此落幕，以后社会见。
谢谢各位。
升级会员 