Fruit Slash Project Report
1. The Concept
Fruit Slash is a fast-paced 2D fruit-slicing web game inspired by Cambodian culture, tropical fruit, and Khmer visual design. The core mechanic challenges players to slice an unripe fruit before slicing the ripe version of the same fruit to build a combo multiplier. The game is designed primarily for mobile devices in a 16:9 landscape layout, while remaining fully playable on desktop.
The game includes two modes: Classic, where the player has three hearts and must avoid bombs, and 60 Sec Rush, where the goal is to earn the highest possible score before time runs out. A progression system rewards players with coins that can be spent on collectible blade skins with unique visual trails.
2. The Stack
The Stack: HTML5 Canvas, CSS3, Pure JavaScript, Pointer Events API, Web Audio API, Fullscreen API, Screen Orientation API, and Local Storage.
The project intentionally avoids frameworks and external game engines. Canvas handles fruit rendering, physics, collision detection, particles, blade trails, and the main game loop. CSS controls the responsive interface, Khmer-inspired panels, animations, landscape layout, and mobile safe areas. JavaScript manages the gameplay, input, sound, language switching, shop system, coins, blade equipment, and saved progress.
The AI Assist: AI was used as a collaborative design and development assistant. It helped plan the game mechanics, refine the mobile UI/UX, generate Cambodian-themed backgrounds and weapon assets, identify touch-input issues, improve performance, and iterate on the game based on screenshots and visual feedback.
3. The 1 Day Sprint
Morning (Hours 1–3): The first stage focused on defining the game concept and building the playable foundation. The HTML5 Canvas, responsive 16:9 game area, update-and-render loop, fruit spawning, gravity, collision detection, scoring, mouse controls, and touch controls were implemented. Classic and 60 Sec Rush modes were also established.
Afternoon (Hours 4–6): The visual identity and gameplay feedback were developed. Cambodian tropical fruit sprites, a Khmer temple background, bilingual Khmer and English UI, fruit-slicing effects, particles, combo messages, hearts, pause controls, result screens, sound effects, and background music were added. Fruit launch height, screen boundaries, and sliced-fruit color consistency were refined through repeated testing.
The Finish Line (Hours 7–8): The final stage focused on mobile polish and player progression. Mobile landscape fullscreen behavior, orientation guidance, safe-area support, coalesced touch input, swipe interpolation, the coin economy, persistent Local Storage data, a blade shop, and three equippable blade styles were implemented. The Home, Pause, Shop, and Result screens received final animation and layout improvements.
4. The Roadblocks
Roadblocks: The most difficult challenge was maintaining visual consistency between whole fruit and sliced fruit. Early approaches used color tinting, which produced unwanted rectangular artifacts and mismatched colors. This was improved by using dedicated sprite cells and special sliced assets. Another challenge was making fruit trajectories feel satisfying on both desktop and mobile without allowing fruit to appear partially outside the screen. Touch input also required additional work because fast mobile swipes can skip collision points when browsers combine pointer events. Coalesced Pointer Events and interpolation along the swipe path were used to make slicing more reliable. Mobile fullscreen and orientation locking remain partially browser-dependent, especially on iPhone Safari.
5. Key Takeaways
Building a small game without a framework provided a practical understanding of how a game loop, physics, collision detection, rendering, input, audio, and state management work together.
Responsive game development requires more than scaling the interface. Touch behavior, safe areas, screen orientation, aspect ratio, device performance, and finger occlusion must all be considered as part of the gameplay experience.
Visual feedback has a major effect on how satisfying a game feels. Blade glow, fruit particles, sound, score animation, combo feedback, and clear life indicators made the same core mechanic feel significantly more polished.
Persistent coins and collectible blades gave players a longer-term goal beyond achieving a high score, while also demonstrating practical Local Storage, shop, purchase, and equipment logic.
My final thought: Fruit Slash demonstrates that a culturally distinctive and responsive 2D action game can be built with only HTML, CSS, and Pure JavaScript. The project began as a simple fruit-slicing prototype and evolved into a portfolio-ready game with its own visual identity, progression system, bilingual interface, and mobile-first experience.