Canvas & Keys

Canvas & Keys 🎨⌨️

**The Ultimate Multi-Mode Creative Typing Game**

Canvas & Keys is an innovative web-based game that combines word guessing, creative drawing, and free typing practice into one exciting experience. Challenge your mind with word puzzles, express your creativity through digital art, and improve your typing skills - all in one beautifully designed application.

## 🎮 Game Modes

### 🧩 **Main Word Guessing Game**

- **Objective**: Guess mystery words based on letter stripes

- **Timer**: 2 minutes per word to keep the pressure on

- **Lives**: 4 hearts - lose one for wrong guesses, timeouts, or skips

- **Scoring**: Earn points for correct guesses within the time limit

- **Hints**: Get 1-2 letter reveals when you're stuck

- **Word Bank**: 1000+ diverse English words for endless variety

### 🎨 **Drawing Mode**

- **Canvas**: Large 800x600 digital drawing space

- **Tools**: 5 different drawing implements:

  - ✏️ **Pencil** - Sharp, precise lines

  - 🖌️ **Brush** - Soft, painterly strokes with shadows

  - 🖊️ **Marker** - Bold, semi-transparent lines

  - 🖍️ **Crayon** - Textured, artistic strokes

  - 🧹 **Eraser** - Clean removal tool

- **Colors**: 48+ pre-defined colors plus custom color picker

- **Size Control**: Adjustable brush sizes from 1-50 pixels

- **Save Feature**: Download your artwork as PNG files

- **Mobile Support**: Touch-friendly drawing on tablets and phones

### ⌨️ **Free Typing Mode**

- **Practice Area**: Large text area for unlimited typing

- **Real-time Stats**:
  - Word count

  - Character count

  - Typing time

  - Words per minute (WPM)

- **Timer**: Automatic timing starts with first keystroke

- **Clear Function**: Easy reset for new sessions

## 🌈 Themes

Transform your gaming experience with 8 stunning themes:

- 🌌 **Galaxy** - Purple & Blue gradient (Default)

- 🌅 **Sunset** - Orange & Pink vibes

- 🌊 **Ocean** - Blue & Teal waves

- 🌲 **Forest** - Green & Earth tones

- 🌸 **Cherry Blossom** - Pink & White elegance

- 🌙 **Midnight** - Dark & Mysterious

- ✨ **Golden** - Luxury & Warmth

- 🕹️ **Retro** - 80s Neon style

*Themes are automatically saved and apply to all game modes!*

## 🎵 Special Features

### Gabriel Button

- **🎵 Gabriel** - Special sound button for audio feedback

- **Cooldown System** - 10-second cooldown with visual countdown

- **Audio Effects** - Plays custom sound files

- **Visual Feedback** - Pulsing animation during playback

## 🚀 Getting Started

### Prerequisites

- Modern web browser (Chrome, Firefox, Safari, Edge)

- No additional software required!

### Installation

1. Download all game files to a folder

2. Ensure these files are present:

   - `index.html`

   - `style.css`

   - `script.js`

   - `gab_Taunt12.wav` (for Gabriel button)

3. Open `index.html` in your web browser

4. Start playing immediately!

## 🎯 How to Play

### Word Guessing Game

1. **Study the stripes** - Each stripe represents one letter

2. **Type your guess** in the input field

3. **Use hints wisely** - Maximum 2 hints per word

4. **Beat the timer** - You have 2 minutes per word

5. **Earn points** - Correct guesses within time add to your score

6. **Protect your hearts** - Wrong guesses cost lives

### Drawing Mode

1. **Choose a tool** from the toolbar

2. **Select colors** from the extensive palette

3. **Adjust brush size** with the slider

4. **Draw on the canvas** by clicking and dragging

5. **Save your artwork** when finished

6. **Return to main game** anytime

### Free Typing

1. **Click in the text area** and start typing

2. **Watch your stats** update in real-time

3. **Track your WPM** to improve typing speed

4. **Clear and restart** as often as you like

## 🎨 Features Highlight

- **1000+ Words** - Massive vocabulary ensures fresh gameplay

- **Responsive Design** - Perfect on desktop, tablet, and mobile

- **Touch Support** - Full touch compatibility for drawing

- **Auto-Save Themes** - Your preferences are remembered

- **Professional Audio** - High-quality sound effects

- **Smooth Animations** - Beautiful transitions and effects

- **Cross-Platform** - Works on all modern devices

- **No Installation** - Runs directly in your browser

## 🛠️ Technical Details

- **Frontend**: HTML5, CSS3, JavaScript (ES6+)

- **Graphics**: HTML5 Canvas for drawing

- **Audio**: HTML5 Audio API

- **Storage**: localStorage for preferences

- **Responsive**: CSS Grid and Flexbox

- **Performance**: Optimized for smooth 60fps experience

## 🎮 Controls

### Keyboard Shortcuts

- **Enter** - Submit word guess

- **Escape** - Close modals

- **Tab** - Navigate between elements

### Mouse/Touch

- **Click/Tap** - All primary interactions

- **Drag** - Drawing on canvas

- **Hover** - Interactive feedback

## 🏆 Game Tips

### Word Guessing

- Start with common letters (E, A, R, I, O, T)

- Use word length as a clue

- Think about word categories

- Save hints for longer words

### Drawing

- Experiment with different tools for varied effects

- Use lighter colors for sketching, darker for details

- Try layering different tools for artistic effects

- Save your work frequently

### Typing Practice

- Focus on accuracy over speed initially

- Use all fingers for proper technique

- Take breaks to avoid fatigue

- Set personal WPM goals

## 📱 Browser Compatibility

- ✅ **Chrome** 80+

- ✅ **Firefox** 75+

- ✅ **Safari** 13+

- ✅ **Edge** 80+

- ✅ **Mobile Browsers** (iOS Safari, Chrome Mobile)

## 🔧 Troubleshooting

### Audio Issues

- Ensure `gab_Taunt12.wav` is in the same folder

- Check browser audio permissions

- Try clicking on the page before using audio buttons

### Performance

- Use latest browser version

- Close other resource-intensive tabs

- Ensure good internet connection for optimal experience

### Mobile

- Use landscape orientation for best drawing experience

- Ensure touch is enabled in browser settings

## 🎊 Credits

**Canvas & Keys** - A modern typing and creativity game combining education with entertainment.

Created with passion for learning, creativity, and fun! 🌟

---

*Ready to test your typing skills and unleash your creativity? Launch Canvas & Keys and dive into the ultimate multi-mode gaming experience!*