Creating a simple puzzle game in HTML, CSS, and JavaScript involves a few steps. Here's an example of a basic sliding puzzle game:
### 1. HTML Structure
Create an HTML file with a container for your puzzle pieces.
```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>
<div class="puzzle-container">
<div class="puzzle-piece" id="piece1">1</div>
<div class="puzzle-piece" id="piece2">2</div>
<div class="puzzle-piece" id="piece3">3</div>
<div class="puzzle-piece" id="piece4">4</div>
<div class="puzzle-piece" id="piece5">5</div>
<div class="puzzle-piece" id="piece6">6</div>
<div class="puzzle-piece" id="piece7">7</div>
<div class="puzzle-piece" id="piece8">8</div>
<div class="puzzle-piece empty" id="empty"></div>
</div>
<script src="script.js"></script>
</body>
</html>
```
### 2. CSS Styling
Create a CSS file (`styles.css`) to style your puzzle pieces and container.
```css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.puzzle-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 2px;
}
.puzzle-piece {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
background-color: #ffcc00;
font-size: 24px;
font-weight: bold;
cursor: pointer;
}
.empty {
background-color: #f0f0f0;
cursor: default;
}
```
### 3. JavaScript Functionality
Create a JavaScript file (`script.js`) to add the game logic.
```javascript
document.addEventListener('DOMContentLoaded', () => {
const puzzleContainer = document.querySelector('.puzzle-container');
const pieces = Array.from(document.querySelectorAll('.puzzle-piece'));
pieces.forEach(piece => {
piece.addEventListener('click', () => {
movePiece(piece);
});
});
function movePiece(piece) {
const emptyPiece = document.getElementById('empty');
const piecePos = piece.getBoundingClientRect();
const emptyPos = emptyPiece.getBoundingClientRect();
const distance = Math.abs(piecePos.left - emptyPos.left) + Math.abs(piecePos.top - emptyPos.top);
if (distance === 102) { // 100px size + 2px gap
swapPieces(piece, emptyPiece);
}
}
function swapPieces(piece1, piece2) {
const temp = document.createElement('div');
piece1.replaceWith(temp);
piece2.replaceWith(piece1);
temp.replaceWith(piece2);
}
});
```
### Explanation
1. **HTML**: The structure includes a grid of 3x3 div elements, each representing a puzzle piece. One of these pieces is the empty space.
2. **CSS**: The styling creates a grid layout for the puzzle pieces and makes the pieces visually distinct.
3. **JavaScript**: The script adds event listeners to the puzzle pieces. When a piece is clicked, it checks if it can be moved to the empty space (only adjacent pieces can move). If the move is valid, the pieces are swapped.
This is a simple sliding puzzle game. You can expand and enhance this basic structure by adding more features like shuffling the pieces, checking for a win condition, adding animations, etc.
No comments:
Post a Comment