基于HTML5技术的游戏开发与实现

信息与电脑2019年第9期China Computer & Communication软件开发与应用基于HTML5技术的游戏开发与实现阳晓霞　谭　卫（河源职业技术学院，广东 河源　517000）摘　要：HTML5技术的发展，也带动了游戏行业的飞速发展。基于HTML5技术的连连看游戏是一款休闲益智类的小游戏，主要利用了HTML5新增的Canvas标签来布局页面，使用CSS3.0修饰页面，利用JavaScript脚本实现游戏的主要逻辑。HTML5游戏开发周期短，可移植性强，已成为近年来游戏行业最热门的关键词之一。关键词：HTML5；Canvas；连连看；JavaScript中图分类号：TP317　　文献标识码：A　　文章编号：1003-9767（2019）09-069-03Development and Implementation of Game Based on HTML5 TechnologyYang Xiaoxia, TanWeiAbstract:

The development of HTML5 technology has also led to the rapid development of the game industry. The Lianliankan

(Heyuan Polytechnic, Heyuan Guangdong 517000, China)game based on HTML5 technology is a casual puzzle game. It mainly uses the new Canvas tag of HTML5 to layout the page, uses

short and portable, and it has become one of the most popular keywords in the game industry in recent 3.0 to decorate the page, and uses JavaScript script to realize the main logic of the game. The HTML5 game development cycle is

Key words: HTML5; Canvas; lianliankan; JavaScript０　引言HTML5充当救世主。多组代码、不同技术类型、业务逻辑HTML5正在引领时代的潮流，必将开创互联网的新时是同步，这是一个折磨人的过程。有点像个人电脑的早期世代，随之也带动了游戏行业的飞速发展。与客户端网游相比，界，那时，每台计算机都有自己的操作系统和编程语言，开网页游戏的商业模式复制成本低，研发和运营需投入的资金发人员厌倦了开发不同版本的软件，事实上，DOS的普及成本相对较低、研发周期相对较短，游戏上线后资金回笼速也很大程度上是由于开发人员没有精力给其他计算机编写程度快，企业可快速运转，这令网页游戏备受游戏开发商青睐，序。在早期，跨平台技术大多因性能问题而夭折，但中后期长期保持着高速增长。而HTML5游戏更是以其独特的跨平的硬件能力增强后又将成为主流，因为跨平台确实需要。现台性和轻量性，获得了很好的用户体验，无疑成为了近年来代流行的浏览器支持都HTML5（Chrome，Firefox，Safari，游戏行业最热门的关键词之一[1]。IE9和Opera）。使用HTML5开发的游戏可在所有主流浏览１　ＨＴＭＬ５开发游戏的优势器上运行，因此可进行一次开发，多处使用，同样的业务逻辑而代码不同的痛苦将彻底结束[2]。1.1　安全1.3　不需要插件就能支持IOS设备HTML5游戏与APP游戏的不同之处在于它们没有各种安已故乔布斯大神曾说：“没人愿意使用Flash，全球已全问题，例如收费陷阱，随机广告和非法窃取用户信息，因为开始步入H5时代”。HTML5的Canvas标签允许进行更多在浏览器中运行的HTML5游戏非常安全，并且值得用户信任。的交互和动画，就像人们用Flash实现的效果一样，用户不1.2　跨平台需要预先安装第三方插件Flash来玩游戏。出于某种原因，Apple不允许Flash播放器在其Safari移动版本上运行，恰好在多屏时代，开发者的痛苦指数非常高，每个人都希望HTML5和相关Web标准弥补了这一缺陷。作者简介：阳晓霞(1982—)，女，湖南衡阳人，硕士研究生，高级工程师。研究方向：HTML5网页设计、大数据分析。谭卫(1981—)，女，湖南岳阳人，硕士研究生，高级工程师，讲师。研究方向：网站开发、UI设计。—　　　６９　　　—

