Sliding Puzzle Game
Creating a simple puzzle game in HTML, CSS, and JavaScript is a fun project! Below is an example of a basic **sliding puzzle game** where the player rearranges tiles to form a complete image or sequence. This game can be run directly in Chrome.
---
### **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>Sliding Puzzle Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Sliding Puzzle Game</h1>
<div id="puzzle-container"></div>
<button id="shuffle-button">Shuffle</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;
}
#puzzle-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
margin: 20px auto;
width: max-content;
}
.tile {
width: 100px;
height: 100px;
background-color: #333;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
border: 2px solid #555;
}
.tile.empty {
background-color: transparent;
border: 2px dashed #555;
color: transparent;
}
#shuffle-button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
}
#shuffle-button:hover {
background-color: #0056b3;
}
```
---
### **JavaScript (script.js)**
```javascript
const puzzleContainer = document.getElementById('puzzle-container');
const shuffleButton = document.getElementById('shuffle-button');
const tiles = [];
let emptyTile = { row: 2, col: 2 }; // Empty tile position
// Initialize the puzzle
function initPuzzle() {
for (let i = 0; i < 8; i++) {
const tile = document.createElement('div');
tile.classList.add('tile');
tile.textContent = i + 1;
tile.addEventListener('click', () => moveTile(i));
tiles.push(tile);
}
// Add empty tile
const empty = document.createElement('div');
empty.classList.add('tile', 'empty');
tiles.push(empty);
renderPuzzle();
}
// Render the puzzle
function renderPuzzle() {
puzzleContainer.innerHTML = '';
tiles.forEach(tile => puzzleContainer.appendChild(tile));
}
// Move a tile
function moveTile(index) {
const tile = tiles[index];
const tileRow = Math.floor(index / 3);
const tileCol = index % 3;
// Check if the tile is adjacent to the empty tile
if (
(Math.abs(tileRow - emptyTile.row) === 1 && tileCol === emptyTile.col) ||
(Math.abs(tileCol - emptyTile.col) === 1 && tileRow === emptyTile.row)
) {
// Swap positions
[tiles[index], tiles[emptyTile.row * 3 + emptyTile.col]] = [tiles[emptyTile.row * 3 + emptyTile.col], tiles[index]];
emptyTile = { row: tileRow, col: tileCol };
renderPuzzle();
checkWin();
}
}
// Shuffle the puzzle
function shufflePuzzle() {
for (let i = 0; i < 1000; i++) {
const randomIndex = Math.floor(Math.random() * 8);
moveTile(randomIndex);
}
}
// Check if the puzzle is solved
function checkWin() {
const isSolved = tiles.every((tile, index) => {
if (index === 8) return true; // Skip the empty tile
return tile.textContent == index + 1;
});
if (isSolved) {
alert('Congratulations! You solved the puzzle!');
}
}
// Event listener for shuffle button
shuffleButton.addEventListener('click', shufflePuzzle);
// Initialize the game
initPuzzle();
```
---
### **How It Works**
1. **HTML**: Creates the structure for the game, including a container for the puzzle tiles and a shuffle button.
2. **CSS**: Styles the tiles and the game layout.
3. **JavaScript**:
- Initializes the puzzle with 8 numbered tiles and 1 empty tile.
- Allows the player to click on a tile to move it into the empty space if it's adjacent.
- Checks if the puzzle is solved after each move.
- Includes a shuffle button to randomize the tiles.
---
### **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 tiles to move them and try to solve the puzzle!
---
### **Enhancements**
- Add an image split into tiles for a visual puzzle.
- Add a timer or move counter.
- Increase the grid size (e.g., 4x4) for a harder challenge.
Let me know if you need help with any of these enhancements! 🎮
Comments
Post a Comment