Build 2D Interactive Games with Eva.js: From Basics to a Heart Demo

Background

More and more companies embed gamification into apps, using game mechanics to boost user retention and activity, such as Ant Farm, Ant Forest, and various fruit‑garden games on Alibaba platforms.

What Can Be Built

Interactive Cases

Typical 2D interactive projects include cultivation, collection, tower‑defense, and claw‑machine style games that combine business logic with game loops.

Case Analysis

A typical scene contains a background image, a cat skeleton animation, a progress bar built from rounded rectangles, transition animations, frame animations, sprite sheets, and event handling.

Fundamental Learning

Common 2D Interactive Capabilities

Front‑end knowledge required includes rendering tools, a game loop, and resource loading. Basic drawing and animation, as well as some physics concepts, are also involved.

How Interactive Games Run

Game data (size, position, image) is fed to a rendering engine which draws on a canvas each frame. Animations, AI, and physics are driven by data changes inside a loop.

Loop

The browser’s

requestAnimationFrame

method schedules a callback before the next repaint, typically at 60 fps.

<code>const loop = () => {
  requestAnimationFrame(loop)
  // calculate data
  // draw graphics
}
requestAnimationFrame(loop)</code>

Canvas

In HTML we use the

canvas

element and obtain a drawing context via

getContext

. Canvas API handles 2D, while WebGL can render both 2D and 3D with higher performance.

Basic Rendering Techniques

Image

Text

Graphics

Sprite

Nine‑patch

Mask

Graphics

Simple shapes are used for masking, hit‑testing, and physics collisions.

Sprite

Sprite sheets combine multiple images into one file to reduce network and rendering overhead.

Nine‑Patch

Allows scalable UI elements without distortion, useful for bubbles and panels.

Mask

Masking works like CSS

overflow:hidden

to hide parts of rendered content.

Basic Animation

Transition Animation

Linear motion can be expressed with

s = v * t

and implemented via libraries such as Tween.js or Lottie.

Frame‑by‑Frame Animation

Sequential images are played as an animation; designers often pack them with tools like Texture Packer.

Skeletal Animation

Tools like Spine or DragonBones define bones, textures, and animation data, reducing image count and memory usage.

Project Practice

Eva.js is an open‑source front‑end engine for gamified interactions, used by many Alibaba products. The following demo creates a heart that moves left‑right and shows an alert on click.

Step 1 – Add Resources & Create Game

<code>import { resource, Game } from '@eva/eva.js'
import { RendererSystem } from '@eva/plugin-renderer'
import { ImgSystem } from '@eva/plugin-renderer-img'
import { EventSystem } from '@eva/plugin-renderer-event'
import { TransitionSystem } from '@eva/plugin-transition'

resource.addResource([
  {
    name: 'imageName',
    type: RESOURCE_TYPE.IMAGE,
    src: { image: { type: 'png', url: '//gw.alicdn.com/bao/uploaded/TB1lVHuaET1gK0jSZFhXXaAtVXa-200-200.png' } },
    preload: true,
  },
])

const game = new Game({
  systems: [
    new RendererSystem({ canvas: document.querySelector('#canvas'), width: 750, height: 1000 }),
    new ImgSystem(),
    new EventSystem(),
    new TransitionSystem(),
  ],
})</code>

Step 2 – Create Object & Set Position

<code>import { GameObject } from '@eva/eva.js'

const heart = new GameObject('heart', {
  size: { width: 200, height: 200 },
  position: { x: 0, y: 0 },
  origin: { x: 0, y: 0 },
  anchor: { x: 0, y: 0 },
})</code>

Step 3 – Add Components

Image Rendering

<code>import { Img } from '@eva/plugin-renderer-img'
heart.addComponent(new Img({ resource: 'imageName' }))
</code>

Click Event

<code>import { Event } from '@eva/plugin-renderer-event'
const evt = heart.addComponent(new Event())
evt.on('tap', () => { alert(1) })
</code>

Movement Animation

<code>import { Transition } from '@eva/plugin-transition'
const transition = heart.addComponent(new Transition())
transition.group = {
  idle: [
    {
      name: 'position.x',
      component: heart.transform,
      values: [
        { time: 0, value: 0, tween: 'ease' },
        { time: 1000, value: 400, tween: 'ease' },
        { time: 2000, value: 0 },
      ],
    },
  ],
}
transition.play('idle', Infinity)
</code>

Step 4 – Run

After the above setup the game starts automatically.

Conclusion

Gamified interactive projects are becoming essential for front‑end engineers. This article introduced core concepts—rendering, animation loops, resource handling, and event processing—and demonstrated a minimal Eva.js demo, providing a foundation for more complex gamified applications.