智云健康

--- theme: channing-cyan highlight: juejin --- 本文作者：哈皮，未经授权禁止转载。本期带大家了解一款轻量级且接口友好的 HTML5 2D 互动引擎 [Tiny.js](http://tinyjs.net/guide/)。下面是官方提供的一些 Demos 实例： * [打地鼠](http://tinyjs.net/examples/) * [Snake](http://tinyjs.net/examples/snake.html) * [Doodle jump](http://tinyjs.net/examples/doodle-jump.html) * [保护蜜蜂](http://tinyjs.net/examples/protectbee.html) * [Running](http://tinyjs.net/examples/running.html) * [Flappybird](http://tinyjs.net/examples/flappybird.html) * [打飞机](http://tinyjs.net/examples/airplane.html) * [Cuo money](http://tinyjs.net/examples/cuo-money.html) 我们来尝试使用其写一款小游戏 —— 红包雨。先上效果图。 ![demo1_gaitubao_178x319.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f7a0b304681a4e6cbe5f5311912164a8~tplv-k3u1fbpfcp-watermark.image) ## 环境搭建 ```js // npm 引入 npm i @tinyjs/tiny // 外链引入 ``` ## 初始化游戏 [Application](http://tinyjs.net/api/tiny.application.html) 是很重要的一个类，它是任何游戏的开始，它的实例化对象将会贯穿整个游戏逻辑，这样你可以使用它的 start、pause、resume 或 stop 来让游戏开始、暂停、继续和停止，也可以使用 replaceScene 来切换场景，onUpdate 在主调度里加入执行函数。 ![1.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8b683a7abf774e40b9c74f0fd42de182~tplv-k3u1fbpfcp-watermark.image) ## 初始化场景一个通俗的解释可以快速理解场景的概念：一个场景可以认为是PPT的一页。场景可以是任何基于 DisplayObject 的显示类，可以使用 Tiny.Container 初始化一个场景。 ![2.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4822561d718844589e3a71a6ed6e317e~tplv-k3u1fbpfcp-watermark.image) 了解了场景的用法。这里，我们来初始化场景，并添加背景图。 ![3.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a57aa5685eda490ab74aec101c808e27~tplv-k3u1fbpfcp-watermark.image) 背景画面出来了，我们已经成功一半了。 ![bg_gaitubao_171x331.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/17ba8b5e30ad4a3db23caa036b158d39~tplv-k3u1fbpfcp-watermark.image) ## 添加红包 ![4.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bb698845a4d642dfa8bf2f1922b21945~tplv-k3u1fbpfcp-watermark.image) 这里和上面的背景图一样，都是通过精灵 [Sprite](http://tinyjs.net/guide/advanced-displays-sprite.html#%E4%BD%BF%E7%94%A8-tileset) 对象进行图片的引入。通过 Sprite , 可以控制它们的位置、大小，以及其他很有用的属性。让我们来看一下现在的效果。 ![demo2_gaitubao_178x318.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/81216b03820347bfb1bd9f6155f3cc79~tplv-k3u1fbpfcp-watermark.image) ## 添加动画上面，我们已经完成了红包的添加，但是红包还是静态的。这个时候，我们需要给它添加动效 [Action](http://tinyjs.net/guide/advanced-actions-basic.html)。使用 MoveTo 可以让精灵从当前位置移动到指定的位置，下面的代码会让精灵在 2000ms 内移动到 x=100，y=1000 的位置： ![5.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fe06d19ad286489caf06dc1652ae9e44~tplv-k3u1fbpfcp-watermark.image) ![demo3_gaitubao_168x306.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b4c8e0a275b5477481137fcb42651e95~tplv-k3u1fbpfcp-watermark.image) ## 绑定点击事件 ![6.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ab5c8ff94a443a6861e91acfae174f7~tplv-k3u1fbpfcp-watermark.image) 设置可点击后，给 Sprite 添加点击事件。在点击后，移除之前的下落动画。实现一些点击特效。比如点击后缩放 1.2 倍，并在点击特效完成后，将红包移除。 ![demo4_gaitubao_168x301.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c7f8572b111c489f8278aac005d01555~tplv-k3u1fbpfcp-watermark.image) 到这，一个简单的红包下落到点击的动画交互就完成了。是不是很简单呢？ ## 完整 Demo 代码 ```html 智云健康 ``` 更多完整游戏，可访问智云健康小程序或下载智云健康App，进行体验。