Skip to content

SSOC25: ๐ŸŽฎ Add Word Wizard โ€“ Scramble & Solve Game #759

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโ€™ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SK8-infi wants to merge 1 commit into
base: main
Choose a base branch
from
Open

SSOC25: ๐ŸŽฎ Add Word Wizard โ€“ Scramble & Solve Game #759

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
196 changes: 196 additions & 0 deletions public/word scramble/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
# ๐Ÿ”ค Word Wizard โ€“ Scramble & Solve

A fun and engaging word scramble game where players unscramble words based on helpful hints. Built with modern web technologies and featuring a beautiful, responsive design.

## โœจ Features

### ๐ŸŽฎ Core Gameplay
- **Random Word Selection**: Words are randomly chosen from a curated database
- **Word Scrambling**: Advanced algorithm that ensures scrambled words are different from originals
- **Hint System**: Helpful clues guide players to the correct answer
- **User Input**: Clean, accessible input system with keyboard support

### ๐Ÿ† Scoring & Progress
- **Scoring System**: +1 point for each correct answer
- **Streak Tracker**: Count consecutive correct answers
- **Timer Mode**: 60-second countdown adds excitement
- **Words Solved Counter**: Track total words completed

### ๐ŸŽจ User Experience
- **Dark Mode**: Toggle between light and dark themes
- **Responsive Design**: Works perfectly on desktop, tablet, and mobile
- **Smooth Animations**: Engaging visual feedback and transitions
- **Confetti Effect**: Celebratory animation for correct answers
- **Game Over Modal**: Beautiful end-game summary

### ๐ŸŽฏ Game Flow
1. Click "Start Game" to begin
2. View the scrambled word and hint
3. Type your answer and press Enter or click Submit
4. Get immediate feedback and see your score/stats
5. Continue until the timer runs out
6. Review your final performance

## ๐Ÿ› ๏ธ Tech Stack

- **Frontend**: HTML5, CSS3, Vanilla JavaScript
- **Styling**: Modern CSS with CSS Variables and Flexbox/Grid
- **Fonts**: Google Fonts (Poppins)
- **Icons**: Font Awesome 6
- **Animations**: CSS Keyframes and JavaScript
- **Storage**: Local Storage for theme preferences

## ๐Ÿ“ Project Structure

```
word-scramble/
โ”œโ”€โ”€ index.html # Main HTML structure
โ”œโ”€โ”€ styles.css # Complete styling with dark mode
โ”œโ”€โ”€ script.js # Game logic and functionality
โ””โ”€โ”€ README.md # Project documentation
```

## ๐Ÿš€ Getting Started

### Prerequisites
- A modern web browser (Chrome, Firefox, Safari, Edge)
- No additional dependencies required!

### Installation
1. Clone or download the project files
2. Open `index.html` in your web browser
3. Start playing immediately!

### Local Development
If you want to run it locally with a server:
```bash
# Using Python 3
python -m http.server 8000

# Using Node.js (if you have http-server installed)
npx http-server

# Using PHP
php -S localhost:8000
```

Then visit `http://localhost:8000` in your browser.

## ๐ŸŽฎ How to Play

1. **Start the Game**: Click the "Start Game" button
2. **Read the Hint**: Look at the hint below the scrambled word
3. **Unscramble**: Figure out what the original word is
4. **Submit Answer**: Type your answer and press Enter or click Submit
5. **Build Streaks**: Get consecutive correct answers for higher scores
6. **Beat the Clock**: Try to solve as many words as possible in 60 seconds!

## ๐Ÿ“Š Word Database

The game includes 30 carefully selected words with helpful hints:

- **Animals**: elephant, butterfly, dolphin, penguin
- **Nature**: mountain, rainbow, volcano, waterfall, snowflake
- **Technology**: computer, telescope, skyscraper
- **Food**: pizza, chocolate, watermelon
- **Objects**: guitar, umbrella, bicycle, diamond
- **Places**: library, lighthouse, carnival, rainforest
- **And many more!**

## ๐ŸŽจ Customization

### Adding New Words
To add new words, edit the `wordDatabase` array in `script.js`:

```javascript
const wordDatabase = [
{ word: "yourword", hint: "Your hint here" },
// ... existing words
];
```

### Modifying Game Settings
Adjust game parameters in the `gameState` object:

```javascript
let gameState = {
timer: 60, // Change timer duration
// ... other settings
};
```

### Styling Customization
The CSS uses CSS variables for easy theming. Modify the `:root` section in `styles.css`:

```css
:root {
--primary-color: #6366f1; /* Main brand color */
--secondary-color: #10b981; /* Success/action color */
/* ... other variables */
}
```

