本篇文章给大家谈谈html5游戏,以及如何开发一个简单的HTML5Canvas小游戏的知识点，希望对各位有所帮助，不要忘了收藏本站！
内容导航:
- 怎么运行html5游戏的源代码
- HTML5游戏持续升温白鹭开放平台付费次数破亿
- HTML5游戏开发的5条实用建议
- html5游戏开发需要学习什么技术
- HTML5游戏会比NativeApp更快吗
- html5小游戏开发教程
- 如何开发一个简单的HTML5Canvas小游戏
Q1:html5游戏、怎么运行html5游戏的源代码
HTML5游戏是通过html+javascript+css技术开发的游戏，属于网页游戏，可以运行在HTML5的网页浏览器中。
运行HTML5游戏，需要一个支持HTML5的网页浏览器，比如IE10或11，google的chrome浏览器，火狐firefox，百度浏览器，或者UC，QQ浏览器，猎豹浏览器。早期的IE9以前的版本是不行的。浏览器可以到百度搜索下载，然后安装。使用方法就是普通的上网。
下载的HTML5游戏文件解压后，文件夹中会有一个后缀为html的文件，应该是在根目录下。其他文件可能有js后缀，css后缀，或者图片，请保持相对位置不能动。
然后下面你就需要运行那个html文件了：
方法1：
你可以打开浏览器，将html文件拖拽到浏览器中。
方法2：
也可以在文件夹中选中html文件，点右键，在菜单选择“打开方式”，然后选择火狐或Chrome浏览器即可。
Q2:HTML5游戏持续升温白鹭开放平台付费次数破亿、
6月17日，由白鹭时代发行的最新HTML5游戏巅峰之作《暗黑之王》开启第一百组服务器，同时迎来了白鹭开放平台累计第1亿人次付费的诞生，这个光鲜的数字背后，不仅有HTML5市场热度的支撑，优质产品的自身魅力也吸引了数目庞大的HTML5重度游戏玩家，更有众多优质渠道助力了H5行业的发展。越来越多的大CP、大产品也开始进入HTML5行业，HTML5游戏也从偏交互的轻度休闲游戏向重度游戏转变，一系列优质的重度HTML5游戏接连出现在移动游戏市场上。 截止到发稿日，仅2016年上半年，白鹭开放平台发行渠道数量从去年底的200家增加到现在的1000多家。综合1000多家渠道和Html5市场曝光的数据，和2105年相比已经有了巨大的变化。目前HTML5游戏行业内数据显示，HTML5游戏平均激活转化率为5%，优质产品能够达到8%~10%甚至更高，这其中固然有游戏自身品质的原因，也与游戏推广渠道品质密切相关。在付费率上，HTML5游戏总用户付费率平均达到2.5%，优质产品付费率则能够达到6%~10%。在游戏内付费次数上，平均每个账号在游戏中付费5次，优质产品甚至有更高的付费空间，短信代收费的逐步普及也极大地刺激了H5游戏付费率以及游戏内付费次数的提升。 作为新兴的移动游戏载体，HTML5游戏的玩家数量在近一年来拥有爆炸性的增长， 实用建议">Q3:HTML5游戏开发的5条实用建议、HTML5很棒，因为它几乎无所不能——它并不是为某种特殊的应用设计的。更重要的是，HTML5几乎是无处不在的。它就在你的PC机上、你的手机上、你的平板设备上——它甚至可能就在你的厨房电器上。
正是由于HTML5具有丰富的功能并且无处不在，所以它给开发者带来了很多的灵感。俗话说得好，“一旦开发者有了灵感，他们就开始编写游戏了。”（这句话应该是作者编的）
幸运的是，有关HTML5游戏开发的指南现在已经有很多了。而这篇文章则是要告诉开发者在开发HTML5游戏以前应该具备的一些全局概念。你能 从这篇文章中学到什么 这里会介绍HTML5游戏开发的一些框架，你将知道如何使你设计的游戏能够在 实用建议。
建议1：使用框架
如果只是用HTML5编写一些小程序其实非常简单，但如果想往你的游戏中加入更丰富的功能，那么就有许多其他的事情需要处理了。
比如，如果你的游戏中有大量的图片、音效或是其他的资源，那么浏览器需要从你的游戏服务器上下载这些资源，这往往需要花费很多的时间。如果你在 编写程序的时候没有考虑这些问题，那么你也许会对最后的结果感到意外。由于图形和声音文件都是异步下载的，也许在你的资源下载好以前你的 JavaScript脚步已经开始运行了。这就是所谓的“爆音”现象（图像显示异常），而声音也可能在错误的时间播放。一个好的解决方法就是创建一个预先 下载机制，保证所有的资源下载完以后才允许脚本执行。
另一个你可能碰到的问题就是你的游戏在不同的机器甚至是浏览器中运行的速度有所不同。虽然这也许在你的控制范围以外，但你还是可以尽量使得你的动画或是动作的速度不依赖于游戏运行框架的速度。
其实，现在有许多的游戏模板代码，里面实现了大多数游戏需要的功能。这样，开发者不需要从头到尾编写一个完整的游戏程序。现在有许多框架可以帮助开发者设计游戏，开发者只用关注具体的游戏逻辑，而不用担心如何使游戏顺畅运行这些细节问题。
使用框架时唯一需要注意的一点就是如何从众多的框架中挑选一个合适的框架。像ImpactJS这样的框架功能非常强大，几乎可以在各个 方面为开发者提供帮助；而像EaselJS的框架则主要是处理图形方面的工作。最后，还是需要由开发者决定使用哪种框架更加合适。这看起来似乎很简单，但 在JavaScript的世界里面，选择一个框架时也意味着你选择了一种特定的编程风格。
ig.module( 'monster' ) .requires( '*.game', ) .defines(function(){ Monster = ig.Entity.extend({ eyes : 42 }); });ImpactJS就是一个很好的例子，它不仅提供了图像显示和音效处理的方法，还在实现中插入了自己的对象和模型。
Ascended Arcade三个月内发开了三款游戏，全部使用的是ImpactJS的框架
虽然现在已经有很多HTML5游戏使用了一些框架，但是还是有很多开发者不嫌麻烦地选择不依赖任何框架完全自己开发。如果你想在合理的时间内完 成任务，使用框架当然是最有效的方法。Ascended Arcade就是一个很好的例子，在短短三个月的时间里，他们就开发出了三个游戏，全部使用了ImpactJS框架。
建议2：将小屏幕和触屏设备考虑在内
HTML5最大的卖点之一就是它既能在桌面PC上使用，也能在笔记本电脑、平板设备甚至是智能手机上运行。（这里有IE9在Windows Phone 7 Mango上的运行效果演示）。
HTML5与生俱来就具备了跨平台的特性，通常为开发者节省了很多工作。然而，有些事情是需要开发者考虑的…
SpyChase在Windows Phone 7 Mango上的运行效果
首先也是最重要的一点，不同的设备屏幕的尺寸也有所不同，屏幕的宽高比以及分辨率可能有很大的差别。如果想让你的HTML5在移动设备上拥有良 好的效果，确保它支持多种分辨率并且不超过WVGA的800×480框架大小。此外，由于大多数的移动设备无法在一个屏幕上显示所有的页面内容，他们常常 采用精确的缩放和平移技术，而这些技术通常并不适用于游戏的编写。可以在编程的时候使用viewport meta标志禁用这些功能。下面的代码片段可以用来使你的游戏视图根据屏幕的实际水平宽度自动调节。移动浏览器上的缩放功能常常与触控游戏控制功能产生冲 突，可以将“user-scaleable”参数设置为“no”，从而禁用浏览器的缩放功能。
现在你已经能够将你的游戏视图很好地呈现在小屏幕设备上了，接下来就该考虑如何处理用户输入的问题了。大多数触屏设备都有一个虚拟键盘，但是在 玩游戏的时候显示一个虚拟键盘实在太浪费空间了。你应该开发一个有限的虚拟键盘，只提供游戏中使用到的按键（比如箭头）。当然，最好是尽可能在游戏中不需 要使用额外的元素。Spy Chase在这方面做得很好，用户只用一个手指就能控制游戏中的汽车了。
建议3：自动保存用户的记录
使用 site pinning,web浏览器试图让Web Apps可以像桌面apps一样工作。但是，让网站像Apps一样运行的想法还比较新鲜，同样的，让Web页面保存客户端的状态也尚未成熟。用户在关闭 Microsoft Word的文档时可能会思考一下内容是否已经保存，而在关闭Web页面时往往不会这么仔细了。通常这并不会带来什么问题——大多数的Web页面是没有状态 的，或者是将用户的记录保存在了服务器上。
但如果是处理浏览器游戏，情况就完全不同了。通常在客户端执行的是JavaScript代码，HTML5游戏通常将游戏的状态缓存在内存中（RAM）。一旦关闭浏览器窗口，用户辛辛苦苦赢得的高分就永远地丢失了。
你可以要求用户小心一点，不要将正在进行的游戏窗口关闭，但是意外总是会发生的，尤其是当用户开了多个窗口或是电池没电的时候。
长话短说：在编写HTML5游戏时，最好是经常将游戏玩家的进度状态保存一下，当用户重新打开关闭的web页面时，应该让用户可以继续之前没有结束的游戏而不是重头来过。
你应该将用户的记录保存在哪里呢 过去， 案往往是服务器端的数据库或是客户端的cookie。但是这两个都不是最佳的选择。如果是在服务器 端，则会产生额外的HTTP请求开销。如果是cookie的话，则可以保存记录的空间非常有限，并且cookie的寿命取决于浏览器的配置。
一个更有效的方法是使用HTML5 DOM storage。DOM Storage提供了一个key-value存储（或是JavaScript定义的对象）的接口，可以为每个网站保存几兆的数据。使用起来非常方便，但是 在HTML5游戏中，你可能想要记录一些更加复杂的数据结构——这些DOM storage本身可能并不支持。幸运的是，现在的JavaScript提供了一套机制帮助开发者将一组对象压缩成一些紧凑的符号，这就是JSON机制。 使用这套机制，DOM storage可以保存任何格式的信息。下面的两个函数展示了如何使用HTML5 DOM storage保存游戏状态以及ECMAScript5中的JSON功能：
function saveState(state) { window.localStorage.setItem("gameState", JSON.stringify(state)); } function restoreState() { var state = window.localStorage.getItem("gameState"); if(state) { return JSON.parse(state); }else{ retrun null; } }建议4：使用profiler
游戏开发中最大的挑战是在加入许多功能以后，如何保证游戏仍然具有高的帧显示频率。
好的消息是近几年来，浏览器的速度越来越快了，基于HTML5的游戏已经可以达到每秒60帧了。
这是非常了不起的。对IE9来说，这意味着开发了一个全新的JavaScript引擎，能够利用多CPU内核以及基于Direct2D的硬件渲染管道。换言之，如果你配备了高配置的游戏平台，IE9就能充分地利用这些硬件平台。
IE9整合了JavaScript分析器，能够发现性能瓶颈
Q4:html5游戏开发需要学习什么技术、
html5游戏开发，需要学习的技术：
1、HTML5教程
主要学习HTML标签、属性和事件。
2、CSS教程
主要学习使用CSS来控制网页的样式和布局。
3、JavaScript教程
做HTML5开发，主要使用JS语言。所以要学习JS语言。
4、HTML5其它的核心技术
做HTML5开发，可能会用到下面的技术。
（1）WebWorker
可以在浏览器中运行多个JS脚本。可以用于需要后台执行某种耗时工作的场合。
（2）WebSocket
浏览器可以与服务器间双向通信。Socket方式能够大大提高浏览器与服务器间的通信效率。可以用于浏览器与服务器间通信频繁的场合，比如实时聊天。
：
HTML5的优点：
新一代网络标准能够让程序通过Web浏览器，消费者从而能够从包括个人电脑、笔记本电脑、智能手机或平板电脑在内的任意终端访问相同的程序和基于云端的信息。
HTML5允许程序通过Web浏览器运行，并且将视频等目前需要插件和其它平台才能使用的多媒体内容也纳入其中，这将使浏览器成为一种通用的平台，用户通过浏览器就能完成任务。此外，消费者还可以访问以远程方式存储在“云”中的各种内容，不受位置和设备的限制。
缺点：
1、开放性带来的困扰
在从前网络平台上存在大量的专利产品，想要实现HTML5技术的大量应用首先就需要将这些专利性的产品变为开放式的产品，由于各种原因，当前面对这一问题还存在许多争议。
以视频格式为例，两大阵营对于视频格式的设置存在争议，一大阵营以苹果为代表，另一大阵营则以Opera、火狐、谷歌为代表。
WPEG阵营是苹果所属阵营，由于其自身全部使用的是这一种格式，所以坚持认为应当将此格式作为标准，而WebM阵营则认为由于WPEG格式的专利依然没有解除，对于HTML5技术要求的开放性没有达标，所以不同意将其作为标准格式。
2、发展的速度有待提升
在HTML5中提出了一些从前HTML技术中不具有的新技术，但是有许多主流浏览器在长时间的发展过程中已经完成了此种技术的开发，在自身浏览器中实现了此种功能，就这一情况来说HTML5的发展速度方面存在一定的问题。
同时由于HTML5的不成熟，当前关于HTML5的相关技术标准还没有完全确定，所以在短时间想要将其投入大规模应用还比较困难。
： -html5
Q5:HTML5游戏会比NativeApp更快吗、
如果C++引擎和JavaScript做同样的任务，C++很有可能领先于JavaScript。但这里仍提出了一个很有趣的课题：使用“快”的语言（比如C++）并不能保证比“慢”的语言（JavaScript）有更好的性能。
这周，我对电脑进行了系统升级，采用Windows8操作系统，全新的nVidiaGetForceGTX660显卡。一切就绪后，我进行了性能测试，浏览器是ChromeCanary25，结果表明Construct2的WebGL渲染器明显快于Native的C++DirectX9——基于ConstructClassic引擎开发。
WebGL的测试结果是141911个sprite，而ConstructClassic为109280。显然，WebGL比Native快了将近30%。
系统环境配置：Windows 8 RTM（64位）系统、Intel Core i5-2500 @ 3.3GHz (quad core)、8GB RAM、nVidia GeForce GTX 660 (driver v306.97)。然而，此结果并不能在Windows 7上复制，使用AMD Radeon芯片驱动（没有在Windows 8上试过）。WebGL在Firefox 19上却比Native慢很多，而IE根本就不支持WebGL。
这里也有些测试结果表明，WebGL是没有这个能力的，所以，它总是呈现Canvas 2D渲染。这次在Chrome Canary 25上的得分是3821，而之前的结果竟比它快37倍。
为什么会出现如此好的结果 据理解，它可能把WebGL的安全检查交由硬件处理，WebGL的操作规范要求浏览器必须在使用时正确检查所有的缓冲区，而不是在访问前或后。使用长缓冲区来渲染大量的sprites，为了保证安全使用，CPU采用排水作业的方式检查缓冲区。然而，一些GPU厂商可能会在GPU的硬件上检查缓冲区。或许，这仅仅适用于一些特定的OS，在驱动和硬件设备支持的情况下，否则，CPU仍然会做这些检查。这或许就是快的原因吧！
这儿还有另外一个重要原因：WebGL渲染器的设计比Construct Classic系列的C++ DirectX 9更加高效。当使用C++编写时，它的速度很容易降下来，虽然C++速度很快，但这并不表明编写任何C++代码都可以运行很快。当把引擎移到JavaScript上时，在大多数的基准测试中，它要比C++的慢好几倍。这驱使我们更加密切地关注性能并且采取更加明智的整体策略。当对每个精灵进行渲染时，经典的Native引擎会计算顶点位置（对象角落）。在使用collisions engine中已经把所识别的位置信息进行了计算和储藏。这就阻止了Construct 2重新计算——它们只需复制collisions engine中的计算。所以JavaScript只需做很少的事情。这可能会稍微缩小彼此间的差距。
这就解释了为什么只有在特定的环境下，JavaScript引擎才能领先于不那么高效地C++引擎。如果C++引擎和JavaScript做同样的事情，C++很有可能领先于JavaScript。但这里却提出了一个很有趣的课题：使用“快”的语言（比如C++）并不能保证比“慢”的语言（JavaScript）有更好的性能。这也表明会有一些更加灵巧的JavaScript/WebGL渲染引擎会打败Native引擎。这就预示着未来移动端的HTML5游戏也能像Native引擎一样，达到同样的基准测试结果（或者更多！）。
希望这个结论不是什么技术错误或者故障。另一方面，如果该结果是真实的，那么它会让人欣喜若狂的。大多数时候，人们会抱怨把本地游戏移植到HTML5上是多么的慢，那么它很快就会结束！