Daus Anak Soleh
Interactive web-based math puzzle adventure built with HTML5 Canvas, modern JavaScript, and thematic soundscapes.
Daus Anak Soleh is an engaging educational web game where players guide Daus through arithmetic challenges and Islamic knowledge trivia, designed with custom 2D canvas rendering, sound effects, and level progression mechanics.
Live Interactive Architecture Stage
Help Daus count dates for Iftar
The game architecture decouples canvas draw calls from arithmetic FSM logic for zero-lag mobile playability.
Educational game development demands a balance between engaging playfulness and pedagogical precision. Daus Anak Soleh was crafted as a browser-first interactive experience without external heavyweight runtimes, leveraging native HTML5 Canvas and modern JavaScript.
The gameplay loop presents players with arithmetic hurdles and Islamic cultural quizzes embedded within an illustrated journey. It utilizes custom audio management, state machines for stage transitions, and modular sprite-based rendering.
Explore the structural layers and functional states engineered for this project.
2D Canvas Render Layer
Sprite sheet slicing, dynamic background scrolling, and UI overlay rendering.
- 60 FPS requestAnimationFrame loop
- HiDPI Retina coordinate mapping
- Sprite asset preloader
Arithmetic Puzzle Progression Engine
Dynamic equation generation covering addition, subtraction, and multiplication with scaling difficulty.
HTML5 2D Canvas Sprite Renderer
Custom lightweight render loop executing at 60 FPS across desktop and mobile browsers without third-party plugins.
Interactive Audio & SFX System
Thematic background music and responsive celebratory audio cues using Web Audio API.
Responsive Canvas Scaling Across Mobile Viewports
Different device aspect ratios and pixel densities caused blurry sprite rendering and touch misalignment.
Implemented dynamic canvas resolution scaling matching window.devicePixelRatio with logical coordinate translation.
Smooth State Management without Game Engine Bloat
Maintaining menu, level selection, active gameplay, and victory stages without spaghetti code in raw JavaScript.
Structured a finite state machine (FSM) separating input handling, game update tick, and render cycles into distinct modules.