我使用 Astro、React 和 Open Data 为 Marvel Rivals 构建了一个战术工具

发布: 6天前 (2026年2月2日 GMT+8 16:02)

2 分钟阅读

Source: Dev.to

Hello developers and gamers! 👋
I’ve been playing a lot of Marvel Rivals lately. It’s an incredible hero shooter, but as a competitive player (and a dev), I felt something was missing.

The in‑game scoreboard tells you damage and healing, but it doesn’t tell you the macro strategy.

“Does our team have enough shield break?”
“Who has the fastest Ultimate to force the first fight?”
“When is our team’s power spike compared to the enemy?”

So, I decided to build a tool to solve this.

Meet Rivals Victory

🛠️ The Tech Stack

Framework

Astro (for static site generation and perfect SEO).

Interactivity

React (using “Islands Architecture” for the calculators).

Styling

Tailwind CSS.

Data

JSON (custom curated dataset).

Deployment

Cloudflare Pages.

💡 Key Features

Ultimate Economy Calculator

This was the hardest part to model. In high‑level play, Ultimate Economy dictates the flow of the match. I built a React component that takes a team composition and calculates their average tempo.

Hulk (600 cost): Extremely fast tempo. Forces fights early.
Adam Warlock (5000 cost): Very slow. Win condition, but needs stalling.

By visualizing this delta, players can see if they should play aggressively or defensively.

The Mechanic Finder (Drafting Tool)

Instead of filtering by generic roles (Vanguard/Duelist), I created a tagging system based on utility. I structured the data to answer specific tactical questions:

“We need Hitscan to counter Iron Man.”
“We need Stun to stop Venom.”

🔓 Open Sourcing the Data

I opened the dataset in a separate GitHub repository so you can use it freely for your own Discord bots, analysis tools, or apps.

GitHub Repo: marvel-rivals-data (replace with actual link)

Here is a snippet of the data structure (heroes.json):

{
  "id": "hulk",
  "name": "Hulk",
  "ultimateCost": 600,
  "tags": ["tank", "shieldBreaker", "fastTempo"]
}

The full JSON file is hosted at:
https://cdn.jsdelivr.net/gh/rivalsvictory-assets/rivalsvictory-assets@main/data/heroes.json

🚀 What’s Next?

Matchup‑specific tips (e.g., “How to play Punisher vs Storm”).
Map‑specific synergy guides.

If you are a gamer or a dev interested in game data, I’d love your feedback!

Live Site: https://rivalsvictory.com
GitHub Data: Get the JSON here (replace with actual link)

Thanks for reading! Happy coding and gaming. 🎮