## ๐ŸŒŸ Features in Detail

### Word Scrambling Algorithm
- Uses Fisher-Yates shuffle for true randomness
- Ensures scrambled word is never the same as original
- Handles edge cases and repeated letters

### Timer System
- 60-second countdown timer
- Visual feedback as time runs low
- Automatic game end when timer reaches zero

### Dark Mode
- Persistent theme preference (saved in localStorage)
- Smooth transitions between themes
- Optimized colors for both light and dark modes

### Responsive Design
- Mobile-first approach
- Flexible grid layouts
- Touch-friendly buttons and inputs
- Optimized typography for all screen sizes

### Accessibility
- Keyboard navigation support
- High contrast color schemes
- Clear visual feedback
- Screen reader friendly

## ๐ŸŽฏ Future Enhancements

Potential features for future versions:
- **Difficulty Levels**: Easy, Medium, Hard word categories
- **Sound Effects**: Audio feedback for correct/incorrect answers
- **Leaderboards**: Local or online high score tracking
- **Word Categories**: Themed word sets (animals, food, etc.)
- **Multiplayer Mode**: Competitive play with friends
- **Custom Word Lists**: Import your own word collections
- **Statistics**: Detailed performance analytics
- **Achievements**: Unlockable badges and milestones

## ๐Ÿค Contributing

This project is part of the SSoC (Summer of Open Source Code) initiative. Feel free to:
- Report bugs or issues
- Suggest new features
- Submit pull requests
- Improve documentation

## ๐Ÿ“„ License

This project is open source and available under the [MIT License](LICENSE).

## ๐Ÿ™ Acknowledgments

- **Font Awesome** for the beautiful icons
- **Google Fonts** for the Poppins font family
- **SSoC** for the project inspiration and framework

---

**Happy Scrambling! ๐ŸŽ‰**

*Built with โค๏ธ for word game enthusiasts everywhere*
106 changes: 106 additions & 0 deletions public/word scramble/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word Wizard โ€“ Scramble & Solve</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="container">
<!-- Header -->
<header class="header">
<h1 class="title">
<i class="fas fa-magic"></i>
Word Wizard
</h1>
<div class="theme-toggle">
<button id="themeToggle" class="theme-btn">
<i class="fas fa-moon"></i>
</button>
</div>
</header>

<!-- Game Stats -->
<div class="stats">
<div class="stat-item">
<i class="fas fa-star"></i>
<span>Score: <span id="score">0</span></span>
</div>
<div class="stat-item">
<i class="fas fa-fire"></i>
<span>Streak: <span id="streak">0</span></span>
</div>
<div class="stat-item">
<i class="fas fa-clock"></i>
<span>Time: <span id="timer">60</span>s</span>
</div>
</div>

<!-- Game Area -->
<div class="game-area">
<div class="word-display">
<h2 class="scrambled-word" id="scrambledWord">Ready to start?</h2>
</div>

<div class="hint-section">
<i class="fas fa-lightbulb"></i>
<p class="hint-text" id="hintText">Click "Start Game" to begin!</p>
</div>

<div class="input-section">
<input type="text" id="userInput" placeholder="Type your answer here..." disabled>
<button id="submitBtn" class="submit-btn" disabled>
<i class="fas fa-check"></i>
Submit
</button>
</div>

<div class="game-controls">
<button id="startBtn" class="start-btn">
<i class="fas fa-play"></i>
Start Game
</button>
<button id="newWordBtn" class="new-word-btn" style="display: none;">
<i class="fas fa-random"></i>
New Word
</button>
</div>
</div>

<!-- Result Messages -->
<div class="result-message" id="resultMessage"></div>

<!-- Game Over Modal -->
<div class="modal" id="gameOverModal">
<div class="modal-content">
<h2>Game Over!</h2>
<div class="final-stats">
<p>Final Score: <span id="finalScore">0</span></p>
<p>Best Streak: <span id="finalStreak">0</span></p>
<p>Words Solved: <span id="wordsSolved">0</span></p>
</div>
<button id="playAgainBtn" class="play-again-btn">
<i class="fas fa-redo"></i>
Play Again
</button>
</div>
</div>

<!-- Instructions -->
<div class="instructions">
<h3><i class="fas fa-info-circle"></i> How to Play</h3>
<ul>
<li>Unscramble the word based on the hint provided</li>
<li>Type your answer and click Submit</li>
<li>Get points for correct answers and build your streak!</li>
<li>Beat the timer for an extra challenge</li>
</ul>
</div>
</div>

<script src="script.js"></script>
</body>
</html>
Loading