基于HTML5的棋牌游戏毕设论文Word格式.docx
- 文档编号:20412889
- 上传时间:2023-01-22
- 格式:DOCX
- 页数:36
- 大小:981.44KB
基于HTML5的棋牌游戏毕设论文Word格式.docx
《基于HTML5的棋牌游戏毕设论文Word格式.docx》由会员分享,可在线阅读,更多相关《基于HTML5的棋牌游戏毕设论文Word格式.docx(36页珍藏版)》请在冰豆网上搜索。
在电脑游戏中,单机游戏则是可以不用联网则能玩耍,如今基于HTML5开发的游戏也多为单机游戏。
本文则是通过象棋游戏来实现基于HTML5的游戏开发的基本过程与方法。
文中基于HTML5的棋牌游戏则是将以前的娱乐生活移到的网络上,在网页上也能玩象棋游戏。
通过HTML5的各种标签和功能来实现象棋游戏,例如通过canvas标签实现游戏部件操作。
此象棋游戏能通过鼠标对棋子的控制实现游戏过程,可以选点击按钮开始游戏,能实现真实象棋游戏过程中的功能,吃子、悔棋、胜负判断等。
其中行棋判断以及具体实现的方式例如行棋规则、游戏策略则是由JavaScript编写实现,最后通过CSS来修饰游戏界面文字的风格和游戏部件的布局等。
在Dreamweaver上编写、修改和运行游戏进行测试,最后,通过在不同的浏览器上进行在修改和测试,将象棋游戏所需要的功能完善。
【关键词】网页游戏HTML5象棋JavaScript
ABSTRACT
Today,thesocietyisawelldeservednetworklife,itistheboomingcomputertomakeourlifemorefurther.Therethetechnologycanbeseedeverywhere,sothatwelivewhetherthespiritormaterialaspectscanbesatisfied.Andnetworkgamesistoenrichourspirituallife,withtheadventofthecomputer,wealsohavethemorefun,fromthebeginningofthemine,untilnowallkindsoflarge-scaleonlinegames,computergameshasgraduallybecomeindispensableinthelifeofentertainment.Incomputergames,thestand-alonegamecanplaywithoutInternet,andnowthegamesdevelopmentbasedontheHTML5almostarestand-alonegames.
ThispaperistorealizethebasicprocessandmethodofgamedevelopmentbasedonHTML5bychessgame.Inthepaper,thechessgamebasedonHTML5isawaytomovethepreviousentertainmentoflifeontothenetwork,andcanalsoplaychessgameonthewebpage.ThroughthevarioustagsandfunctionsoftheHTML5toachievechessgames,suchasachievingoperatethegamepartsbycanvastags.Thischessgamecanthroughthemousecontrolofthepiecestoachievegameprocess,canbeselected,clickonthebuttontostartthegame,canachieverealchessgameintheprocessoffunction,eat,undo,determinetheoutcomeoftheother.Thechesstothejudgmentandtheconcreterealizationofthewaysuchaschessrules,gamestrategyisbyJavaScriptpreparedtoachieve,finallythroughtheCSStomodifythelayoutofthegameinterfacetextstyleandgamecomponentsandsoon.Write,modify,andrungamesonDreamweaver,andfinally,bymodifyingandtestingonthedifferentbrowsers,thegameneedstobeperfected.
【Keywords】webgamesHTML5ChinesechessJavaScript
前言
HTML5是HTML的第5次重大修改,在不断的改进中,于2014年10月29日定制完成,相比前几个版本的超文本标记语言,HTML5对我们来说无疑是全新的。
HTML5的新增元素让她在网页的功能性上更加全面和完善。
而正因为如此,HTML5在基于以前的超文本标记语言有何新颖之处,又会为网络世界带来何种改变,在文中,我用基于HTML5的象棋游戏有所阐述。
在日新月异的科技生活中,无论是虚拟世界观的网络游戏,还是在现实生活中就地取材的意趣游戏,电脑游戏已然成为人们不可或缺的娱乐方式。
而网络上的象棋游戏则是将生活中已有的娱乐方式展现到电脑上的其中之一。
相交玩游戏的不同方式,网页游戏则是其中之一,而做网页游戏有用Flash,或是HTML4加XML等。
基于HTML5的游戏相比之下则是更有优势,在全新的标准之下,能实现Flash的视觉效果,又不要Flash游戏所需要的大量内存,在功能性上更加全面,而不会想HTML4加XML游戏那般局限。
尽管HTML5给我们带来的好处在我们浏览网页时似乎并没有很直观的感受,但是网页上更加绚丽的图片效果,一些网页细微的界面改变,一些潜在的功能变化,无疑是HTML5带来的好处。
第一章HTML5概述
第一节HTML5的发展历史
一、HTML5的演变
随着计算机行业的发展,各种计算机技术也是日新月异的变化着,人工智能技术,感知型无人机,新型机器人等等,在不断的革新。
而作为万维网的核心语言,超文本标记语言(HTML)也完成了第五次重大修改,即HTML5[1]。
而我们平时浏览的集文字图片动画为一体的网页也是由HTML编写的,通过连接完成网页之间的跳转和切换。
最初的超文本标记语言与1993年首次以英特网草案的形式发布出来,在20世纪90年代中,HTML经过了大幅发展,从HTML2.0版到3.2版和4.0版,直至1999年的4.01版后,在业界普遍认知中,HTML的发展已穷途末路[2]。
在Web标准的焦点转移到XML(可扩展标记语言)和XHTML(可扩展超文本标记语言)上时,HTML5草案前身名为WebApplications1.0,于2004年被WHATWG(WebHypertextApplicationTechnologyWorkingGroup)提出。
于2006年WHATEG与W3C正式合作,在2007年被W3C接纳,并成立了新的HTML工作团队,而在双方经过8年来不懈努力,在2014年10月29日,HTML标准规范终于最终制定完成,并公开发布。
二、HTML5的革新
相比HTML4而言,HTML5取消了<
font>
<
center>
等标签,相关功能融合在CSS中,利于整体处理。
又结合了XHTML的header,aside,footer,dialog等标签[3],让处理对象语义清晰,分布明确,而非全部使用div,这些更改赋予了网页更好意义和结构。
新标准适用了一些全新的表单输入对象,使网页更容易管理,对搜索引擎更为友好。
新增的视频标签音频标签则是将多媒体对象从object和嵌入式标签中解放出来,更为合理。
而HTML5的新功能中,canvas对象,本地数据库,和API(ApplicationProgrammingInterface,应用程序编程接口)更是让网页更加出彩,浏览器不需要依借Flash和Sliverlight则能直接显示图片和动画,能加速交互式搜索,缓存和索引,更能实现浏览器内的编辑和GUI(GraphicalUserInterface,称图形用户界面)功能[4]。
第二节HTML5的优势
一、HTML5的新标签
上一节中列举的各种标签,丰富了HTML5的功能,如在旧的标准中,人们喜欢用<
divID=”header”>
来标记页眉区域,这样一来在大量的网页代码中,显得较为拖沓,而HTML5则是直接使用<
header>
标签,减少了不必要的复杂度,化繁为简。
在本节将详解几种新增的标签。
1、<
nav>
和多媒体标签
<
(网站导航块)和<
footer>
(定义页脚),这种标签有利于搜索引擎的索引整理,有利于SEO(SearchEngineOptimization,搜索引擎优化),能更好的帮助小屏幕装置使用。
除此之外还为浏览器提供了新的功能,如<
video>
和<
audio>
标签分别定义定义视频和音频,如此一来,网页则是不需要Flash插件则能直接播放视频音频,但是,<
标签只有部分高版本的浏览器支持。
在多媒体方面的标签除了<
之外还有<
source>
定义多媒体资源<
,<
track>
为诸如<
和<
元素之类的媒介规定外部文本轨道即字幕或其他可显示文本,<
embed>
则是定义嵌入类容,如插件,再有则是<
标签的存在,也让视频音频从<
标签中解放出来。
2、<
canvas>
标签
标签定义图形,比如如表和其他图像。
在网页中则是可以通过JavaScript在矩形画布中绘制路径、图形、文字以及添加图像。
通过canvasAPI能处理PNG和JEPG类型的图形,而这两种类型的图形也体现了canvas的像素性。
在HTML4中无法绘制的对角线能在canvas中实现,再有则是在video中抓取的帧能通过canvas显示出来,用户单击canvas则能播放该帧视频,由此一来,便是浏览器用原生功能实现了播放视屏插件的功能,如此一来我们便不再需要插件来播放视频,带来的好处则是避免了插件带来的广告和特殊环境下对插件的封锁。
而从某种意义上讲,<
标签的出现让Flash逐渐退出舞台[5]。
3、表单标签
datalist>
定义选项列表,<
keygen>
规定用于表单的密钥对生成器字段<
output>
定义不同类型的输出,比如脚本的输出。
相交于输出,输入类型的元素也更多元化,如能允许本地日期、时间、数字、颜色等的选择。
二、HTML5的新功能
除去上节中讲到的新增标签,HTML5还有新增的功能让HTML5更有优势。
本地数据库,这个功能将内嵌一个本地的SQL数据库,以加速交互式搜索,缓存以及索引功能。
实现了脱机浏览Web应用程序的缓存,而应用程序缓存则是能让我们离线浏览,让已缓存资源加载的更快,不需要重复下载浏览过的资源,只下载更新或已更改资源,从而减少服务器的负载。
HTML5支持内联SVG(ScalableVectorGraphics,指可伸缩矢量图形),是相交canvasAPI绘制图形的另一种图形功能,而且是处理矢量图形。
SVG图形有矢量图的特性,在放大缩小的情况下不会改变图片的质量且不会损失。
且SVG图片可通过文本编辑器进行处理,可被搜索、索引、或压缩,可伸缩,能高质量打印。
由此一来,便能实现图像搜索功能。
除此之外还有地理定位,webworker,HTML5服务器发送事件等功能。
HTML5GeolocationAPI用于获得用户的地理位置,而因为保护隐私,该定位功能则是需要用户同意。
webworker则是在后台运行的JavaScript,生成多个线程,保证页面及时响应,不会影响页面功能。
而HTML5服务器发送事件功能则是能让网页自动获得服务器的更新,而不需要像以前一样时时询问服务器以求更新,如此一来我们便能直接看到已更新的微博、新闻等。
第三节本章小结
本章讲述了HTML5从HTML1.0版本到如今最新标准的历程,以及HTML5在相关方面的优势。
而从中可见的是,HTML在多年来体现了其生存力,尽管在一段时期曾次于XML和XHTML,但正是这样将XML和XHTML等的优势融合为一体成就了HTML5。
将陈旧拖沓的标签出去,创新新的标签,引进新的功能,将网页的浏览完善,减少插件的使用,多用浏览器的原生功能,如此用户体验则是更为完美快捷。
尽管HTML5的部分功能或是标签并非所有浏览器所有操作系统都能实现,尽管对于新标准各个公司并没有那么热情,但是HTML5的优势在那里,其可移植性,适应性等等将会为我们网上生活带来更加精彩的一面。
游戏作为现在生活中不可或缺的一部分,而且的种类也是非常多,而HTML5在游戏开发方面也有其特点,下一章则是从游戏方面体现HTML5的优势。
第二章基于HTML5的游戏
第一节准备工作
一、什么游戏
无论是基于HTML5游戏开发,或是Java还是C++等,在准备做之前,都会想到要做一个什么样的游戏。
是一个人物众多,世界观完善的大型游戏,还是一个类似推箱子一样的小游戏,对于游戏而言,其游戏规则则是十分重要的。
无论什么游戏,只要游戏规则完善了,才能明确这是一个什么游戏,从而继续接下来的工作。
二、绘制部件
在游戏中,各种直接面向我们的,则是游戏中的元素,就推箱子而言,推箱子的背景,人物,箱子,都需要事先绘制,或是象棋游戏中棋盘或是棋子,无论是HTML5游戏或是.net游戏等都不能忽略。
尽管矢量图不会失真,但是难以表现色彩层次丰富的逼真图像效果,体现游戏的精彩,位图为首选。
在HTML5中,通过canvasAPI绘制图形是能精确至像素,再则因为游戏中各种游戏部件会出现层叠,PNG格式的图片能满足要求。
PNG格式的图片能色彩绚丽,又能保持背景透明。
而基于HTML5的游戏开发中,对与游戏内容的操作也可以通过canvas部件来回图形,同时canvas也能将所需要处理对象的控制精确的像素。
第二节JavaScript、CSS特性
一、JavaScript
JavaScript是一种直译式网络脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型[6]。
在HTML5中,很多特殊功能需要JavaScript来完善,为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果,通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的,而生成js文件。
JavaScript简单且能基于对象,或是自己创建对象。
它本身是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。
在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
由此一来则可以通过JavaScript用鼠标进行事件触发来控制游戏部件,从而进行一些基础的游戏操作。
JavaScript也不仅仅是有事件触发功能,在游戏中所需要的各种特殊功能,或是特定游戏规则,某种特定的效果,也或者是其他的需要完善的功能等,都可以通过JavaScript编程来完成。
而因为JavaScript本身的组成部分BOM(浏览器对象模型,描述与浏览器进行交互的方法和接口)可以内置在网页内,也可以写成单独的js文件利于网页结构和行为的分离使网页结构更加明确。
二、CSS
CSS即层叠样式表,是HTML5将网页布局调整功能集合为一个文件样式的计算机语言[7]。
相较于以前的HTML版本来说的,CSS将网页中需要排版调整的对象集中在一起,更加方便,从宏观上讲能更加直观的调整整个布局,而从微观上讲CSS能将网页中的对象排版精确到像素。
再有则是CSS支持更多的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。
CSS在调整布局方面的优势由此可见,CSS与JavaScript的一样可以分离于主代码,让主题代码显得更加直观,而CSS的单独布局则让后期修改显得更加方便。
也可以直接写入网页,或是直接嵌入到需要调整的对象中去。
除了CSS对于布局的掌控能力,CSS也将传统的网页布局格式变得更加精简。
CSS将大量的布局设置,字体样式、颜色、大小集合为一体,由于CSS文件可以让站内所有网页使用,代码的精简让网页重构难度降低,自然而然让网页的访问速度变得更加快速。
也正是因为代码的精简,让网页中的主要内容变得更加突出,有利于搜索引擎的抓取。
而这些优势在开发大型游戏时,尽管结构庞大而复杂,但是在全观范围内,修改布局则是变得更加方便,因为CSS的外联让网页浏览速度变得快速,由此一来,用户对于游戏的体验则是更加完美,快速。
还有则是,CSS包括的几乎所有的字体样式,和其初步的交互设计让用户能体验更加绚丽更加人性化操作的游戏内容。
第三节HTML5游戏
在2014年,一款名为《围住神经猫》在朋友圈火了起来,除去游戏本身的趣味性,而该游戏的可移植性,让该游戏如此火速的传播。
这款游戏是一款基于HTML5开发的游戏,游戏本身开发的过程花费时间不可谓不短,只仅仅一个半小时,这也从侧面体现HTML5的易掌握性。
通过基于HTML5的小游戏与其他基于Flash的游戏而言,HTML5的游戏在不同平台的存活性很高,在功能相同的情况下不会像Flash一样占用更多内存,而HTML5在对操作对象上也能精确控制。
在微信朋友圈人气火爆也体现了HTML5的游戏在公众服务平台的传播优势,对于开发者来说,快速的开发过程给予了更多的纠错时间,其游戏本身的移植性在推广上汲取了更多的利益,而HTML5游戏无需下载直接可玩则是能让更多的用户尽快的体验游戏。
尽管优势可人,但是,在浏览器上,HTML5的游戏还是不能避免自己代码的泄露[8],也就是说HTML5的游戏很容易产生“山寨货”,各种平台上的移植性也容易携带病毒。
第四节本章小结
在本章介绍了做HTML5游戏的基本思路和所需要的基本功能,和游戏开发所需要HTML5的部分技术支持[9]。
相较于其他的游戏编程,HTML5游戏的功能性和主页面基本分开,能在很大程度上减少后期代码修改的麻烦。
CSS文件统筹页面的布局风格修改,有利于游戏整体风格的把握,在导入图片对象方面,基于HTML5的游戏对于浏览器的原植性,利于游戏的平台生存兼容和传播。
更有JavaScript的功能性修改与调节,能将游戏本身的乐趣更大程度的表现出来,且JavaScript功能的完整性与HTML5的新标签与新功能的结合,将会为我们带来更好的游戏体验。
HTML5的游戏除了《围住神经猫》之外,还有很多其他的游戏,像《割绳子》,《全民寻找房祖名》等等,在熟悉了HTML5之后,做好了开发游戏的准备,自己慢慢动手也能做出HTML5游戏。
第三章基于HTML5的象棋游戏开发
第一节中国象棋游戏
一、中国象棋
中国象棋游戏,众所周知,是汉族棋类益智游戏,在古代,象棋被列为士大夫们的修身之艺,现在则被视为是怡神益智的一种有益身心的活动。
象棋的棋盘绘制,在方形的平面上,有九条平行的竖线和十条平行的横线相交组成,共有九十个交叉点,棋子就摆在交叉点上。
中间部分,也就是棋盘的第五,第六两横线之间末画竖线的空白地带称为“河界”。
两端的中间,也就是两端第四条到第六条竖线之间的正方形部位,以斜交叉线构成“米”字方格的地方,叫作“九宫”(它恰好有九个交叉点),绘制如图3.1。
而棋子分红黑两组,功32个,红黑双方各16个。
红棋子:
帅一个,车、红棋子:
帅一个,车、马、炮、相、仕各两个,兵五个。
黑棋子:
将一个,车、马、炮、象、士各两个,卒五个。
各个棋子的行走规则如下:
帅(将),红方为“帅”,黑方为“将”。
帅和将是棋中的首脑,是双方竭力争夺的目标。
它只能在"
九宫"
之内活动,可上可下,可左可右,每次走动只能按竖线或横线走动一格。
帅与将不能在同一直线上直接对面,否则走方判负。
仕(士),红方为仕,黑方为士。
它也只能在九宫内走动。
它的行棋路径只能是九宫内的斜线。
士一次只能走一个斜格。
象(相),红方为“相”,黑方为“象”。
它的走法是每次循对角线走两格,俗称“象飞田”。
相(象)的活动范围限于“河界”以内的本方阵地,不能过河,且如果它走的“田”字中央有一个棋子,就不能走,俗称“塞象眼”。
车,车在象棋中威力最大,无论横线、竖线均可行走,只要无子阻拦,步数不受限制。
俗称“车行直路”。
因此,一车可以控制十七个点,故有“一车十子寒”之称。
炮,炮在不吃子的时候,走动与车完全相同,但炮在吃子时,必须跳过一个棋子,我方的和敌方的都可以,俗称“炮打隔子”、“翻山”。
马,走动的方法是一直一斜,即先横着或直着走一格,然后再斜着走一个对角线,俗称“马走日”。
马一次可走的选择点可以达到四周的八个点,故有“八面威风”之说。
如果在要去的方向有别的棋子挡住,马就无法走过去,俗称“蹩马腿”。
兵(卒),红方为“兵”,黑方为“卒”。
兵(卒)只能向前走,不能后退,在未过河前,不能横走。
过河以后可左、右移动,但也只能一次一步,即使这样,兵(卒)的威力也大大增强,故有“过河的卒子顶半个车”之说。
图3.1中国象棋棋盘
二、象棋规则
1、行棋规则
对局开始前,双方棋子在棋盘上的摆法如图3.2。
对局时,由执红棋的一方先走,双方轮流走一步,。
轮到走棋的一方,将某个棋子从一个交点走到另一个交叉点,或者吃掉对方的棋子而占领其交叉点,都算走了着。
双方各走一着,称为一个回合。
走一着棋时,如果己方棋子能够走到的位置有对方棋子,则能吃掉对方的棋子,并占据该位置。
一方的棋子攻击对方的帅(将),并在下一着要把它吃掉,称为“照将”,或简称“将”。
“照将”不必声明。
被“照将”的一方必须立即“应将”,即用自己的着法去化解被“将”的状态。
如果被“照将”而无法“应将”,就算被“将死。
图3.2中国象棋棋子摆法
2、胜负规则
赢:
己方的帅(将)被对方棋子将死或吃掉。
己方无子可走(被困毙)。
己方对对方“长将”或“长捉”己方发出认输请求;
有步时要求的,己方走棋超出步时限制。
有时间要求的,超过规定时间。
违反比赛规则。
出现下列情况之一,为和棋:
双方均无可能取胜的简单局势。
一方提议作和,另一方表示同意。
双方走棋出现循环反复三次,符合“棋例”中“不变作和”的有关规定。
符合自然限着的回合规定,即在连续60个回合中(也可根据
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 基于 HTML5 棋牌 游戏 论文
![提示](https://static.bdocx.com/images/bang_tan.gif)