h5的五子棋论文

毕业设计论文院校广州城建职业学院院系信息工程学院班级姓名学号题目H5的五子棋指导老师日期2017年11月20摘要随着IT技术的发展，很多日常生活中的游戏都被搬到了计算机里供大家娱乐，尤其是博弈类的棋类游戏，如中国的象棋，围棋，五子棋等，今年来人们对人工智能技术的研究成果使得斯算计在这些博弈游戏中能战胜很多玩家。其次，五子棋作为一个棋类竞技运动，在民间十分流行，为了熟悉五子棋规则及技巧，以及研究简单的人工智能，决定用JAVA开发五子棋游戏。主要完成人机对战的功能。在人机对弈中通过深度搜索和估值模块来提高电脑旗手的智能。分析估值模块中的影响精准性的几个要素，以及提出一些提高精准性的办法，以及对它们搜索的节点数进行比较，在这些算法的基础山分析一些提高电脑AI方案，如递归算法、电脑学习等。算法的研究有助于理解程序结构，增强逻辑思维能力，在其他人工智能方面也有很大的参考作用。本系统是五子棋游戏，该系统采用面向过程的开发方法。主要包括问题定义、可行性研究、需求分析、总体设计、详细设计、编码和测试等部分。本系统主要包括人机对弈和人人对弈两种游戏类型。其中五子棋人机对弈是计算机博弈中的一种。研究其计算机算法，可以让我们看到人工智能的稚形，也有助于我们人脑的开发。五子棋是我国发明的，研究它可以让更多的外国人了解五子棋，这有助于我国优秀文化的推广。本系统是在HBUILDER与H5语言环境下开发的一个直观大方的自定义界面的带部分AI功能的五子棋游戏，游戏程序实现人机对弈和人人对弈，自动智能计算最佳落子位置，而且程序能够自动的判定游戏的获胜方和游戏的结束与否，实现对战双方顺利进行博弈。关键词五子棋；HTML；JAVASCRIPTCSSAI目录摘要目录第一章引言11项目开发背景12项目开发目标13项目开发的意义1第二章页面制作相关技术介绍21HTML22JAVASCRIPT33CSS44AI5第三章HTML开发五子棋的原型设计5第四章游戏主要逻辑6第五章结束语7参考文献8致谢9引言1项目开发背景五子棋是人们喜欢的一种棋类游戏，近来，随着计算机的快速发展，一计算机作为对战平台，各种棋类游戏如雨后春笋般纷纷冒出，使得那些喜爱下棋，又常常苦于没有对手的棋迷们能随时过棋瘾。随着信息时代的不断发展，带动了游戏产业的飞速提升，游戏成为了生活中必不可少的娱乐方式之一。游戏的种类逐渐从单一化向多元化发展。其中休闲类游戏占据着游戏市场的重要位置。无论是棋牌类游戏还是益智类游戏都备受大众喜爱，例如“斗地主”“麻将”“连连看”等；此外，游戏的开发模式也多种多样，各具特色。其中，基于HTML5开发的游戏，以其独特的跨平台型和清凉型，切无需进行客户端下载与安装，即可进行游戏，实现“即点即玩”，获得了很好的用户体验，并且具有很强的社交传播性。2项目开发目标为了增强思维能力，有助于修身养性带动相关产业的发展，促进科学技术的提高。游戏会分为人机对弈和人人对弈，以适应更多玩家的需求。3项目开发意义五子棋游戏的玩法少不了人机对战的模式，玩家和计算机各执黑棋和白棋，双方依次交替落子，任何一方首先实现5个棋子的连接则为胜利方。其中，计算机的落子是通过算法计算实现的。AI方首先需要遍历整个棋盘上还没有落子的交叉点，通过算法给这些交叉点分别计算得分，得分最高的交叉点则是AI方需要落子的地方。依靠这种算法，AI方不仅需要连接5个棋子，还需要阻止玩家首先取得胜利，从而实现玩家与计算机的对战模式。页面制作相关技术1HTML这次项目大部分是用HTML构造的，为什么要选HTML呢它其实是文本，它需要浏览器的解释，它的编辑器大体可以分为三种，一基本文本、文本编辑软件使用微软自带的记事本或写字板都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用HTM或者HTML作为扩展名，这样就方便浏览器认出直接解释执行了。二半所见即所得软件如FCKEDITER、EWEBEDITER等在线网页编辑器；三所见即所得软件使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页。四所见即所得软件与版所见即所得的软件相比开发速度更快，效率高，且直观的表现更强。任何地方进行修改只需要刷新即可显示。这次我用的是HTML5，它是HTML的最新标准，它提供了许多用以加强交互和多媒体支持的新元素，如CANVAS,AUDIO,VIDEO等，这些新元素使得浏览器不依赖FLASH等第三方插件即可开发高质量的原生程序。HTML5提供的CANVAS是HTML5网页游戏开发中最重要的元素，它提供了新的网页编程接口，开发者可以通过JAVASCRIPT处理画布内的图像,可以在画布中绘制直线、圆、矩形等基本形状，实现游戏画面或其他虚拟图像的实时渲染，完成游戏画面的搭建，使游戏的开发变得更加便捷。目前各大浏览器逐渐完善对CANVAS渲染功能的支持，因此，使用CANVAS绘制出的游戏画面运行速度明显加快。与其他技术开发的游戏相比，基于HTML6开发的游戏有两点主要优势一是其相关技术免费开放、规范并且易于推广；二是无需安装插件，减少了用户的麻烦，提高了安全性，是众多游戏开发者的优先选择。本设计基于HTML5进行五子棋游戏的开发，是用户在与计算机对战时充分开动电脑，体验简单的人工智能算法的下其逻辑，给用户体验带来一定的乐趣。2JAVASCRIPTJAVASCRIPT一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JAVASCRIPT引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。JAVASCRIPT是一种属于网络的脚本语言，已经被广泛用于WEB应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JAVASCRIPT脚本是通过嵌入在HTML中来实现自身的功能的。总体来说它有以下几个特点一JAVASCRIPT是一种解释性脚本语言，主要用来向HTML页面添加交互行为，可以直接嵌入HTML页面，但写成单独的JS文件有利于结构和行为的分离。它的跨平台特性，是它在绝大多数浏览器的支持下，可以在多种平台下运行。二JAVASCRIPT脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。JAVASCRIPT提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。三JAVASCRIPT是一种采用事件驱动的脚本语言,它不需要经过WEB服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JAVASCRIPT都可直接对这些事件给出相应的响应。在未来很长时间里都是热点语言，改进之后加上硬件提升，JAVASCRIPT甚至有可能成为一门主流的图形软件开发工具，毕竟配合HTML，CSS之后很易用，入门门槛很低。然后看看NODE的发展情况，未来代替PYTHON和PHP也说不定，JAVASCRIPT可是天然的WEB基因。3CSSCSS即层叠样式表（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技术将会显著的美化我们的应用程序，提高用户体验，同时也能极大的提高程序的性能AI人工智能（ARTIFICIALINTELLIGENCE），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。人工智能从诞生以来，理论和技术日益成熟，应用领域也不断扩大，可以设想，未来人工智能带来的科技产品，将会是人类智慧的“容器”。人工智能可以对人的意识、思维的信息过程的模拟。人工智能不是人的智能，但能像人那样思考、也可能超过人的智能。人工智能是一门极富挑战性的科学，从事这项工作的人必须懂得计算机知识，心理学和哲学。人工智能是包括十分广泛的科学，它由不同的领域组成，如机器学习，计算机视觉等等，总的说来，人工智能研究的一个主要目标是使机器能够胜任一些通常需要人类智能才能完成的复杂工作。但不同的时代、不同的人对这种“复杂工作”的理解是不同的。别的不说，在这次的项目里，系统可以实现电脑自动下棋，扫描整个棋盘记录连在一起的黑白棋子数，实现人与电脑有次序的下棋，判断人与电脑的胜负HTML开发五子棋的原型设计1思路框架基于HTML5技术的五子棋游戏结合HTML5、CSS3和JAVASCRIPT进行开发，利用JAVASCRIPT调用CANVAS自带的API对棋盘和棋子的绘制和游戏主要逻辑的编写。如下图所示2界面设计棋盘设计棋盘大小为450X450像素的正方形，横竖各15条线，构成255个交叉点，也可以设计多种风格的棋盘供用户选择。风格设计五子棋起源于中国，本次设计就以五子棋一贯以来的简朴风格的基调进行设计。选用白色和灰色作为游戏界面的主色调。棋子设计依旧是虽然简单但还是最具有代表力的黑白两种棋子。3页面布局游戏界面通过HTML进行布局，通过CSS进行样式调整，CANVAS作为承载棋盘和棋子的画布。游戏主要逻辑落子的实现落子需要给棋子绑定一个ONCLICK事件。以黑子为例，当点击鼠标实现黑棋的落子，具体代买如下CHESSONCLICKFUNCTIONEVARXEOFFSETXVARYEOFFSETYVARIMATHFLOORX/30VARJMATHFLOORY/30ONESTEPI,J,TURE以上代码中，OFFSET代表了HTML元素相对自己的OFFSETPARENT元素的位置，由于落子的实现是在棋盘中完成的，所以这里的父级为CANVAS元素。EOFFSETX是相对于CANVAS坐标系的左上角开始的坐标。由于棋盘在CANVAS绘制左右各留白15个像素，且黑白棋子和棋盘的每个格子各位30X30个像素。棋盘的坐标系相对于CANVAS向右下方移动了15个像素，所以棋子横纵坐标各整除30，刚好每隔30个像素落到横纵线的交叉点上，从而完成落子的实现。赢法数组的计算首先用一个三位数组记录五子棋所有的算法，数组取得前面两位数据代表五子棋的棋盘坐标，第三个数据表示赢法的种类。每种赢法在棋盘上只显示5个棋子，并且这些棋子相互连接成一条线，可以为横线、竖线或是斜线，用TRUE代表交叉点存在棋子，棋盘上的其余位置都为FALSE,表示没有棋子存在。赢法数组的计算的部分代码如下VARCOUNT0FORVARI0,I15,IFORVARJ0J11JWINSIKCOUNTTRUECOUNT参考文献1胡崧，HTML从入门到精通M北京中国青年出版社，20152知新文化，HTML完全手册与速查辞典M北京科学出版社，20153杨选辉，网页设计与制作教程M北京清华大学出版社，20154李光明，曹蕾，余辉中文DREAMWEAVER8网页设计与实训教程M北京冶金工业出版社，20135周德华，许铭霖新编网页设计教程M北京冶金工业出版社，20136黎志雄，黄彦湘，陈学中，基于HTML5游戏开发的研究与研究I东莞理工学院学报，2014，21（5）48537吴少军，网页游戏开发新趋势与新技术漫谈J当代教育理论与实践，20124（6）1751768余飞，HTML图形图像处理技术研究J软件导刊，2015,14（9）1691719沈柯，司占军，基于HTML5网页游戏分析J网络通信，2012247172感谢语本论文在俞新凯导师的悉心指导下完成的。导师渊博的专业知识、严谨的治学态度，精益求精的工作作风，诲人不倦的高尚师德，严于律己、宽以待人的崇高风范，朴实无法、平易近人的人格魅力对本人影响深远。不仅使本人树立了远大的学习目标、掌握了基本的研究方法，还使本人明白了许多为人处事的道理。本次论文从选题到完成，每一步都是在导师的悉心指导下完成的，倾注了导师大量的心血。在此，谨向导师表示崇高的敬意和衷心的感谢在写论文的过程中，遇到了很多