Nidi Air Hockey

A multiplayer air hockey game with stunning themes, built for fun with your loved ones!

Features • Themes • How to Play • Installation • Tech Stack • Project Structure

---

Features

• Play vs Computer - Practice against an intelligent AI opponent
• Online Multiplayer - Create a room and share the code with your partner to play together over the internet
• Mobile-Friendly - Vertical layout optimized for phones and tablets with touch controls
• Multiple Themes - 4 uniquely designed themes with different visuals, not just color swaps
• Sound Effects - Immersive audio feedback for hits, goals, wins, and reactions
• Reactions - Send emoji reactions to your opponent during online play
• Offline Support - Progressive Web App (PWA) with service worker for offline play
• Responsive Design - Works on any screen size

Themes

🏒 Classic

The traditional air hockey experience with a green table and fiery puck.

🚀 Space

• Twinkling stars and nebula background
• UFO-shaped paddles with rotating lights
• Meteor puck with fire trail
• Wormhole portal goals

🌹 Rose Garden

• Elegant dark garden with vine decorations
• Rose-shaped paddles with layered petals
• Rose bud puck with petal trail
• Falling rose petals animation

🧽 Bikini Bottom

• Underwater ocean scene with seaweed and coral
• SpongeBob and Patrick as paddles!
• Jellyfish puck with wavy tentacles
• Rising bubbles animation

How to Play

Controls

Mode	Player 1	Player 2
Offline (vs AI)	Touch/drag or Arrow keys	Computer controlled
Online	Touch/drag anywhere	Touch/drag anywhere

Game Rules

• First player to score 7 goals wins
• Hit the puck with your paddle to send it towards your opponent's goal
• Goals are located at the top and bottom of the screen

Online Play

1. Click "Create Online Room"
2. Share the 6-character room code with your partner
3. Your partner clicks "Join Online Room" and enters the code
4. Game starts automatically when both players are connected!

Installation

Prerequisites

• Node.js (v14 or higher)
• npm (comes with Node.js)

Quick Start

# Clone the repository
git clone https://github.com/yourusername/nidi.git

# Navigate to the project directory
cd nidi

# Install dependencies
npm install

# Start the server
npm start

The game will be available at http://localhost:3001

Playing on Multiple Devices

For online multiplayer on the same network:

1. Find your computer's local IP address
2. Share http://YOUR_IP:3001 with your partner
3. Both players connect and enjoy!

Tech Stack

Backend

Package	Version	Purpose
Express	^4.18.2	Web server framework
Socket.IO	^4.7.2	Real-time bidirectional communication for multiplayer
UUID	^9.0.0	Generate unique room codes

Frontend

Technology	Purpose
HTML5 Canvas	Game rendering and animations
CSS3	Styling with gradients, animations, and responsive design
Vanilla JavaScript	Game logic, physics, and UI
Web Audio API	Procedurally generated sound effects
Service Workers	Offline support (PWA)

No External Dependencies on Frontend!

The entire frontend is built with vanilla JavaScript - no React, Vue, or other frameworks. This keeps the game lightweight and fast.

Project Structure

nidi/
├── server.js              # Express + Socket.IO server
├── package.json           # Dependencies and scripts
├── README.md              # This file
└── public/                # Static files served to client
    ├── index.html         # Main HTML file
    ├── style.css          # All styles
    ├── game.js            # Game logic, rendering, themes
    ├── sw.js              # Service worker for offline support
    ├── manifest.json      # PWA manifest
    ├── logo.svg           # Game logo
    └── favicon.svg        # Browser favicon

How It Was Made

Game Physics

• Collision Detection: Circle-to-circle collision between puck and paddles
• Reflection: Velocity reflection with momentum transfer on collision
• Friction: Gradual speed reduction for realistic puck movement
• Wall Bouncing: Elastic collisions with table edges

AI Opponent

• Prediction: Calculates where the puck will land based on trajectory
• Wall Bounce Simulation: Accounts for multiple wall bounces in prediction
• Smooth Movement: Uses velocity-based movement with acceleration/deceleration
• Difficulty Tuning: ~85% skill level - challenging but beatable

Real-time Multiplayer

• WebSocket Communication: Socket.IO for low-latency game state sync
• Server Authority: Physics calculated on server to prevent cheating
• Room System: Unique codes for private games

Themed Rendering

Each theme has custom rendering functions for:

• Background elements (stars, petals, bubbles)
• Table markings and borders
• Goal designs
• Paddle shapes (UFOs, roses, SpongeBob characters)
• Puck designs (meteor, rose bud, jellyfish)
• Particle effects

Sound System

All sounds are generated procedurally using the Web Audio API:

• Oscillators for tone generation
• Gain nodes for volume control
• Frequency ramping for dynamic sounds
• No audio files needed!

Contributing

Contributions are welcome! Feel free to:

• Report bugs
• Suggest new themes
• Add features
• Improve the AI

License

MIT License - feel free to use this project for learning or fun!

---

Made with ❤️ for playing with loved ones