Gravity Ball

Great! Let’s implement the **Word Scramble** game (Game #3 from the list). In this game, the player is given a scrambled word and must unscramble it within a time limit. The game will have multiple levels with increasing difficulty.
---

### **Word Scramble Game**

#### **HTML (index.html)**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Word Scramble</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Word Scramble</h1>
  <p>Unscramble the word before time runs out!</p>
  <div id="game-container">
    <p>Level: <span id="level">1</span></p>
    <p>Time Left: <span id="timer">30</span>s</p>
    <p>Scrambled Word: <span id="scrambled-word"></span></p>
    <input type="text" id="guess-input" placeholder="Your guess...">
    <button id="submit-button">Submit</button>
    <p id="result"></p>
  </div>
  <script src="script.js"></script>
</body>
</html>
```

---

#### **CSS (styles.css)**
```css
body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #f0f0f0;
  margin: 0;
  padding: 20px;
}

#game-container {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  margin: 20px auto;
}

#scrambled-word {
  font-size: 24px;
  font-weight: bold;
  color: #007bff;
}

#guess-input {
  padding: 10px;
  font-size: 16px;
  width: 80%;
  margin: 10px 0;
  border: 2px solid #007bff;
  border-radius: 5px;
}

#submit-button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
}

#submit-button:hover {
  background-color: #0056b3;
}

#result {
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
}
```

---

#### **JavaScript (script.js)**
```javascript
const scrambledWordDisplay = document.getElementById('scrambled-word');
const guessInput = document.getElementById('guess-input');
const submitButton = document.getElementById('submit-button');
const resultDisplay = document.getElementById('result');
const levelDisplay = document.getElementById('level');
const timerDisplay = document.getElementById('timer');

let currentLevel = 1;
let timeLeft = 30;
let timer;
const words = [
  { word: 'apple', scrambled: 'papel' },
  { word: 'banana', scrambled: 'nabana' },
  { word: 'orange', scrambled: 'roange' },
  { word: 'grape', scrambled: 'gaper' },
  { word: 'strawberry', scrambled: 'strawberyr' }
];

// Initialize the game
function initGame() {
  currentLevel = 1;
  timeLeft = 30;
  loadLevel();
  startTimer();
}

// Load the current level
function loadLevel() {
  const currentWord = words[currentLevel - 1];
  scrambledWordDisplay.textContent = currentWord.scrambled;
  guessInput.value = '';
  resultDisplay.textContent = '';
  levelDisplay.textContent = currentLevel;
}

// Start the timer
function startTimer() {
  timer = setInterval(() => {
    timeLeft--;
    timerDisplay.textContent = timeLeft;
    if (timeLeft <= 0) {
      clearInterval(timer);
      endGame(false);
    }
  }, 1000);
}

// Check the player's guess
function checkGuess() {
  const currentWord = words[currentLevel - 1];
  const guess = guessInput.value.trim().toLowerCase();
  if (guess === currentWord.word) {
    resultDisplay.textContent = 'Correct!';
    currentLevel++;
    if (currentLevel > words.length) {
      endGame(true);
    } else {
      timeLeft = 30;
      loadLevel();
    }
  } else {
    resultDisplay.textContent = 'Incorrect! Try again.';
  }
}

// End the game
function endGame(isWin) {
  clearInterval(timer);
  if (isWin) {
    alert('Congratulations! You won the game!');
  } else {
    alert('Time’s up! Game over.');
  }
  initGame();
}

// Event listener for submit button
submitButton.addEventListener('click', checkGuess);

// Initialize the game on page load
initGame();
```

---

### **How It Works**
1. **HTML**: Creates the structure for the game, including a scrambled word display, input field, and submit button.
2. **CSS**: Styles the game container, input field, and buttons.
3. **JavaScript**:
   - Loads a scrambled word for the current level.
   - Starts a countdown timer for each level.
   - Checks the player’s guess and advances to the next level if correct.
   - Ends the game if the player runs out of time or completes all levels.

---

### **How to Run**
1. Save the code into three files: `index.html`, `styles.css`, and `script.js`.
2. Open `index.html` in Chrome.
3. Play the game by unscrambling the word before time runs out!
https://naav-retail.mini.site
---

Let me know which game you’d like me to implement next! 🎮

Comments

Post a Comment

Popular posts from this blog

Maze Game

Image
Sure! Below are **10 unique, attention-catching, and interesting game ideas** that you can build using HTML, CSS, and JavaScript. Each game is designed to be simple yet engaging, and they can all be run in a browser like Chrome. --- ### **1. Maze Escape** - **Description**: The player navigates a ball through a maze to reach the exit using arrow keys. - **Unique Twist**: Add moving obstacles or time limits for each level. - **Tech**: HTML5 Canvas for the maze, JavaScript for movement logic. ### **Implementation Example: Maze Escape** Here’s a quick implementation of the **Maze Escape** game: #### **HTML (index.html)** ```html <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Maze Escape</title>   <link rel="stylesheet" href="styles.css"> </head> <body>   <h1...
Read more

Top-Down Shooter Game

Image
Sure! Let’s create a more **complex and heavy game** using HTML, CSS, and JavaScript. This time, we’ll build a **Top-Down Shooter Game** where the player controls a spaceship, shoots enemies, and survives as long as possible. This game will include: - Player movement (WASD or arrow keys). - Shooting mechanics. - Enemy spawning and AI. - Collision detection. - Score tracking. - Increasing difficulty over time. --- ### **Top-Down Shooter Game** #### **HTML (index.html)** ```html <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Top-Down Shooter</title>   <link rel="stylesheet" href="styles.css"> </head> <body>   <h1>Top-Down Shooter</h1>   <p>Survive as long as you can! Use WASD or Arrow Keys to move, and Space to shoot.</p>   <div id=...
Read more

Color Match Game

Image
Sure! Let’s create a **unique puzzle game** called **"Color Match Puzzle"**. In this game, the player must match the colors of the grid cells to a target color by clicking on cells to change their color. The goal is to make the entire grid match the target color in as few clicks as possible. --- ### **HTML (index.html)** ```html <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Color Match Puzzle</title>   <link rel="stylesheet" href="styles.css"> </head> <body>   <h1>Color Match Puzzle</h1>   <p>Match the grid to the target color!</p>   <div id="target-color"></div>   <div id="grid-container"></div>   <p>Clicks: <span id="click-count">0</span></p>   ...
Read more