手把手教宝用 Tiny.js 写一个小游戏

智云健康大前端团队
8,464 阅读2分钟

本文作者：哈皮，未经授权禁止转载。

本期带大家了解一款轻量级且接口友好的 HTML5 2D 互动引擎 Tiny.js。 下面是官方提供的一些 Demos 实例：

我们来尝试使用其写一款小游戏 —— 红包雨。

先上效果图。

demo1_gaitubao_178x319.png

环境搭建

// npm 引入
npm i @tinyjs/tiny

// 外链引入
<script src="https://gw.alipayobjects.com/os/lib/tinyjs/tiny/1.3.1/tiny.js"></script>

初始化游戏

Application 是很重要的一个类，它是任何游戏的开始，它的实例化对象将会贯穿整个游戏逻辑，这样你可以使用它的 start、pause、resume 或 stop 来让游戏开始、暂停、继续和停止，也可以使用 replaceScene 来切换场景，onUpdate 在主调度里加入执行函数。

1.png

初始化场景

一个通俗的解释可以快速理解场景的概念：一个场景可以认为是PPT的一页。 场景可以是任何基于 DisplayObject 的显示类，可以使用 Tiny.Container 初始化一个场景。

2.png

了解了场景的用法。这里，我们来初始化场景，并添加背景图。

3.png

背景画面出来了，我们已经成功一半了。

bg_gaitubao_171x331.png

添加红包

4.png

这里和上面的背景图一样，都是通过精灵 Sprite 对象进行图片的引入。通过 Sprite , 可以控制它们的位置、大小，以及其他很有用的属性。让我们来看一下现在的效果。

demo2_gaitubao_178x318.png

添加动画

上面，我们已经完成了红包的添加，但是红包还是静态的。这个时候，我们需要给它添加动效 Action。

使用 MoveTo 可以让精灵从当前位置移动到指定的位置，下面的代码会让精灵在 2000ms 内移动到 x=100，y=1000 的位置：

5.png

demo3_gaitubao_168x306.gif

绑定点击事件

6.png

设置可点击后，给 Sprite 添加点击事件。在点击后，移除之前的下落动画。实现一些点击特效。比如点击后缩放 1.2 倍，并在点击特效完成后，将红包移除。

demo4_gaitubao_168x301.gif

到这，一个简单的红包下落到点击的动画交互就完成了。是不是很简单呢？

完整 Demo 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智云健康</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.css" rel="stylesheet">
  <script src="https://gw.alipayobjects.com/os/lib/tinyjs/tiny/1.3.1/tiny.js"></script>
</head>
<body>
  <script>
    // 创建主程序
    const app = new Tiny.Application({
      showFPS: true,
      dpi: 2
    });

    // 创建场景
    const scene = new Tiny.Container()
    const addBackgroundImage = () => {
      const sprite = Tiny.Sprite.fromImage('bg.png')
      sprite.width = Tiny.WIN_SIZE.width
      sprite.height = 1448
      scene.addChild(sprite)

      // 启动场景
      app.run(scene)
    }
    addBackgroundImage()

    // 添加一个红包
    const sprite = Tiny.Sprite.fromImage('luckymoney.png');
    const addLuckyMoney = () => {
      sprite.width = 180;
      sprite.height = 186;
      sprite.x = 100;
      sprite.y = 100;

      scene.addChild(sprite);
    }
    addLuckyMoney()

    // 执行动画
    const action = () => {
      const action = Tiny.MoveTo(2000, Tiny.point(100, Tiny.WIN_SIZE.height));
      sprite.runAction(Tiny.RepeatForever(action));
    }
    action()

    // 设置可点击
    sprite.setEventEnabled(true);

    // 绑定点击/触事件
    sprite.on('pointertap', (e) => {
      sprite.removeActions();

      const scaleAction = Tiny.ScaleBy(150, { scaleX: 1.2, scaleY: 1.2 });
      sprite.runAction(scaleAction);
      scaleAction.onComplete = () => {
        scene.removeChild(sprite);
      };
    })
  </script>
</body>
</html>

更多完整游戏，可访问 智云健康小程序 或下载 智云健康App，进行体验。

avatar
文章
阅读
粉丝