软件开发与应用信息与电脑China Computer & Communication2019年第9期1.4　突破常规浏览器游戏限制for (var i=0; i<8; i++) {在传统的游戏设计中，它通常仅限于在特定范围内构建var rectObj={

游戏，就像在电视机上玩视频游戏一样，用户只能在Web浏 width:50,height:50,color:"rgba("+parse览器的方框里玩Flash游戏。在HTML5游戏中，游戏阶段Int(255*())+","+parseInt(255*Math.不再局限于单个框。人们希望能与所有页面元素进行交互，random())+","+parseInt(255*())+",255)"}并且可使用多个浏览器窗口来构建游戏。 (rectObj);}1.5　天然的营销推广利器以上代码中，每创建一个种子色块，就存入recObj变量中，通过for循环8次，创建8个随机颜色种子色块。应用商店中的应用推广存在问题。几十万个应用程序的3.2.2　创建全体色块商店，一个新的应用程序肯定会不堪重负。但是，如果它是种子色块创建完成后，接下来要创建游戏的全体色块，基于HTML5的，那么基于PC互联网的在线广告和在线营因为连连看每次消除两个对象，所以色块必须成对出现，销可在移动互联网中派上用场。例如，国外的Facebook、需要设置一个常量step=2。用两次for循环完成创建，同时Twitter、谷歌等，国内人人、新浪微博、腾讯开放平台等都为了避免自己与自己消除，必须在for循环内部新建变量有可能成为H5游戏开发和推广的乐土。H5游戏的未来也将newObj。走向移动化与社交化。var step=2;以上是HTML5游戏的五大优势，是其他开发游戏无法比var newarr=[];拟的。在整个技术领域，HTML5开发始终站在最前沿，直面function sum (step) {用户体验，已成为互联网行业中最紧俏的高端技术定位[3]。for (var i=0; i

信息与电脑2019年第9期China Computer & Communication软件开发与应用var str=newarr[i].x+","+newarr[i].y+","+newarr[i].生的安卓程序要轻量，开发成本低，另外网页上的H5游戏比width+","+newarr[i].height;Flash省资源，且跨平台，只需支持H5的浏览器即可，而且var event=new addEvent(cobj,"rect",str,function () {现在绝大多数的浏览器是支持H5的，周期短，可移植性强，if(i==numarr[0]||i==numarr[1]){后期业务修改比较方便，添加新功能时比较方便。HTML5游return;}戏是未来的发展趋势，未来5～10年内前景非常好。(newarr[i]);(i);if(==2){if(arrs[0].color==arrs[1].color&&numarr[0]!=numarr[1]){参考文献arrs[0].color="rgba(0,0,0,0)";[1]董春侠,司占军.基于HTML5技术的五子棋游戏的arrs[1].color="rgba(0,0,0,0)";设计与开发[J].微型机与应用,2017,36(11):w();[2]黎志雄,黄彦湘,陈学中.基于HTML5游戏开发的研究与实现[J].东莞理工学院学报,2014,21(5):48-53.４　结　语[3]传智播客高教产品研发部.HTML5+CSS3网站设计基基于HTML5技术的游戏设计相对来说比较轻量级，比原础教程[M].北京:人民邮电出版社,2016:36.（上接第68页）同的应用中不同浏览器只有两种活动的请求信息。在进行优５　结　语化过程动作时，主要通过简化服务器请求的方式开展，通过随着网络技术的发展，传统Web中的同步交互过程，会减少请求量的方式优化系统，达到减少AJAX下载时间的优

延长响应时间，甚至会出现超时等问题，在同步交互的作用下，化目的。数据信息的改变重新刷新整个页面，导致资源浪费问题显著。为了有效避免因为浏览器请求带来的相关问题，可通基于GWT技术开发AJAX应用则可有效解决此种问题，是一过配置Web服务器方式发送Expires HTTP头给客户端，种有效的技术手段，而且，能自动处理浏览器之间的兼容性问通过发布页面过期的时间，避免浏览器在过期时间之前发题，使开发更加方便快捷。总的来说，GWT提供的工具可大送信息的请求，只需要在Apache中的htaccess文件中添加ExpiresDefault“now plus 1 year”就可达到效果，Apache幅度提升AJAX性能指标，AJAX应用相对于传统Web应用来说，性能得到有效的优化，在应用性上来说具有质的飞跃。会基于具体状况给符合＊.cache.＊模式的文件进行处理，通过添加expires头的方式，配置匹配的应用文件信息；在Tomcat环境中可以通过直接添加servlet过滤器方式添加头参考文献部信息。通过增加servlet过滤器的方式较为简单，通过在[1]张业骏.基于GWT和个性化算法的教学资源推荐系WEB-INF/文件中添加相关过滤器相关声明，进而了统的研究[D].沈阳:沈阳师范大学,2016:14.解过滤器的位置，通过doFilter的方式添加Expires头。在[2]张松炎.基于GWT的手持测试设备图形界面配置系GWT技术应用中，要在不符合＊ .nocache.＊模式的文件添统的设计与实现[D].成都:电子科技大学,2014:32.加Expires头，而nocache文件在系统中无需进行缓存，其含[3]咸振海.基于GWT框架的人力资源信息管理系统的有符合版本选择的逻辑需求。设计与开发[D].济南:山东大学,2013:69.—　　　７１　　　—