Fruit Cube | HTML5 Puzzle Game

Fruit Cube takes the twisty puzzle everyone already knows and gives it a fresh, colorful, food-themed makeover. Instead of six colors, players twist a real 3D cube until each face shows a single fruit. Simple to explain, satisfying to solve, and instantly recognizable — perfect for casual game portfolios, HTML5 game bundles, and reskin-friendly puzzle collections.

✨ Key Features

• Real 3D gameplay — built on WebGL (Three.js), not a flat animation trick. Drag to orbit the camera and see every side.
• Natural swipe-to-twist controls — swipe directly on a cube face to turn that layer, just like handling a real cube. No fiddly on-screen button grid to learn.
• 3 difficulty modes — 2×2, 3×3, and 4×4 cubes, selectable right from the main menu.
• Original hand-drawn fruit art — six fruits (orange, grape, lemon, blueberry, apple, kiwi) illustrated with gradient-shaded vector art on HTML5 Canvas, so it renders identically on every device — no emoji-font inconsistency between platforms.
• Built-in sound effects — synthesized at runtime with the Web Audio API. Zero external audio files, zero licensing questions.
• Timer + move counter — tracks solve time and twist count for every attempt, with an instant “New Scramble” option.
• Three complete screens — Main Menu (with difficulty picker + how-to-play), Gameplay, and a Win screen with final stats.
• Single HTML file — the entire game logic, styling, and fruit artwork lives in one index.html, making it trivially easy to re-skin, embed, or wrap for mobile.
• Mobile-ready — responsive layout, touch-first swipe controls, tested down to small phone screens.
• Fully documented — step-by-step setup guide, customization walkthrough (fruits, colors, difficulty, sound), and offline-deployment notes included.

How to Play

• Swipe on any cube face to twist that outer layer in the direction you swiped.
• Drag on empty space around the cube to orbit your view.
• Solve the cube by getting every face down to a single fruit.
• Beat your best time and lowest move count on repeat scrambles.

️ Technical Details

• Pure HTML5 / CSS3 / JavaScript (ES6) — no build tools, no bundler, no backend required.
• 3D rendering via Three.js r128 (MIT licensed), with the OrbitControls addon for camera dragging.
• Cube logic generalizes cleanly across all three difficulty sizes from a single codebase.
• Clearly commented source, organized into labeled sections (scene setup, cube building, gesture controls, sound engine, win detection).

What You Get

• The complete game (index.html)
• Full HTML documentation with setup, customization, and offline-deployment instructions
• Menu / gameplay / win screenshots
• Ready-to-use item preview and thumbnail images