所谓的Canvas小游戏，基本都是指 Canvas 2D 小游戏，目前在手机领域应用较广，尤其是微信营销领域，比如著名的神经猫。

此外还有比较酷炫的3D Web Render，WebGL，使用的也是 Canvas，只不过跟2D是完全不一样的两个东西，且目前也没有得到很好的浏览器支持。

如果题主想要了解 Canvas 游戏的市场份额的话，我只能说，不高，主要应用在手机端较多，往往PC上还是Flash多些。

沙龙活动 | 3月31日 京东、微博实战专家与你共同探讨容器技术实践！

4、写一个游戏框架(一)

足球是掂球游戏的焦点。它响应玩家的输入，响应环境（如重力），发出声音等。它也许是游戏中最复杂的部分。幸运的是，我们会尽可能的深入浅出。

在脚本最顶端你会首先注意到的是一系列我们定义的脚本属性。定义脚本属性可以允许你将脚本中的值暴露给编辑器。这么做有三个原因：

第一，你可以为多个不同的实体使用相同的脚本，除了值不同以外。比如一个设置颜色的脚本属性，那么你在编辑器中创建了红色，蓝色和绿色版本的实体后，可以使用同一个脚本，只需为其设置不同的颜色。

第二，你可以快速方便的调整脚本的行为。当你修改了某个脚本属性的值（或编辑器上任意的属性），它将立即应用到游戏的所有在编辑器中加载的实例上。比如我们这里定义的ballMinimum属性，你可以载入游戏测试那些ballMinimum值是最优的而无需重新加载。也就是，测试游戏，修改值，再测试游戏。

这就是所谓的“迭代速度”。修改和测试的越快，开发的进度就越快。

对于球来说，我们定义了一系列脚本属性帮助我们调整游戏参数，比如重力，或当点击球时的脉冲。这些属性使我们能够更高效的调整游戏到我们满意的程度。

第三，脚本属性是一种极其方便的方法来把脚本绑定到一个实体或场景中的资源上。比如，当被点击时，球脚本需要触发一种粒子效果。而粒子效果实在场景中的另一个实体上。我们定义了一个叫做impactEffect的脚本属性，其类型是实体，在编辑器中我们将其与粒子效果实体链接起来即可。我们的脚本现在就可以引用那个实体了，并且我们可以修改这个实体或更换为另一个实体而无需改动代码。

对于那些具备矢量数学基本知识的读者来说，球的update方法循环应该是易于理解的。而对于其他的大部分读者来说，我们将会对视频游戏中模拟一个球的运动稍加解释。

在视频游戏中模拟一个东西的最简单的方法是给其一个加速度，一个速度和一个位置。在每个事件段内，加速度改变速度，而速度则改变位置。然后，你只需要在新的位置上绘制对象即可。

你可以用下列方法之一来改变物体的位置。

- 改变加速度，这适用于在一定时间内施加一个力的场景，如重力；

- 改变速度，这是一种瞬时的变化。如同一个球从地面弹起。

- 改变位置，就像瞬间转移，正在真实世界中是不存在的。

在我们的模拟中有一个由重力引起的恒定的加速度，当你点击球的时候，其速度会有一个瞬时的改变；当你复位游戏的时候，我们将球瞬移到初始的位置上。

在update循环中按照如下公式操作：

（速度的变化）=（加速度）x（上一帧到当前的时间）

（速度）=（原速度）+（速度的变化量）

（位移）=（速度）x（上一帧到当前的时间）

（新的位置）=（原位置）+（位移）

你会注意到我们使用了临时的向量tmp来存储中间变量。不在每帧处理中都为其创建一个新的矢量是十分重要的。同时，你也会注意到我们调用了setLocalPosition来更新位置。

最后，为了获得更好的效果，我们调用了entity.rotate()方法来给球一个旋转角速度值，虽然这不是非常的符合实际，但看起来还不错。

你可以还记得在（二）中input.js脚本会检查是否用户的输入击中了球，如果是的话，它会调用tap（）方法。在前面定义的tap方法直接改变了球的速度和角速度。我们用几个脚本属性this.speedMult和this.angMult来使新的速度和角速度翻倍，以此来匹配我们预期的游戏效果。

另外，tap方法还在点击的点上触发了一种灰尘的粒子效果，并播放音效。

ball脚本实现了一个简单的物理过程模拟来使球在重力的作用下下落并能响应点击操作。同时，它还通过监听游戏事件来获知游戏何时暂定或是复位。最终，它还与其他的系统交互，显示粒子效果并播放声音。