This project embeds and runs the Drive Mad game inside a web page using WebAssembly and the Poki platform. The HTML file acts as a game launcher, handling loading screens, canvas setup, and SDK integration. The actual gameplay logic lives in compiled JavaScript and WASM files loaded at runtime. A progress indicator and cover screen appear before the game starts, improving user experience. Overall, this project demonstrates how large browser games are delivered efficiently using external assets and canvas rendering.
HTML
The HTML file serves as the backbone that loads and displays the Drive Mad game. At its core is the <canvas> element, which is required by Emscripten to render the game’s graphics and translate input events correctly. Surrounding the canvas is a structured loading UI that displays the game’s cover image, title, author, and a progress bar while assets are being downloaded. The base tag points all relative asset paths to a CDN, allowing the game files to load remotely without hosting them locally. Meta tags are configured to disable translation and scaling to preserve the gameplay experience. A modal system is included for in-game dialogs such as sharing or store links. The Poki SDK is loaded to handle ads, analytics, and platform-specific features. This HTML does not contain gameplay logic; instead, it prepares the environment required for the game engine to run smoothly.
CSS
The CSS for this project is loaded from an external file (fancade.css) and is responsible for styling both the loading screen and the game container. It defines how the cover image, progress bar, and title are centered and layered before gameplay begins. Visual effects such as gradients and overlays help create a polished transition from loading state to gameplay. The canvas is styled so it fills the available screen space while maintaining correct proportions. Borders and wrapper divs ensure the canvas aligns properly with Emscripten’s coordinate assumptions. The CSS also hides and reveals UI elements dynamically as the game loads. Because the styles are external and shared across many games, they focus on consistency and performance rather than customization. Overall, the CSS ensures the game looks professional and loads cleanly across devices.
JavaScript
The JavaScript in this project is primarily auto-generated and loaded through external files such as source_min.js and index.js. These scripts contain the compiled game logic and WebAssembly bindings produced by Emscripten. The Poki SDK script enables monetization features and platform integration without affecting gameplay logic. A configuration object is injected into the page to simulate browser origin data expected by the Poki environment. The loading progress bar is updated dynamically as game assets are fetched and initialized. Once loading completes, control is transferred to the WebAssembly runtime, which takes over rendering and input handling. Manual JavaScript hooks allow the game engine to interact with the page when needed. The animation loop and physics are fully handled inside the compiled engine code. In short, JavaScript here acts as a bridge between the browser and the game engine rather than traditional hand-written logic.
