🧩 PixelSlide — 15-Puzzle Image Game with PixiJS

A premium sliding puzzle game built with PixiJS v8, Vanilla HTML5/CSS3/JavaScript, procedural canvas artwork, soundtrack integration, and a persistent local leaderboard.

---

✨ Features

• 🖼️ Custom Image Slicing:
  • Upload any image (PNG, JPG, WebP, GIF) via file picker or drag-and-drop.
  • Automatically center-crops and slices into grid tiles.
  • Comes with 4 built-in procedural gallery presets (Neon City, Deep Galaxy, Hex Prism, Aurora Peak) for instant offline play.
• 🎮 5 Difficulty Levels:
  • 🐛 Debug Mode (3×3): Starts from solved state and performs 5 non-reversing valid moves (guaranteed solvable in ≤ 5 moves).
  • 🟢 Easy (3×3): 8 tiles + 1 blank, 30 valid shuffle moves.
  • 🔵 Medium (4×4): Classic 15-puzzle (15 tiles + 1 blank), 100 valid shuffle moves.
  • 🟣 Hard (5×5): 24 tiles + 1 blank, 200 valid shuffle moves.
  • 🔴 Insane (6×6): 35 tiles + 1 blank, 400 valid shuffle moves.
• ⚡ 100% Solvability Guarantee:
  • Shuffling simulates valid legal moves from the solved board state to ensure the puzzle is always solvable without parity issues.
• 🎨 Ultra-Smooth PixiJS v8 Rendering:
  • High-DPI canvas rendering with hardware acceleration.
  • 60FPS smooth lerp/easing tile sliding animations.
• 🎵 Sound System & Soundtracks:
  • Background music (assets/sounds/backsound.mp3) with auto-looping and browser autoplay-policy handling.
  • Victory fanfare (assets/sounds/winner.mp3) upon solving.
  • Native Web Audio synthesizer for tile slides, clicks, and invalid move bumps.
  • Persistent sound toggle (🔊 / 🔇).
• 🏆 Persistent Leaderboard:
  • High scores saved in browser localStorage.
  • Filterable by difficulty (All, Debug, Easy, Medium, Hard, Insane).
  • Sorted by fastest completion time and least moves made.
• 💡 Helper Tools & Accessibility:
  • #️⃣ Tile Numbers Toggle: Overlay numbering (1 to N-1) for challenging abstract images.
  • 👁️ Ghost Image Hint: Semi-transparent reference overlay of the full image.
  • ⏱️ Millisecond-Precision Timer: Starts on the very first move.
  • 🔄 Quick Restart: Re-shuffle the same image and reset stats with one click.
  • ⏸️ Pause Modal: Stops the clock when taking a break.
  • 🎉 Confetti Burst: Physics-based canvas confetti explosion on victory.

---

📁 Project Structure

eigen_vibe_code_competition/
├── index.html              # Main HTML markup, HUD, modals, and screen containers
├── style.css               # Cyber dark theme, glassmorphism, responsive grid, animations
├── game.js                 # PixiJS v8 setup, puzzle engine, Web Audio, leaderboard logic
├── assets/
│   └── sounds/
│       ├── backsound.mp3   # Looping background soundtrack
│       └── winner.mp3      # Victory celebration audio track
└── README.md               # Project documentation

---

🚀 How to Run the Project

Since the project uses ES6 features and fetches audio assets / PixiJS canvas textures, it should be run through a local HTTP server.

Option 1: Python (Recommended, no installation required)

If you have Python installed, run in your terminal:

# Python 3
python3 -m http.server 8080

Then open your browser at: 👉 http://localhost:8080

---

Option 2: Node.js (npx serve or npx http-server)

If you have Node.js installed:

npx serve . -p 8080

or

npx http-server -p 8080

Then open http://localhost:8080.

---

Option 3: VS Code Live Server

1. Open the project folder in Visual Studio Code.
2. Install the Live Server extension (by Ritwick Dey).
3. Right-click index.html and select "Open with Live Server".

---

🎮 Controls & Shortcuts

Input / Key	Action
Mouse Click / Tap	Slide adjacent tile into the blank slot
↑ / W	Move tile below blank upwards
↓ / S	Move tile above blank downwards
← / A	Move tile on right to the left
→ / D	Move tile on left to the right
N	Toggle tile number overlays (#️⃣)
H	Toggle ghost image hint (👁️)
R	Quick restart level (🔄)
M	Toggle audio mute (🔊/🔇)
Esc	Pause / Resume game (⏸️)

---

🛠️ Technology Stack

• Rendering Engine: PixiJS v8.20.0 via CDN
• Structure & Logic: Vanilla HTML5, Vanilla JavaScript (ES6+ Classes)
• Styling: Vanilla CSS3 (Custom Properties, Glassmorphism backdrop-filter, Flexbox, CSS Grid)
• Typography: Google Fonts (Outfit, Inter)
• Audio: HTML5 Audio API & Web Audio API Synthesizer
• Storage: Browser localStorage API

---

📝 License

Distributed under the MIT License. Feel free to use and customize for your own projects!