Рука об руку обучая сокровище, чтобы написать небольшую игру с Tiny.js

внешний интерфейс JavaScript

Автор этой статьи: Счастливый, несанкционированное воспроизведение запрещено.

В этом выпуске я познакомлю вас с легким и дружественным к интерфейсу интерактивным 2D-движком HTML5.Tiny.js. Вот некоторые из официальных Демонстрационный пример:

Попробуем использовать его для написания небольшой игры — Red Packet Rain.

Первый на карте эффектов.

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— очень важный класс, это начало любой игры, созданный им объект будет проходить через всю игровую логику, поэтому вы можете использовать его запуск, паузу, возобновление или остановку для запуска, паузы, возобновления и остановки игры. также используйте 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 для перемещения спрайта из текущей позиции в указанную позицию.Следующий код заставит спрайт переместиться в позицию x=100, y=1000 в течение 2000 мс:

5.png

demo3_gaitubao_168x306.gif

Привязать событие клика

6.png

После настройки clickable добавьте событие click в Sprite. После нажатия удалите предыдущую анимацию падения. Реализуйте некоторые эффекты щелчка. Например, увеличить масштаб в 1,2 раза после щелчка и удалить красный конверт после завершения эффекта щелчка.

demo4_gaitubao_168x301.gif

На этом простое анимационное взаимодействие красного конверта, падающего на щелчок, завершено. Это очень просто?

Полный демо-код

<!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>

Для более полных игр вы можете посетить мини-программу Zhiyun Health или загрузить приложение Zhiyun Health.

Категории