🎄 Christmas Breakout Game 🎄

A mobile-first breakout/brick-breaker game with a festive Christmas theme. Clear levels, earn Christmas gifts, and share your victory on ntfy.sh!

Features

✨ Mobile-First Design

• Fully responsive gameplay optimized for mobile devices
• Touch controls and device orientation (tilt) support
• Beautiful Christmas-themed UI with gradients and animations

🎮 Progressive Levels

• 3 challenging levels with increasing difficulty
• More bricks and faster ball speed as you progress
• Smooth gameplay at 60 FPS

🎁 Christmas Rewards

• Unique Christmas gifts for each level completion
• Gift animations and celebratory effects
• Random gift selection from a festive list

📢 Social Integration

• Enter your name at the start
• Automatic notifications sent to ntfy.sh when you clear a level
• Share your achievements instantly

🎯 Game Mechanics

• Physics-based ball and paddle collision detection
• Responsive paddle movement (mouse, touch, or device tilt)
• Score tracking throughout the game

How to Play

1. Enter Your Name: Start the game by entering your name
2. Move the Paddle:
   • On desktop: Move your mouse
   • On mobile: Swipe your finger or tilt your device
3. Break the Bricks: Use the paddle to bounce the ball up and break all bricks
4. Complete Levels: Clear all bricks to earn a Christmas gift and advance
5. Earn Points: Gain 10 points per brick destroyed

Controls

Device	Control
Desktop	Mouse movement
Mobile (Touch)	Tap and drag or swipe
Mobile (Accelerometer)	Tilt device left/right

Customization

Difficulty Levels

Edit game.js GAME_CONFIG.levels to adjust:

• brickRows: Number of brick rows
• brickCols: Number of brick columns
• ballSpeed: Ball movement speed

Christmas Gifts

Modify GAME_CONFIG.christmasGifts array to customize reward messages.

Colors & Styling

Edit styles.css to change:

• Background gradient colors
• Button colors
• Brick colors
• Game canvas appearance

Notification Channel

Change the ntfy.sh channel in game.js sendNotification() method:

await fetch('https://ntfy.sh/YOUR_CHANNEL_NAME', {

Installation & Running

Option 1: Using VS Code Live Server

1. Install the Live Server extension
2. Right-click index.html and select "Open with Live Server"

Option 2: Using Python HTTP Server

python -m http.server 8000

Then visit http://localhost:8000

Option 3: Using Node.js http-server

npx http-server

Browser Support

• Chrome/Edge 60+
• Firefox 55+
• Safari 11+
• Mobile browsers (iOS Safari, Chrome Android)

API Integration

ntfy.sh Notifications

When a player completes a level, a POST request is sent to:

https://ntfy.sh/davidtaljsten

With the message format:

🎉 [PlayerName] cleared level [X] and earned: [Gift]! Score: [Score]

No authentication required - ntfy.sh creates the channel automatically on first use.

Project Structure

/
├── index.html          # Main HTML file with game structure
├── styles.css          # CSS styling and animations
├── game.js             # Game logic and mechanics
└── README.md           # This file

Technical Details

Game Engine

• Vanilla JavaScript (no frameworks)
• HTML5 Canvas for rendering
• RequestAnimationFrame for 60 FPS gameplay

Physics

• Basic collision detection (AABB)
• Vector-based ball movement
• Dynamic paddle bounce angles

Responsive Design

• CSS media queries for different screen sizes
• Canvas scaling to device width
• Touch-action: none for smooth interactions

Future Enhancements

• Power-ups (larger paddle, multi-ball, slow motion)
• Sound effects and music
• Local leaderboard with localStorage
• More levels and difficulty modes
• Pause/resume functionality
• Mobile app wrapper (PWA/Cordova)

License

Free to use and modify for personal projects.

Enjoy! 🎄🎁

Clear all the bricks, earn your Christmas gifts, and spread the holiday cheer! 🎉