okayuScroller

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:

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! 🐾