I Built a Malaysian Cultural RPG in a Single HTML File — Here's What Broke

This is the story of Budak Kampung, a browser-based top-down RPG set across a 1440×1440 world map with Malay, Chinese, and Indian cultural zones. The game was built entirely in one self-contained HTML file, without the use of engines, npm packages, or build steps. The author, intrigued by the cultural richness of Malaysia, decided to create a One Malaysia RPG experience that embraced the country's multicultural heritage.

The game features an enterable Kampung Melayu (Malay village), Pekan Cina (Chinese village), and Little India, each with unique interiors like kopitiam (Malay coffee shops), surau (Malay mosques), and kovil (Indian temples). The game utilizes localStorage to save the player's position, visited buildings, and dialogue flags, making it accessible to players on any device without the need for CDN dependencies.

Despite careful planning, the author encountered two major bugs during development. Bug #1, "The blurry canvas (HiDPI hell)," caused the game to appear blurry on Retina displays and modern phones. The issue stemmed from the author using CSS canvas dimensions instead of actual pixel dimensions, which led to incorrect camera placement and tap detection. To fix this problem, the author adjusted the canvas size based on the devicePixelRatio, ensuring that draw calls used CSS pixel coordinates instead of raw pixels.

The second bug, "Emoji rendering killed the game," stemmed from the author using emoji (such as 👵 and 🏮) to represent various characters in the game. This decision proved problematic due to platform-dependent emoji rendering, which resulted in wildly different appearances of the same characters across different browsers and devices. To overcome this issue, the author replaced the emoji with vector characters drawn using canvas paths, ensuring consistent visual representation across all platforms.