Framework Fatigue? What a 98% Evaluated Vanilla JS Game Taught Me About Clean Architecture

The Architecture Behind a 98% Scoring Vanilla JavaScript Game: A Deep Dive into "Thirsty Crow"

The summer heat is hitting hard this June, but the real burn right now is happening on the live leaderboard of the VibeCode: Beat the Heat competition.

Lately, my engineering mind has been entirely consumed by massive data pipelines, enterprise infrastructure, and complex cloud architecture. It’s rewarding work, but it is incredibly easy to become disconnected from the raw, foundational building blocks of the web.

When the VibeCode arena dropped its summer-themed prompts, it triggered a serious wave of nostalgia.

The challenge rules are brilliantly restrictive:

Build lightweight web applications using strictly raw logic, the DOM, and vanilla JavaScript. No React, no Tailwind, and absolutely no external physics libraries.

It forces developers to return to the fundamentals.

I have been closely analyzing one of the front-runner projects in the arena: "Thirsty Crow" — a digital game reimagining the classic fable where a crow must drop moving stones into a pot to raise the water level.

Looking beyond the simple visuals, the automated engineering audit behind the top-scoring submission by S Trinaini is absolutely fascinating.

The project achieved a staggering 98% overall evaluation score, processing a massive context window of over 76,000 tokens during a 19.06-second deep-dive code analysis.

In this article, we will:

• Break down the architecture behind the game engine
• Analyze the automated scorecard metrics
• Explore the design decisions that helped it achieve near-perfect performance
• Understand the subtle bugs that prevented it from reaching a flawless 100%

---

The Automated Scorecard: Anatomy of a 98% Run

Before looking at the engineering patterns, it is important to understand how modern client-side applications are evaluated.

The automated engine judges projects across five major dimensions:

• Performance
• Correctness
• Code Quality
• Accessibility
• Overall Engineering Practices

The technical breakdown revealed an incredibly robust implementation.

Achieving a perfect 100/100 in Performance and Correctness without relying on a framework requires deliberate browser execution management.

Let's explore the systems that made this possible.

---

1. The Clock Cycle: Synchronizing With the Browser Compositor

When building a game where objects constantly move across the screen, many developers immediately reach for:

• setInterval()
• setTimeout()

On paper, updating a stone's position every 16 milliseconds seems like an easy way to achieve 60 FPS.

However, browser rendering does not work that simply.

Macro-tasks are controlled by the browser's event loop queue. If the main thread becomes busy with:

• DOM operations
• Garbage collection
• Style recalculations

Then the timers start drifting.

The result?

• Micro-stuttering
• Dropped frames
• Inconsistent gameplay

The top-ranking submission achieved its 100/100 Performance score by anchoring its animation loop directly to:

requestAnimationFrame()

Architectural Insight

Instead of forcing the browser to follow an artificial clock, requestAnimationFrame() allows the browser to schedule updates right before the next repaint.

This creates synchronization with the user's display refresh rate:

• 60Hz
• 120Hz
• 144Hz

Additionally, when a user switches tabs, browsers automatically pause requestAnimationFrame() execution.

This immediately reduces:

• CPU consumption
• Memory usage
• Background processing

A simple API choice resulted in a massive performance improvement.

---

2. Spatial Matrixing Over Heavy Physics Engines

Using a complete physics engine like:

• Matter.js
• Phaser

would have been unnecessary for this challenge.

For a lightweight browser game, adding a full physics engine creates:

• Larger bundle sizes
• Slower loading times
• Unnecessary complexity

Instead, the high-scoring implementation uses deterministic spatial boundaries.

Rather than calculating complicated pixel-perfect collisions, the game simplifies the environment into a coordinate-based system.

When the player triggers a drop event through:

• Mouse click
• Spacebar press

the engine:

1. Stops horizontal movement
2. Starts vertical movement
3. Checks the stone's position against predefined zones

The collision logic is divided into three areas:

Perfect Alignment Zone

If the stone lands exactly within the central threshold:

• Maximum water displacement occurs
• Particle effects are triggered
• Maximum points are awarded

