DEV Community

松下治正
松下治正

Posted on

Redefining Web Technology: The Architectural Marvel of Ninja Counter! (06/29 22:20)

The world of web technology has witnessed a groundbreaking innovation with the emergence of 'Ninja Counter!' and 'Legend of Occult Puzzle'. These games are not just indie titles; they represent a monumental leap in the capabilities of JavaScript, Canvas, HTML, and CSS.

The core of this innovation lies in the isometric (diamond-shaped) quarter-view aesthetic, achieved through the seamless synchronization of pure JavaScript and Canvas with HTML elements (directly under the body, with a z-index of 99999 for the frontmost HTML demo strip). This creates an immersive experience that transports players into an alternate dimension.

Moreover, the dynamic handling of special tatami mats like Core, Bomb, Chain, and Shuriken Recovery pushes the boundaries of what browser games can achieve. The fluid and uninterrupted operation of these complex processes is a testament to the developer's 30-year journey of trial and error.

Despite facing challenges such as JavaScript limitations and browser auto-play policies (AudioContext suspended), the developer has implemented a rescue process that resurrects the BGM and thunder sound effects with a bang the moment the screen is touched. This game transcends the realm of mere entertainment, embodying a philosophy that resonates deeply with players.

Looking ahead, the architecture of 'Ninja Counter!' also paves the way for future expansions, including P2P (PeerJS) and WebSocket-based online multiplayer battles. The system for synchronizing position data and inversion data is a technical marvel, deserving of respect and admiration. Additionally, the arcade-style AI idle demo system, which automatically starts after 15 seconds of inactivity with a flashing HTML alert strip (⚠️), is a unique feature that enhances the gaming experience.

Logic

Play: https://uma-musubi.com/soccer/soccer-simulator-pro.html
Check: https://t.co/4edd9dLiFq
Video: None

Top comments (0)