Color Match Game

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>
  <button id="reset-button">Reset</button>
  <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;
}

#target-color {
  width: 100px;
  height: 100px;
  margin: 20px auto;
  border: 2px solid #000;
}

#grid-container {
  display: grid;
  grid-template-columns: repeat(4, 80px);
  grid-template-rows: repeat(4, 80px);
  gap: 5px;
  margin: 20px auto;
  width: max-content;
}

.cell {
  width: 80px;
  height: 80px;
  background-color: #ccc;
  cursor: pointer;
  border: 2px solid #555;
  transition: background-color 0.3s;
}

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

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

---

### **JavaScript (script.js)**
```javascript
const gridContainer = document.getElementById('grid-container');
const targetColorDisplay = document.getElementById('target-color');
const clickCountDisplay = document.getElementById('click-count');
const resetButton = document.getElementById('reset-button');

let clickCount = 0;
let targetColor;
const gridSize = 4; // 4x4 grid
const colors = ['#FF5733', '#33FF57', '#3357FF', '#FF33A1', '#33FFF5', '#F5FF33']; // Available colors

// Initialize the game
function initGame() {
  clickCount = 0;
  clickCountDisplay.textContent = clickCount;
  targetColor = colors[Math.floor(Math.random() * colors.length)];
  targetColorDisplay.style.backgroundColor = targetColor;
  createGrid();
}

// Create the grid
function createGrid() {
  gridContainer.innerHTML = '';
  for (let i = 0; i < gridSize * gridSize; i++) {
    const cell = document.createElement('div');
    cell.classList.add('cell');
    cell.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
    cell.addEventListener('click', () => handleCellClick(cell));
    gridContainer.appendChild(cell);
  }
}

// Handle cell click
function handleCellClick(cell) {
  const currentColor = cell.style.backgroundColor;
  const newColor = getNextColor(currentColor);
  cell.style.backgroundColor = newColor;
  clickCount++;
  clickCountDisplay.textContent = clickCount;
  checkWin();
}

// Get the next color in the sequence
function getNextColor(currentColor) {
  const currentIndex = colors.indexOf(currentColor);
  return colors[(currentIndex + 1) % colors.length];
}

// Check if the grid matches the target color
function checkWin() {
  const cells = document.querySelectorAll('.cell');
  const allMatch = Array.from(cells).every(cell => cell.style.backgroundColor === targetColor);
  if (allMatch) {
    alert(`You won in ${clickCount} clicks!`);
    initGame(); // Reset the game after winning
  }
}

// Reset the game
resetButton.addEventListener('click', initGame);

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

---

### **How It Works**
1. **HTML**: Creates the structure for the game, including a target color display, a grid container, and a reset button.
2. **CSS**: Styles the grid, target color display, and buttons.
3. **JavaScript**:
   - Generates a random target color and a 4x4 grid with random colors.
   - Allows the player to click on a cell to cycle through colors.
   - Tracks the number of clicks and checks if the grid matches the target color.
   - Resets the game when the player wins or clicks the reset button.

---

### **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 clicking on cells to change their color and try to match the entire grid to the target color!
---

### **Enhancements**
- Add more colors for a harder challenge.
- Increase the grid size (e.g., 5x5 or 6x6).
- Add a timer to track how long it takes to solve the puzzle.
- Add levels with increasing difficulty.

Let me know if you need help with any of these enhancements! 🎨

Comments

Post a Comment

Popular posts from this blog

Games From Deepseek

These games were generate from deepseek and in first go. They all were generated correctly with no syntax or execution errors. This was not the case with other AI tools there were many syntax error and issues, I am sure you may have your own such experience too. Do share your experience here and dont try these codes it works out of the chat on windows 10 plaform. I used simple notepad to copy & paste the code and renamed the file per instrucions generated.  Learn Games Html Ads Will try and create more complex and utility type projects which can help users too.  So enjoy and really in my very brief and limited usage the deepseek is a providing more workable and comprehensive solutions.  The solutions provided by deepseek tool was usable as is. It was not possible with other AI tools otherwise and at times they didn't quite got many simple task right the first time.  Learn More Ads
Read more

Scramble Words

Image
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 ...
Read more

Memory Match Game

Image
 Let’s go with **Memory Match** (Game #2 from the list). If you’d like the code for the others, let me know, and I can provide them one at a time! --- Naav Electronics Learn More Ads ### **Memory Match 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>Memory Match Game</title>   <link rel="stylesheet" href="styles.css"> </head> <body>   <h1>Memory Match Game</h1>   <p>Find all matching pairs!</p>   <div id="game-board"></div>   <p>Moves: <span id="move-count">0</span></p>   <button id="reset-button">Reset</button>   <script src="script.js"></script> </body> </html> ``` --- #### **CSS (s...
Read more