Mine Game
HTML5 Canvas Port
Originally built with basic HTML, CSS, and JS in my early days. Today, I improved and rebuilt it with TypeScript and HTML5 Canvas to completely prevent client-side DOM inspection cheating.
Tech Stack
Goal
Anti-Cheat Architecture
Under the Hood
The Inspector Exploit
In my original version, the 5x5 grid was rendered directly into the DOM as 25 distinct `<div>` elements. State like safe zones or mines was stored using CSS classes or dataset attributes on the nodes themselves.
Because of this architecture, anyone with basic knowledge of browser DevTools could right-click, inspect the grid, and easily locate the exact positions of the hidden mines before ever clicking a tile.
The Canvas Solution
By porting the rendering layer to the HTML5 Canvas API, the entire grid is painted as a single, flattened raster image. The browser DOM only sees one generic `<canvas>` element.
State logic (where the mines are hidden) is tightly enclosed within React Refs, completely disconnected from the rendering tree. Clicks are intercepted as X/Y coordinates on the canvas, mathematically mapped to the logical grid, and validated against the hidden state.