基于HTML5游戏开发的研究与实现--《东莞理工学院学报》2014年05期
基于HTML5游戏开发的研究与实现
【摘要】：作为下一代的Web标准,HTML5的功能不断细化并趋于稳定,并拥有许多引人注目的新特性。其中canvas标签的引入,使HTML5可以动态地生成各种图形、图表以及动画,已具备游戏开发的条件。与传统基于flash游戏开发不同的是,利用HTML5开发无需使用外部插件,基于浏览器的网页游戏,更加适合于使用HTML5开发。对此,本课题以家喻户晓的喜羊羊与灰太狼为案例,对HTML5游戏开发进行研究与实现。
【作者单位】：
【关键词】：
【分类号】：TP317【正文快照】：
HTML5的前身是Web Applications 1.0,由WHATWG于2004年提出。2007年它被W3C接纳,并于日发布第一份正式草案[1]。HTML5将成为HTML、XHTML以及HTML DOM的新标准。HTML5的迅速发展,带动了游戏产业的崛起。开发者凭借HTML5制作出创收丰富的游戏作品。其中,磊友科技推出
欢迎：、、)
支持CAJ、PDF文件格式，仅支持PDF格式
【共引文献】
中国期刊全文数据库
尤胜;;[J];电子世界;2014年04期
刘智萍;;[J];软件导刊;2014年10期
刘同波;史洪飞;;[J];医疗卫生装备;2014年02期
沙飞;杜菁;刘文艳;潘清;王珂;谢艳;田新;翟阳阳;李宁;;[J];中国医学装备;2014年11期
中国硕士学位论文全文数据库
刘玉;[D];北京交通大学;2014年
娄启林;[D];北京交通大学;2014年
王昊;[D];山东大学;2014年
蒋超;[D];重庆大学;2014年
乔淑夷;[D];中国海洋大学;2014年
杨建军;[D];西安电子科技大学;2013年
【相似文献】
中国期刊全文数据库
王轶男;黄舒怀;;[J];程序员;2005年01期
;[J];多媒体世界;1995年09期
郭纯一;[J];光盘技术;1996年01期
赵礼海;[J];电脑;1996年10期
;[J];电脑迷;2008年20期
王晓彬;余雪丽;;[J];电脑开发与应用;2009年04期
周松捷;;[J];信息系统工程;2010年09期
江洪;;[J];电脑编程技巧与维护;2010年21期
曲蕴慧;白新国;;[J];福建电脑;2012年12期
赵剑平;[J];中国电子出版;1999年02期
中国重要会议论文全文数据库
陈立鹏;;[A];2008'中国信息技术与应用学术论坛论文集（一）[C];2008年
中国重要报纸全文数据库
证券时报记者
邓常青;[N];证券时报;2014年
;[N];电脑报;2004年
本报实习记者
魏冬;[N];北京人才市场报;2003年
任卫;[N];大众科技报;2004年
陈杰;[N];北京商报;2010年
石丹;[N];经理日报;2003年
;[N];计算机世界;2003年
李文;[N];市场报;2005年
;[N];电脑报;2004年
;[N];计算机世界;2003年
中国硕士学位论文全文数据库
张樊钧;[D];上海交通大学;2011年
何非;[D];电子科技大学;2008年
朱晴;[D];上海交通大学;2009年
邹会来;[D];浙江师范大学;2011年
刘宇;[D];复旦大学;2010年
陈栋梁;[D];大连理工大学;2013年
於鑫;[D];华东师范大学;2010年
张驰;[D];四川大学;2006年
吴霏宬;[D];北京交通大学;2014年
胡盛行;[D];北京邮电大学;2006年
&快捷付款方式
&订购知网充值卡
400-819-9993
《中国学术期刊（光盘版）》电子杂志社有限公司
同方知网数字出版技术股份有限公司
地址：北京清华大学 84-48信箱 大众知识服务
出版物经营许可证 新出发京批字第直0595号
订购热线：400-819-82499
服务热线：010--
在线咨询：
传真：010-
京公网安备75号北京 东城区
公司官网：
微信公众号：weiweihx
微信订阅号：wwhuaxia
YY频道：6197
微微华夏（北京）网络科技有限公司成立于日，是国内唯一获得中国电子商务协会移动互联网微应用服务中心颁发的微商学院牌照的公司，并于日完成授牌仪式。公司聚集了国内众多优秀的互联网企业从业人员，我们将依托中小企业微电商成长计划，整合服务商、电商平台等资源，帮助传统中小企业（或个体）向移动互联网转型。
《中国好微商》是微微华夏（北京）网络科技有限公司重金打造的在线直播访谈栏目，大胆创新的将电视访谈栏目搬进了移动互联网频道。4月26日首播10分钟粉丝达3万，突破了YY直播粉丝记录。我们将免费面向全国微电商创业者提供专业的培训，旨在帮助更多的草根创业者解决微商环节中遇到的所有的营销问题并提供一揽子解决方案。其中包含了微营销培训、内容企划、品牌建设、微产品开发、微招商代理、微广告投放、微媒介（全网）推广、全明星服务等增值内容以及微电商天使投资。
在这里，我们有最前沿的微电商资讯；在这里，我们有最接地气的微电商干货交流；在这里，我们有最草根的微电商创业者的分享和专业培训。
我们是一家创业型平台，如果你有创业的激情；如果你有创业的梦想。我们期待你的加盟，共同携手去开创微商时代的奇迹。
[北京 海淀区]
[北京 海淀区]
经验应届生
101－300人
[北京 海淀区]
经验应届生
[北京 海淀区]
经验应届生
[北京 朝阳区]
经验应届生
101－300人
[北京 东城区]
经验应届生
[北京 海淀区]
301－500人
[北京 海淀区]
经验应届生
[北京 昌平区]
[北京 海淀区]
经验应届生
101－300人
移动互联网
101－300人
，可查看联系方式哦！
北京丰台区方庄南路158号
关注英才微信，轻松跟踪应聘进展
扫二维码，主管排队等你勾搭
ICP经营许可证编号 京ICP证060405号 京ICP备号-12 京公网安备37号 Copyright (C) 北京五八信息技术有限公司 版权所有论述HTML5给游戏开发领域带来的影响_中国电子商务研究中心
电商门户 互联网+国家战略智库
当前位置： &
& 论述HTML5给游戏开发领域带来的影响
论述HTML5给游戏开发领域带来的影响
&&日19:34&&中国电子商务研究中心
　　(中国电子商务研究中心讯)Will Eastcott是电子游戏领域的技术专家，曾供职于EA、索尼和动视，从事AAA游戏开发，他同时还是PlayCanvas的联合创始人，这是家专门为HTML5游戏提供云端托管开发及发行服务的平台。在本文中，他将就此新兴技术如何影响游戏开发者发表自己的看法，论述为何这一语言是游戏开发的下个前进方向。　　你多半看过这些标题。&游戏机已消亡！&&HTML5是未来趋势！&　　围绕HTML5技术的讨论通常会引起轰动，且存有偏见。现在我们暂且将此弃置一旁，秉承客观态度。如下是我的主张：HTML5将从根本上改变我们制作电子游戏的方式。在我解释其中原因之前，让我先概述当前HTML5的运用进展情况。　　过去30年来，我们见证这样的总体趋势：硬件平台日益强大，且通过持续进步的工具和语言生态系统探索其中硬件的策略日益获得优化。朝超真实游戏空间迈进的趋势未曾间断，其中主机制造商逐步向开发者提供日益强大的技术。　　但随着手机游戏的兴起，我们看到新情况。玩家希望能够随时随地通过任意设备和任意好友共同体验简单游戏。这些目前是用户的主要需求。技术依然非常重要，精致像素也很重要，但这里更重要的是，游戏通俗易懂且保持连网。有什么比网络浏览器更通俗易懂且更适合连网？　　那么制作这类游戏的选择有什么？你可以从零开始编写内容，但瞄准1个以上平台对于小型开发团队来说是个过高要求。这里存在Flash选择(游戏邦注：虽然Flash技术似乎逐步变得越来越缺乏吸引力)。放弃移动平台且关于Stage3D授权成本的令人困惑消息给开发者带来众多消极影响。　　例如，我们享有Havok Vision Engine和Unity之类的引擎选择。这些引擎通常通过专属插件瞄准桌面浏览器，通过本地架构锁定手机设备。然后就是HTML5技术。在你最终选择HTML5之前，把握其优点且知道如何降低其弊端非常重要。下面就来深入查看具体内容。　　持续演变的标准　　HTML5尚未定型。W3C和WHATWG标准小组依然在持续开发这一技术，因此浏览器供应商追踪的是流动目标。因此，HTML5的支持水平因浏览器而异。　　有关跨浏览器不一致问题，我们经常提到的例子是声音。目前行业主要有3种API：Mozilla的Audio Data API、Google的Web Audio API和Audio元素JavaScript API。最近，Mozilla宣布弃用自己的API，很快将开始执行Web Audio。因此显而易见的是，浏览器供应商正积极创新HTML5平台，且朝此平台靠拢，以简化开发者们的生活。　　浏览器供应商都积极提供新HTML5 API，尤其是向游戏开发者。3个主要例子是GamePad API (这能够读出所有本地支持平板设备的输入内容)、Pointer Lock API (隐藏鼠标光标，读出原始鼠标操作)及Fullscreen API (这能够将任何HTML元素转变成全屏模式)。　　这些API都在短暂时间里以连贯方式匹配及植入各种浏览器中。随着它们的出现，诸如第一人称射击游戏之类的作品突然间更容易在HTML5技术中落实。　　JavaScript　　代码员对于编程语言怀有强烈情感。出身游戏机背景的人员多半会以怀疑态度看待JavaScript。这是另一有待学习的新语言，JavaScript将比对应的C++代码速度缓慢，矢量化之类的优化策略在JS中缺乏可行性。此外，游戏代码公开于浏览器的开发者工具中，供大家查看。　　这里我们有必要引用Douglas Crockford的主张，JS是&全世界最容易被误解的编程语言&。对于C++程序员来说，学习JavaScript轻而易举。它在句法特征在和C++存在密切联系，虽然闭包之类的概念及&this&关键词需要我们适应一段时间。　　对于那些不喜欢C++语言刻板及繁琐特性的人员来说，JavaScript就是个奇妙的动态语言。一等函数之类的强大功能将显著降低代码的编写工作量，缩短工作时间。转投JavaScript的开发人员多半不会走回头路。　　表现比你想象的好很多。首先，Web Workers API允许JavaScript中的多线程编程。其次，也是更重要的一点是，JavaScript引擎在过去几年里取得很大进展。举例来说，开源物理引擎Bullet已有JS端口，虽然表现不突出，但这说明，你可以通过JS以合理速度运行若干CPU密集型算法。　　让我们面对现实&&克隆存在于所有平台，但关于HTML5游戏，记住若干要点非常重要。Google Closure Compiler之类的工具在优化源码方面表现突出，基于模糊源码的移植工作与访问原始代码并不相同。随着代码库尺寸的日益扩大，要进行反向设计就变得越发不切实际。其次，若游戏包含在线要素，那么很多代码就可以运行于服务器上，客户只是单薄的想像者。很多&价值&隐藏于服务器中。　　2D vs. 3D　　设计游戏的一个最根本决策是，图像是基于2D，还是3D模式。2D HTML5游戏通常采用2D背景，这可以通过页面上的画布元素进行查询。各主要浏览器目前都对于2D画面背景给予良好支持，因此若你的游戏是基于精灵元素，那就没有什么可担忧的。　　若你打算开发3D游戏，那么事情将更加复杂化。在HTML5游戏中获得高质量、硬件加速3D图像的唯一方式是，运用WebGL，这是个几乎和OpenGL ES 2.0相同的JavaScript界面。桌面平台的WebGL支持在Chrome和Firefox中表现尤其突出，只有Internet Explorer不予以支持。幸运的是，Google Chrome Frame有效缓解微软对于WebGL的抵制，虽然苹果尚没有在Safari中默认支持WebGL，但这目前可供开发者进行利用。　　WebGL自1.0规格2011年3月发布以来已取得很大进展。随着OpenGL ES 3.0在SIGGRAPH上揭开面纱，可以确信，相应规格WebGL 2.0的问世将用不了多久时间。这对3D浏览器游戏来说无疑是激动人心的时刻。　　移动平台支持　　HTML5游戏在桌面平台表现不俗，但将其转移到桌面平台并非微不足道的事情。宣称针对桌面平台的HTML5游戏将能够轻松移植至移动平台完全是夸大其词。你需要准备较弱等级的CPU(游戏邦注：意味着较缓慢的JavaScript执行)和GPU(若你锁定3D平台，这意味着顶点和片段吞吐量有所降低)。　　屏幕分辨率通常相差甚远，基于HTML5技术开发游戏无法提供能够顺利运作于桌面和移动平台的控制装置。移动平台的WebGL支持目前还处在胚胎阶段，虽然具体面貌6个月后多半会变得截然不同。　　在此期间，有若干选择值得研究。诸如PhoneGap、AppMobi及CocoonJS之类的技术可以将HTML5游戏包装成原生内容，这带来更杰出的表现。此时的一个局限因素是，这些技术不包含可行WebGL支持，但某些中间软件开发者很可能已经在寻找解决方案。　　简化开发工作　　坦白说，开发HTML5游戏非常简单。浏览器带来稳固的开发平台，尤其是当和若干硬件供应商提供的工具进行比较时。　　工具本身无需付费，主要植入浏览器中，编码过程没有编译步骤。JavaScript的动态性质带来强大的&编辑并继续&型开发，时时存在的主机非常便捷。网络开发主要着重于快速更新时间和简单性。　　API简洁直观，且由于网页开发者的庞大社区，这里存在众多样例代码和实况指南。　　可访问性　　若说计算机存在什么普遍范例，那就是通过浏览器导航至网页地址，消费置于其中的内容。尽管如此，玩家通常很没有耐心。要求他们下载或安装内容，你无疑会在第一阶段就丧失众多用户。不是所有玩家都倾向或能够安装专属浏览器插件，以顺利运行游戏。　　HTML5游戏无需安装或获得权限就能够运行，和有些人的看法相反，它们可以在初期下载后长久存储于设备中。显然，若你的游戏不要求网络连接，这能够促进离线体验。　　因此若你的游戏经历的是快速、无缝隙的页面加载过程，你将拥有将其变成关卡1的愉快玩家。　　寻找用户　　自Google I/O 2012起，Google Chrome就独自积累了3.1亿活跃用户，这一数据超越当代游戏主机的数量。当你查看其它支持HTML5的浏览器时，你会看到更庞大的用户。　　仅是你的游戏搭载URL，能为全世界所见并不意味着用户就能够找到它。曝光度也扮演重要角色。众所周知，应用商店拥有有限的&商店橱窗&，游戏很容易淹没在众多内容中。HTML5游戏也不例外，但其拥有若干原生应用所没有的突出优势。　　作为网页，它们能够被搜索引擎索引，获得有机曝光。而且还有各种游戏门户和商店，包括Chrome Web Store，在此你可以提高自身作品的曝光度。但这不仅限于网页推广渠道。举个例子，你可以将自己的HTML5游戏打包成包含嵌入WebView元素的原生应用，然后在Mac App Store上进行出售。　　覆盖尽可能多的用户非常重要，HTML5让你能够结合许多推广渠道，而非利用单个渠道。　　获得关注　　不管你喜不喜欢，制作基于尖端&热门&技术的游戏能够带来更高的曝光度。若你编码两款相同的游戏作品，一个基于C++技术，一个基于HTML5技术，哪款游戏更容易获得媒体关注相当明显。这未必公平，但这就是HTML5当前的情况&&用户急切想要看到开发者在此有什么发挥，开发者在此享有很多开拓机会。　　重新思考基于HTML5的开发工作　　希望你现在能够更好判断HTML5技术是否是适合自己的项目。但这是讨论方面尚存在不足的地方。HTML5并非只是推进电子游戏内部结构的系列标准，我们不应只基于此进行判断。　　这推进新生代的生产力应用，带动这样的潮流：将我们的数字生活转移到云端服务器。这一趋势具备惊人潜力，改变我们用于制作电子游戏的工具和流程，我们还尚未触及其表面。　　云端服务器窗口　　现在，我们将使用云端应用看作平常事。网页邮件目前是最热门的例子，在此我们曾经对将我们的私人信函存储在远程服务器上持谨慎态度，我们现在对此非常放松。如今我们拥有基于云端应用形式的各式各样生产力应用：文字处理器、图像编辑器和代码编辑器等。　　云端服务器给游戏带来许多有利条件。用户无需安装任何内容，因为网页应用从服务器输(游戏邦注：或是浏览器的存储器)送至浏览器。工具总是保持更新，这确保用户相互保持同步，总是采用最新且最杰出的内容。用户数据总是安全备份，能够恢复原状。用户的操作系统或浏览器可能甚至被粉碎，内容将被提前保存到服务器中。　　对于开发工作来说，这些是有用功能，要让用户查看云端机制，你需要一个浏览器。什么是在浏览器中创建界面的最佳方式？我认为是HTML5。虽然我们可以通过Flash、Java或编写定制插件执行游戏工具，但关于编写复杂网页应用，HTML5是最具扩展性的解决方案。随着ExtJS、Google Closure和SproutCore等便捷网页应用框架的持续发展，这一情况将变得日益突出。　　合作新方法　　通过多年来接触各种不同的游戏编辑器，我发现，它们多数都通过整合某种形式的版本控制支持合作模式。游戏通常由众多也被我们称作&关卡&的文件构成。关卡也许以XML或其他格式保存。若有两人或多人同时编辑此数据文件，有几点事项需要注意。首先，用户A也许不知道用户B改变了什么，反之亦然。其次，当用户A做出变更时，用户B需要将自己的调整同用户A合并。　　我们可以将工具限制成专属检验，但这只是意味着，一个用户可以阻止另一用户，阻挡开发工作。若能够基于自动化模式，进行合并完全没有问题，但这并非总是具有可行性。从视觉上合并代码是代码员习惯做的事情，但你要怎么让设计师凭直觉手动合并两组关卡数据？虽然这具有可行性，但这是个很难解决的问题。　　所以让我们采用不同方法。若我们的开发工具都在云端服务器运作，所有用户都连接于同个服务器，为什么不让用户进行无缝隙编辑？HTML5再次给予我们一切必要元素。　　通过WebSockets(通过TCP的双向沟通)，我们可以在用户间进行流编辑，这样即时合作就具有可行性。只要采用这种方式，亲身体会到其中益处，你就不会想要回到传统的&专属检验&单用户环境。　　社交游戏开发　　若你是位编码员，你肯定拥有GitHub或BitBucket账号。短短几年前，我们多数人都满足于安装Subversion或Perforce的本地实例。为什么不？它们是基础软件，能够有效备份和管理你的代码。　　那么为什么版本控制会变成一种服务？这有许多原因，但主要推动因素是社区。代码员能够以前所未有的方式进行互动，追踪其他开发者或有趣项目，在做出更新后接收即时通知。漏洞和功能能够通过忠实粉丝基础获得修复和添加。相比以ZIP存档形式入驻某人的硬盘驱动器或个人网站，在此项目更有机会获得曝光度。　　所以为什么要让编码员享受所有乐趣？相同原则也许和游戏开发更具关联性，在此整个过程被当作是网络服务。这包括代码开发，同时还覆盖资产管理、关卡编辑、本土化、QA和发行之类的其他功能。　　让我们面对现实：制作游戏非常复杂，独自制作(优秀)游戏并未多数开发者所享有的选择。所需的整套技能通常过于复杂。开发者需要相互找到彼此，参与自己最感兴趣的游戏项目中。是否想让社区替你创建额外关卡？这不是问题。需要将你的游戏翻译成西班牙语？也许粉丝能够提供帮助。　　跨平台必杀技　　将游戏推向其他平台非常重要。这能够扩展潜在用户，进而促使游戏取得更杰出的商业成绩。距离Sun Microsystems编撰出Java编程语言的&一次性编写，随处运作&短语已过去很多年，多数当代游戏中间设备都基于此设计理念。　　跨平台对于游戏开发工具来说也非常重要。约是15年前，工具程序员会基于MFC之类的技术创建应用。随着时间的流逝，更优质的技术日益推陈出新，令.NET应用开发变成小菜一碟&&但这依然仅限于Windows平台。在我们的跨设备生活中，必须坐在桌面PC前，方能访问项目着实非常局限。你应该要能够通过具有连贯界面和合适控制装置的工具在任何设备上访问、编辑及发行你的作品。　　基于HTML5创建的界面非常简洁直观，将网页应用设计成跨平台模式是条屡试不爽的路线。　　一个链接之遥　　HTML5作为工具技术所存在的关键优势是，所有内容都存储于URL。构成游戏的各种资源都能够通过特定网页地址进行访问：脚本文件、纹理、声音、关卡或者甚至游戏本身。若新资产被添加至项目中，开发者可以立即通过Tweeter、IM(即时通讯)或邮件发布链接。其他人无需同步任何内容；能够立即进行浏览。　　这同时还简化游戏的发行工作。若游戏已存在于服务器中，具有可玩性，那么将其发行至更广阔的网络只是访问权限的问题。开发者要能够轻松快速实时呈现游戏&&无需上传内容，无需编写HTML。发行工作应该只是在网页前端中拉动若干简单杠杆。　　总结　　关于编写电子游戏，没有什么完美的技术。根据你想要制作的游戏，以及你所设定的商业目标，充分把握选择某技术所带来的影响非常重要。HTML5带来一个非常杰出的平台，不只是为了推动游戏，还为了推动我们创建游戏所运用的工具。若你能够适应它的局限性，应对持续变化的标准，那么你就能够变得更富生产力，游戏就能够覆盖更多用户。　　未来，制作游戏的过程将变得更加便捷。开发工具将运行于更多平台上，更易于使用，合作将日益简单化。游戏开发者的全球社区将获得巩固，知识的流通将更加顺畅。最终结果是，更多人将制作出更杰出的作品，我们作为用户将享有更丰富的选择。若没有网络、HTML5和Open Web Platform，所有这些都将无法实现。(来源：游戏邦)
&&&& 随着“双11”、“黑五”的落幕，电商门户、互联网+智库――中国电子商务研究中心对消费者在跨境进口网购领域的投诉进行盘点，发布《“双11”&“黑五”跨境进口网购投诉报告》，小红书、网易考拉海购、丰趣海淘、西集网、冰帆海淘、洋码头、宝贝格子、京东全球购、亚马逊海外购、达令、天猫国际、淘宝全球购、聚美海外购、唯品国际、蜜芽、贝贝网、拼多多、美美箱等被点名。更多“双11”&“黑五”相关投诉，详情请登陆
【】【】【】【】【】
「关键字」
& &（1）凡本中心注明“来源：中国电子商务研究中心”或带有中国电子商务研究中心水印LOGO的所有文字、图片、音频、视频及其他任何形式的作品 ，其版权均属中国电子商务研究中心所有，任何媒体、网站或个人未经本中心协议授权不得转载、链接、转贴或以其他方式复制发布/发表。已与本中心协议授权的媒体、网站，在下载使用时必须注明“稿件来源：中国电子商务研究中心”，违者本中心将依法追究责任。
& &（2）转载或引用本中心内容必须是以新闻性或资料性公共免费信息为使用目的的合理、善意引用，不得对本中心内容原意进行曲解、修改，同时必须保留本中心注明的“稿件来源”，并自负版权等法律责任。
& &（3）对于不当转载或引用本中心内容而引起的民事纷争、行政处理或其他损失，本中心不承担责任。
& &（4）凡本中心注明“来源：xxx（非中国电子商务研究中心）”的文/图等稿件，均转载自其它媒体、网站与机构，其转载目的在于传递更多信息，并不代表本中心赞同其观点和对其真实性负责，请读者仅作参考，并请自行核实相关内容，如其他媒体、网站或个人从本网下载使用，必须保留本网注明的“稿件来源”，并自负版权等法律责任。& &（5）关于本中心发布的用户投诉稿件，信息均由用户通过本中心投诉通道提供，本中心不对其真实性负责，若内容真实性有误，请与本中心联系，本中心将在核实后进行处理。& &（6）对不遵守本声明或其他违法、恶意使用本中心内容者，本中心保留追究其法律责任的权利。& &（7）如因作品内容、版权和其它问题需要同本中心联系的请发送相关内容至邮）& &此版权声明解释权归中国电子商务研究中心所有。
　　2016年中国电子商务依旧快速发展。仅上半年，据中国电子商务研究中心监测数据显示，中国电子商务交易规模达10.5万亿元，同比增长37.6%。电商经济已步入&新常态&，增速保持平稳增长状态。B2B继续发力...
生态型企业：
行业热点：
曝光专区：
有以下事宜，请联系：&&
有以下事宜，请联系：
有以下事宜，请联系：
以下企业，请联系：
以下企业，请联系：
以下企业，请联系：
以下人士，请联系：
行业/频道：
产品/服务：
数据/研究：
导航/平台：
中国电子商务研究中心 版权所有微信开发HTML5轻游戏中的几个坑
发表于 09:40|
来源深海的博客|
摘要：基于微信开发的HTML5游戏，开发者需要克服哪些坑呢？又该如何推广呢？本文转自深海的博客，他分享了具体开发实现过程中，基于微信的Html5 WebApp需要注意哪些细节以及如何用代码实现。
【编者按】现如今微信为各种移动Web的小应用提供了肥沃的土壤，于是乎形形色色的应用孕育而出。人人都可以做开发，但不是每个人都能开发出好的应用，在开发过程中开发者会应注意哪些“坑”呢？本文转自，他分享了在具体开发实现过程中基于微信的Html5 WebApp需要注意的细节以及如何用代码实现。&全文如下：不同于传统的手游商店下载模式，HTML5 手机网页游戏是可以直接运行在微信内置的浏览器里。这段时间团队一直在做微信端的一些产品设计和开发，当然也包含一定的运营工作。做过的东西也不少，微名片、微抢票、微活动、微招聘等一些小case。今天想说的是我们在微信中被玩的最活跃的轻游戏--微刮奖，这东西可以被用来刮书、刮门票、刮套餐，还有客户要用来刮电话费。先上图，感知一下具体样子：而我想分享的是我们在具体开发实现过程中，基于微信的Html5 WebApp需要去克服的一些坑：这个小游戏的基本规则是：限定用户每天刮书次数是2次 （自由刮一次和分享后再刮一次），每天都可刮奖为此，我们希望实现的思路首先是限定在只能使用微信中玩，实现代码如下：if (!HttpContext.Current.Request.Browser.IsMobileDevice)
var result = new RedirectResult("url", true);
filterContext.Result =
if (string.IsNullOrEmpty(HttpContext.Current.Request.UserAgent))
var result = new RedirectResult("url", true);
filterContext.Result =
if (HttpContext.Current.Request.UserAgent.IndexOf("MicroMessenger") == -1)
var result = new RedirectResult("url", true);
filterContext.Result =
}这招通过UserAgent的判断思路貌似网上大家也用的比较多，不用却依然存在挺多坑：1. 初级问题：iOS和主流Android机器没问题，但碰到Windows Phone，就直接在微信中跳出去无法玩。原因是微信中默认的UserAgent是MicroMessenger，在这些机器的微信版本中不存在，所以为了解决Windows Phone，我们加入了如下代码：　var useragent = HttpContext.Current.Request.UserAgent.ToLower();
if (useragent.IndexOf("Windows Phone".ToLower()) != -1)
base.OnActionExecuting(filterContext);
}2. 高级问题：有高人直接使用一些插件工具，伪造MicroMessenger的UserAgent，这样理论上就可以在任何可以打开网页的浏览器中玩了，解决此问题，我们利用的是微信的sdk中接口：仅当用户在微信中使用时执行控件初始化刮奖操作，否则其他终端浏览就会一直处于loading状态。　dataForWeixin.callback = function () {
//一些初始化的操作
}关于微信的接口大家直接阅读原文，这边不直接贴代码出来了，不然贴不下。上面的思路做了很多事，但对我们的业务规则来说还有一个很致命的bug没有解决。这个bug就是只要用户手动清除微信中的cookie和缓存信息，然后重新进入活动，就能无限次刮奖，理论上是百分百中奖了。这是由于我的规则将判断当前微信用户是否刮过奖的判断依据放在了cookie中，貌似除此以外也没有其他办法。想利用openid，但我们的微信订阅号，如果从朋友圈过来的话都无法获取openid，还是依然存在上诉问题。&为了解决这个问题，最后我们终于找到了一条思路，借用微信服务号的授权接口，基本思路如下：用户进入页面loading=》程序调用我们另外一个微信服务号的授权接口，返回openid=》将openid存入cookie（若不存在或过期，则重新执行前面步骤）=》根据openid从数据库判断本期活动刮了几次，同时，这个过程会自动判断用户是否在微信中玩游戏，否则回调将一直处于loading状态。整个过程使用下来，还比较流畅。这边贴一下授权相关的代码：#region 微信授权
public ActionResult WeixinLogin(string CurrentUrl)
string url = WeixinOAuth2.Authorize(Server.UrlEncode(CurrentUrl));
return RedirectPermanent(url);
public ActionResult WeixinCallback()
if (!string.IsNullOrEmpty(Request["code"]))
// 获取AccessToken参数
var param = WeixinOAuth2.GetAccessToken(Request["code"]);
string url = string.Format("{0}#access_token={1}&openid={2}&expires_in={3}&state={4}", ConfigHelper.GetValue("Weixin_Callback"), param.access_token,param.openid,param.expires_in, Server.UrlDecode(Request.QueryString["state"]));
//重新跳转到回调页面，保持腾讯登录相同风格
return Redirect(url);
return View();
　　　　/// &summary&
/// 授权请求页面
/// &/summary&
/// &param name="flag"&0为获取微信基本信息 1为获取微信openid接口&/param&
/// &returns&&/returns&
public static string Authorize(string ReturnUrl)
string url=string.Format("https://open./connect/oauth2/authorize?appid={0}&redirect_uri={1}&response_type=code&scope=snsapi_base&state={2}#wechat_redirect", Weixin_AppKey, Weixin_GetOpenIDCallback, ReturnUrl);
　　　　#endregion至此，在微信中解决如何判断当前用户的唯一性问题，基本上完全可以搞定。针对这套方案唯一存在的风险就是微信的接口的通畅性和稳定性。当然，在整个开发过程中还有很多其他问题需要一一克服，比如，微信分享后回调的实现，相应很多朋友都要用，还比如这种小游戏我们甚至需要支持grps下流程访问，不可能那些很大的游戏框架，这怎么搞等等问题，这些打算后面再慢慢写些文章分享，今天的东西够多了，先歇歇去。原文出自：由CSDN和《程序员》杂志联合主办的&&将于8月23日在北京举行，主办方还邀请了来自于一线的微信开发商技术负责人或资深工程师从企业应用开发高级篇、智能客服与LBS、微信支付、微信上的HTML5社交应用、微信小店开发等角度为与会者带来实战分享（&&）。目前报名处于优惠票价阶段，通过申请加入CSDN CTO俱乐部即可享受8折购票价格（票款中均含午餐），在前完成付款的同学还将免费获赠微信开发图书一本（两选一，活动现场发放）。光开发出一款产品还不行，还需有得到有效的推广，那么如何利用免费的方式来推广呢？前Zynga中国总经理、云智联CEO田行智将带来《》的主题分享，解读《碰碰里》是如何验证0推广、无任何激励手段，但却拥有每天100K 自然增长的微信HTML5应用。欢迎大家到现场与田行智深度沟通。目前，&（持续关注更新）。另外，主委会还开设了&，欢迎技术精英自荐和互相推荐，也可以直接联系&。此外，主办方还特别开设了&（&）现在就去&。微信开发者QQ群：（已满）和微信开发者② QQ群：，欢迎加入交流。相关阅读：&关注&，了解更多研发资讯，参与互动讨论；当然您可以向我们推荐更多有趣、有质量的文章。&
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章