The author of this article: Happy, reproduced without permission.

Learn about tiny.js, a lightweight and interface friendly HTML5 2D interactive engine. Here are some official Demos:

  • whack-a-mole
  • Snake
  • Doodle jump
  • To protect the bees
  • Running
  • Flappybird
  • Play the plane
  • Cuo money

Let’s try to use it to write a small game – red envelope rain.

Let’s start with the renderings.

Environment set up

/ / NPM introduction
npm i @tinyjs/tiny

// External chain introduction
<script src="https://gw.alipayobjects.com/os/lib/tinyjs/tiny/1.3.1/tiny.js"></script>
Copy the code

Initialize the game

Application is an important class. It is the start of any game, and its instantiation object will run through the game logic so that you can start, pause, resume, or stop the game using its start, Pause, resume, or stop classes. ReplaceScene can also be used to switch scenarios, and onUpdate adds execution functions to the main schedule.

Initialization Scenario

A colloquial explanation is a quick way to understand the concept of a scene: a scene can be thought of as a PPT page. The scene can be any DisplayObject-based display class, and you can initialize a scene using tiny.container.

You learned how to use the scene. Here, we initialize the scene and add a background image.

The background is in. We’re halfway there.

Add a red envelope

Here, as in the background image above, images are introduced via Sprite objects. With Sprite, you can control their position, size, and other useful properties. Let’s see what happens now.

Add animation

Above, we have finished adding red packets, but the red packets are still static. At this point, we need to add Action to it.

Using MoveTo, you can move the Sprite from its current position to a specified position. The following code will move the Sprite to x=100, y=1000 in 2000ms:

Bind click events

Add click events to Sprite after setting clickable. After clicking, remove the previous fall animation. Implement some click effects. For example, after clicking, zoom 1.2 times, and after clicking the effect is complete, remove the red envelope.

At this point, a simple red envelope drop to click animation interaction is complete. Is it easy?

Full Demo code

<! DOCTYPEhtml>
<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>ZhiYun health</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>
    // Create the main program
    const app = new Tiny.Application({
      showFPS: true.dpi: 2
    });

    // Create a scene
    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)

      // Startup scenario
      app.run(scene)
    }
    addBackgroundImage()

    // Add a red envelope
    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()

    // Perform the animation
    const action = () = > {
      const action = Tiny.MoveTo(2000, Tiny.point(100, Tiny.WIN_SIZE.height));
      sprite.runAction(Tiny.RepeatForever(action));
    }
    action()

    // The Settings are clickable
    sprite.setEventEnabled(true);

    // Bind click/touch events
    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>
Copy the code

For more complete games, please visit the smartCloud Health mini program or download the SmartCloud Health App to experience.