Building a Digimon-Themed Web Game with Nuxt2, Vant, Anime.js, and Lottie

The author recounts how a childhood love for the "Digimon" anime inspired the creation of a Digimon‑themed web game, starting with a simple 1.0 version that stored all creature data in a single massive file, resulting in slow loading.

Version 1.0 can be accessed at https://digi_vice.gitee.io/digivice/#/pages/index/index . It was a quick‑and‑dirty implementation that suffered from data bloat and unwieldy files.

New Version (2.0)

2.0 (Mobile Landscape)

Link: http://106.55.53.206/digivice/index.html

Technology Used

nuxt2 + vant

animejs

lottie

How It Was Made

Before starting, the author considered using game‑oriented frameworks such as cocos , Egret , or generic mini‑game solutions, but ultimately chose the classic web stack: html + css + js . The author treats the 2D game as a collection of images reacting to user actions.

Images illustrating the UI are included below:

Interesting Points

Digimon Data Storage

Learning from version 1.0, the new version stores each Digimon's data in separate files and loads them on demand, avoiding the previous single‑file bottleneck.

Battle Turn Distribution

The battle page is designed like a real‑life board game (e.g., Werewolf). Two main concepts are used:

Narrator: controls the order of player actions.

Players: participants in the battle.

The implementation is split into four components:

battle-dealer : controls round start, checks, and end.

digimon-render : renders Digimon actions, attacks, skills.

digimon-state : shows health, skill cooldowns, buffs.

dm-action-render : renders action frames based on Digimon settings.

Gacha Machine

The gacha flow is: insert coin → spin → reveal → show result. GIF assets provided by a designer ("瓜哥") are used for the animation.

No‑egg GIF:

Egg GIF:

Gacha machine shell image:

Using v-if to toggle the egg images caused timing issues because the GIF would continue playing even when hidden. The solution was to change the src attribute of the img element, forcing the GIF to restart from the first frame.

<img class="rotate-img" ref="rotateEgg" :src="calcRotateImg" />

computed: {
    calcRotateImg() {
      if (!this.resultType) {
        return this.eggaImgDefault
      } else if (this.resultType == 1) {
        return this.eggImga
      } else if (this.resultType == 2) {
        return this.eggImgs
      }
    },
}

Other features include weighted random item drops, item purchase/usage/limits, screen orientation handling, background video, click sound effects, and more.

Conclusion

This game does not contain any pay‑to‑win elements; only voluntary server sponsorships are accepted.

The author hopes to gather feedback, add features such as a socket‑based world boss, SSE email system, QR‑code parsing, gyroscope support, NFC card reading/writing, and encourages players to enjoy the experience while being gentle with the still‑weak API.