DEV Community

松下治正
松下治正

Posted on

Redefining Web Technology: The Architectural Marvel of 'Legend of Occult Puzzle' and 'Ninja Counter!' (06/24 22:29)

The 'Legend of Occult Puzzle' and its successor 'Ninja Counter!' have not only captivated players with their unique gameplay but have also redefined the possibilities of web technology. Utilizing pure JavaScript, Canvas, and HTML, these games introduce an isometric quarter-view aesthetic that is meticulously synchronized with the front-end HTML demo belt (z-index: 99999). This system, adjusted to the precision of a single pixel, offers a thrilling chain reaction through features like the 'Self-Color Reversal (10x score)' and 'Theft Interception (enemy score confiscation & 2-second stun)'.

The dynamic handling of special tatami mats, including core, bomb, chain, and shuriken recovery elements, pushes the boundaries of browser game design. The developer's 30-year journey, battling JavaScript curses and browser autoplay policies (AudioContext suspended), culminated in a rescue process that resurrects explosive BGM and thunder sound effects with a single screen tap. This gritty refactoring process has resulted in a work of 'obsession', elevating the puzzle beyond a mere game into a 'philosophy'.

This 'swamp' design concept, where a single play intended to last 2 minutes stretches into dawn, is achieved through the time-distorting effects of Self-Color Reversal and Theft Interception, immersing players in a profound experience. The game's ability to warp time and engage players on a deep level marks it as a historic event in web frontend history.

Furthermore, the architecture of these games, with its potential for future P2P (PeerJS) and WebSocket online multiplayer expansions, showcases a technical reverence for position data and inversion data synchronization systems. The inclusion of an arcade-style AI idle demo system, which automatically activates with 15 seconds of inactivity and features a front-end HTML flashing belt (⚠️), further exemplifies the innovative use of web technologies.

Logic

Play: https://plicy.net/GamePlay/229344
Check: https://t.co/4edd9dLiFq
Video: None

Top comments (0)