Good Alignment Zone

If the stone touches the outer edge of the pot:

• The drop succeeds
• Reduced points are awarded

Miss Zone

If the stone falls outside the acceptable range:

• The attempt fails
• Gameplay resets

This demonstrates an important engineering principle:

Complex visual simulations can often be compressed into simple, highly optimized mathematical boundaries.

---

3. The Math Behind the "Combo Economy."

A game with a static scoring system quickly becomes predictable.

To maintain competitiveness on a live leaderboard, the architecture introduces a scaling combo multiplier.

The scoring model follows:

Score Increment = Base Points × Current Combo Level

Instead of awarding a fixed number of points for every successful drop, the system rewards consistency.

Example:

• First perfect drop → Base points
• Second consecutive perfect drop → Higher multiplier
• Fifth consecutive perfect drop → Massive reward

However:

• One missed drop resets the combo counter

This completely changes player behavior.

The scoring system encourages:

• Precision
• Consistency
• Risk management

A player who achieves five perfect drops receives significantly more reward than someone who randomly alternates between success and failure.

This simple scoring mechanic creates long-term replayability.

---

4. Native Visual Effects and Memory Management

In game development, "juice" refers to small visual details that make actions feel satisfying:

• Particle explosions
• Floating score indicators
• Environmental animations

The challenge is creating these effects without introducing memory leaks.

When a perfect drop occurs, the game creates a burst of golden particles.

Instead of manually updating every particle through a continuous JavaScript loop, the implementation uses the browser's native:

Web Animations API

The process:

1. Creates particle elements dynamically
2. Assigns randomized movement values
3. Uses CSS transforms for animation
4. Let the browser compositor handle rendering

The most important part is the cleanup.

Once a particle animation completes:

element.remove()

is triggered to remove the unused DOM node.

This prevents:

• DOM accumulation
• Memory growth
• Performance degradation

Even after thousands of drops, the memory footprint remains stable.

---

The Cracks in a 98% Score: Where Even Great Code Falls Short

One of the most valuable parts of automated code reviews is discovering where excellent implementations still have room for improvement.

Despite ranking at the top, the evaluator identified two issues that prevented a perfect score.

---

Major Issue: Accessibility & Contrast

The biggest deduction came from accessibility.

The project scored:

92% in Accessibility

The issue:

Insufficient text and background contrast.

The game uses vibrant summer colors:

• Neon green "PERFECT" indicators
• Orange "GOOD" notifications
• Blue gradient backgrounds

While visually attractive, these combinations can become difficult to read for users with visual impairments.

The solution:

• Add darker backgrounds behind text
• Increase contrast ratios
• Use text outlines

Example:

-webkit-text-stroke: 1px black;

Following WCAG (Web Content Accessibility Guidelines) ensures that gameplay feedback remains readable for everyone.

---

Minor Issue: Code Quality & Global Scope Pollution

The evaluator also detected a minor code quality issue.

The application uses:

window.addEventListener("keydown", (e) => {
    // ...
});

Although this works perfectly in browsers, modern JavaScript standards recommend using:

globalThis.addEventListener("keydown", (e) => {
    // ...
});

Why?

Because globalThis provides a universal reference to the global environment across:

• Browsers
• Node.js
• Web Workers
• Other JavaScript runtimes

This improves portability and future compatibility.

---

Join the Arena and Put Your Logic to the Test

Analyzing an elite build like S Trinaini's submission demonstrates how powerful raw web technologies can become when optimized correctly.

The VibeCode leaderboard updates in real-time, the AI evaluator is extremely strict, and the competition offers rewards for top developers.

If you are tired of:

• Massive configuration files
• Endless npm dependency trees
• Heavy framework setups

This challenge is the perfect opportunity to return to fundamentals.

Build with:

• Vanilla JavaScript
• Browser APIs
• Pure logic

and see how far you can push the web platform.

Competition link:

https://vibecodearena.ai/beattheheat?page=1&pageSize=10&sortBy=responses&sortOrder=desc&utm_source=external&utm_medium=vc5&utm_campaign=beattheheat

See you in the arena! 🚀