Skip to content

A real-time fruit ninja game with a NestJS backend and Pixi.js frontend. Fruits spawn from the bottom and move upward with realistic physics, displayed on a 100x100 matrix grid.

Notifications You must be signed in to change notification settings

mberrishdev/fruit-ninja

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 

Repository files navigation

🍉 Fruit Ninja – Multiplayer Edition

A stunning real-time multiplayer fruit ninja game with modern UI design, room-based gameplay, and immersive visual effects. Built with NestJS backend and Pixi.js frontend, featuring floating fruit animations and glassmorphism design elements.

Game Preview Backend Frontend WebSocket UI

Features

Multiplayer Gameplay

  • Room System: Create or join game rooms with unique 6-character codes
  • Real-time Leaderboard: Live score tracking for all players with animated updates
  • Room Owner Controls: Room creator can start/restart games and manage sessions
  • Player Management: Dynamic player list with owner status and crown indicators
  • 2-Minute Game Sessions: Timed matches with countdown and automatic game end
  • Share Room Feature: Easy sharing with Web Share API or clipboard integration

Core Gameplay

  • Real-time Matrix: 100×100 grid updated at 60 FPS with smooth animations
  • Advanced Slicing: Mouse/touch slicing with visual trails and particle effects
  • Dynamic Physics: Gravity simulation with realistic fruit movement
  • Score System: Points based on fruit rarity and player skill
  • Visual Effects: Slice trails, particle explosions, and smooth transitions

🍎 Fruit Types & Scoring

  • Apple 🍎: Common fruit (speed: 2.0, score: 5, radius: 6)
  • Orange 🍊: Medium rare (speed: 1.8, score: 8, radius: 10)
  • Banana 🍌: Rare fruit (speed: 1.5, score: 10, radius: 3)
  • Cherry 🍒: Very rare (speed: 2.2, score: 15, radius: 8)
  • Watermelon 🍉: Super rare (speed: 1.2, score: 20, radius: 10)

Technical Excellence

  • Performance Optimized: Efficient rendering with 60 FPS game loop
  • Real-time WebSocket: Socket.IO with automatic reconnection and graceful handling
  • Health Monitoring: Comprehensive server dashboard with live metrics
  • PWA Ready: Mobile-optimized with app-like experience
  • Cross-Platform: Works seamlessly on desktop, tablet, and mobile
  • Modern JavaScript: ES6 modules with clean, maintainable code architecture

Quick Start

Prerequisites

  • Node.js 16+
  • npm or yarn

1. Backend Setup

```bash cd backend npm install npm run start:dev ``` Backend runs on: http://localhost:3000

2. Frontend Setup

```bash cd frontend npm install npm start ``` Frontend runs on: http://localhost:3050

3. Open Game

Navigate to http://localhost:3050 in your browser

Project Structure

fruit-ninja/
├── backend/                     # NestJS Backend
│   └── src/
│       ├── game/                # Game logic
│       │   ├── fruit.entity.ts  # Fruit class
│       │   ├── fruit.types.ts   # Type definitions
│       │   ├── matrix/          # Matrix service
│       │   ├── room/            # Room management
│       │   ├── events/          # Event bus service
│       │   └── fruit-worker/    # Game loop service
│       ├── gateway/             # WebSocket gateway
│       └── app.controller.ts    # REST API & Health
│
├── frontend/                    # Frontend
│   ├── src/                     # Source files
│   │   ├── game.js              # Game page logic
│   │   ├── landing.js           # Landing page logic
│   │   ├── renderer.js          # Pixi.js rendering
│   │   ├── socket.js            # Socket management
│   │   └── style.css            # Shared styles
│   ├── assets/                  # Images and icons
│   ├── landing.html             # Landing page
│   ├── game.html                # Game room page
│   ├── health.html              # Health dashboard
│   └── index.html               # Entry point
│
└── README.md                    # Documentation

🎯 Game Flow

  1. ** Landing Page** (/landing.html)

    • Modern glassmorphism interface with floating fruit background
    • Radio button selection: Create New Game or Join Existing
    • Smart form validation with real-time feedback
    • Auto-fill room codes from shared URLs
    • "How to Play" modal with step-by-step instructions
  2. ** Waiting Room**

    • Display room code with one-click sharing functionality
    • Live player list with owner indicators (crown emoji)
    • Start game button (owner only)
    • Real-time player join/leave notifications
  3. ** Game Session**

    • Immersive full-screen game experience with floating fruit background
    • 2-minute timed matches with live countdown
    • Real-time score updates with animated effects
    • Dynamic leaderboard with position changes
    • Advanced slice mechanics with particle effects
    • Responsive touch/mouse controls
  4. ** Game End**

    • Stunning podium display with 1st, 2nd, 3rd place winners
    • Crown animations and visual effects
    • Complete final leaderboard with all players
    • Restart option for room owners
    • Back to landing page functionality

Health Dashboard

The comprehensive health dashboard (/health.html) provides real-time monitoring:

  • System Metrics: CPU usage, memory consumption, uptime tracking
  • Game Statistics: Active rooms, player counts, game sessions
  • Room Details: Live room-by-room breakdown with player lists
  • Performance Monitoring: Server response times and connection status
  • Auto-refresh: Updates every 5 seconds for real-time insights

Contributing

  1. Fork the repository
  2. Create feature branch (`git checkout -b feature/amazing-feature`)
  3. Commit changes (`git commit -m 'Add amazing feature'`)
  4. Push to branch (`git push origin feature/amazing-feature`)
  5. Open Pull Request

Planned Features

  • Audio System: Sound effects, background music, and audio feedback
  • Difficulty Modes: Easy, Normal, Hard with different fruit spawn rates
  • Combo System: Multi-fruit slicing bonuses and streak multipliers
  • Power-ups: Time freeze, score multiplier, fruit magnet effects
  • Tournaments: Bracket-style competitions with multiple rounds
  • Player Profiles: Stats tracking, achievements, and customization
  • Spectator Mode: Watch ongoing games without participating

Technology Stack

Backend

  • Framework: NestJS with TypeScript
  • WebSocket: Socket.IO for real-time communication
  • Architecture: Modular design with services and gateways
  • Features: Dependency injection, decorators, and middleware

Frontend

  • Rendering: Pixi.js for high-performance 2D graphics
  • UI Framework: Vanilla JavaScript with ES6 modules
  • Styling: Modern CSS with custom properties and animations
  • Design: Glassmorphism, radial gradients, and particle effects

Support & Contributing

  • ** Issues**: Open a GitHub issue
  • ** Documentation**: Check inline code comments and JSDoc
  • ** Health**: Visit /health.html for server monitoring
  • ** Contributing**: Fork, create feature branch, and submit PR

🎮 Built with ❤️ using NestJS, Pixi.js, Socket.IO, and modern web technologies
Experience the future of multiplayer gaming with stunning visuals and smooth gameplay

About

A real-time fruit ninja game with a NestJS backend and Pixi.js frontend. Fruits spawn from the bottom and move upward with realistic physics, displayed on a 100x100 matrix grid.

Resources

Stars

Watchers

Forks