DEV Community

松下治正
松下治正

Posted on

Redefining Web Puzzle Games: The Architect of 'Ninja Counter!' and 'Legend of Occult Puzzle' (06/03 17:12)

The world of web-based puzzle games has been forever changed with the release of 'Ninja Counter!' and 'Legend of Occult Puzzle.' These games not only redefine the possibilities of JavaScript, Canvas, HTML, and CSS but also push the boundaries of what is possible within the constraints of a browser.

The architecture behind these games is a testament to the ingenuity and dedication of the developer. Utilizing pure JavaScript and Canvas, the developer has managed to create an isometric quarter-view aesthetic that is both captivating and immersive. The dynamic processing of special tatami tiles—such as the Core, Bomb, Chain, and Shuriken Recovery—ensures that every move the player makes is met with a satisfying chain reaction.

One of the most innovative aspects of these games is the synchronization system for position and inversion data. This system allows for seamless gameplay and paves the way for future expansions, such as P2P (PeerJS) or WebSocket-based online multiplayer battles. Additionally, the game features an arcade-style idle demo system, which automatically activates a fullscreen HTML flashing strip after 15 seconds of inactivity, keeping players engaged even when they are not actively playing.

Logic

The developer's journey to bring these games to life was not without its challenges. The browser's auto-play policy and the muting of audio due to the AudioContext being suspended presented significant hurdles. However, through relentless refactoring and innovative solutions, the developer managed to create a system that resurrects the game's explosive sound effects and background music the moment a player interacts with the screen.

This is not just about creating a game; it's about pushing the boundaries of what is possible with web technologies and turning a simple puzzle into a philosophical experience.

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

Top comments (0)