# Nekomata Okayu Scroller 🐱

A simple and charming pixel art mini-game based on VTuber Nekomata Okayu. A side-scrolling experience where you can control Okayu while she explores a pixelated world with synchronized lyrics.

## 🎮 Controls

- **A / ←** - Move left
- **D / →** - Move right
- **W / ↑** - Jump
- **Rapid A/D alternation** - Lateral dash with smoke effects (alternate left/right quickly)
- **Shift + Direction** - Teleport dash (instant movement with smoke trail)
- **L** - Show/Hide lyrics
- **R** - Restart game

## 🎯 Features

- ✅ **Smooth Movement** - Precise control with fluid animations
- ✅ **Jump Mechanics** - Smooth physics-based jumping with directional momentum
- ✅ **Lateral Dash System** - Rapid movement by alternating left/right keys quickly
- ✅ **Teleport Dash System** - Instant directional movement with Shift + direction keys
- ✅ **Character Animations** - Animated sprites for idle and walking states
- ✅ **Dynamic Direction** - Character faces the direction of movement
- ✅ **Background Music** - Plays music when you click the canvas
- ✅ **Synchronized Lyrics** - Real-time lyrics display synced with the music
- ✅ **Dynamic Background** - Procedurally generated clouds and background objects
- ✅ **Pixel Art Style** - Retro pixelated aesthetic with crisp rendering
- ✅ **Responsive Design** - Adapts to different screen sizes
- ✅ **Game Over Screen** - Displays when the song ends
- ✅ **Restart Functionality** - Press R to restart the game anytime

## 🚀 How to Use

1. **Prepare your assets:**
   - Place your sprite sheet in `assets/sprites.png` (930x614px)
   - Place your music in `assets/music.mp3`
   - Adjust sprite coordinates in `js/player.js` according to your sprite sheet

2. **Open the game:**
   - Simply open `index.html` in your browser
   - Click on the canvas to start the music
   - Start playing!

## 🎨 Customization

### Sprite Coordinates
In `js/player.js`, adjust sprite coordinates according to your sprite sheet:

```javascript
this.sprites = {
    idle: [
        { x: 370, y: 15, w: 24, h: 34 },
        // ... more frames
    ],
    walk: [
        { x: 2, y: 16, w: 24, h: 34 },
        // ... more frames
    ]
};
```

### Game Physics
Adjust these values in `js/player.js`:
- `speed` - Horizontal movement speed
- `width` and `height` - Character size
- Canvas bounds are automatically handled

### Lyrics Synchronization
In `js/lyrics.js`, you can:
- Adjust `timeOffset` to sync lyrics with music
- Modify lyrics data in the `parseLyrics()` method
- Toggle lyrics visibility with the L key

## 📁 Project Structure

```
okayuScroller/
├── index.html              # Main page
├── css/
│   └── styles.css          # Game styles
├── js/
│   ├── game.js             # Main game logic
│   ├── player.js           # Player class
│   ├── input.js            # Input handling
│   ├── lyrics.js           # Lyrics system
│   └── spriteProcessor.js  # Sprite processing
├── assets/
│   ├── sprites.png         # Sprite sheet (930x614px)
│   ├── music.mp3           # Background music
│   ├── font.ttf            # Custom font for lyrics
│   └── favicon.svg         # Game favicon
└── README.md               # This file
```

## 🛠️ Technologies Used

- **HTML5 Canvas** - Game rendering
- **JavaScript ES6+** - Game logic
- **CSS3** - Styling and responsive design
- **SVG** - Favicon creation
- **Pixel art** - Retro visual style

## 🎵 Music Notes

The game expects a `music.mp3` file in the `assets/` folder. Music plays automatically after clicking the canvas (required by modern browser policies).

## 📱 Compatibility

- ✅ Chrome, Firefox, Safari, Edge
- ✅ Mobile devices (responsive)
- ✅ Requires JavaScript enabled
- ✅ Scales automatically to screen size

## 🎮 Game Systems

### Cloud System
- Procedurally generates background clouds
- Configurable spawn rates and movement speeds
- Automatic cleanup of off-screen elements

### Background Object System
- Spawns groups of decorative objects
- Multiple sprite variants for variety
- Configurable group sizes and spacing

### Lyrics System
- Real-time synchronization with music
- Adjustable time offset for perfect sync
- Fade in/out transitions
- Multi-line text wrapping

---

Enjoy playing with Okayu! 🐾