<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Match Puzzle</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
background: #f0f9ff;
font-family: 'Arial Rounded MT Bold', Arial, sans-serif;
}
#game-board {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 5px;
background: white;
padding: 10px;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.tile {
width: 60px;
height: 60px;
border-radius: 10px;
cursor: pointer;
transition: transform 0.2s;
}
.tile:hover {
transform: scale(1.1);
}
.red { background: #ff6b6b; }
.blue { background: #4ecdc4; }
.green { background: #a8e6cf; }
.yellow { background: #ffd700; }
.purple { background: #d4a3e8; }
#score {
font-size: 24px;
color: #333;
margin: 20px;
}
button {
padding: 10px 20px;
font-size: 18px;
background: #4ecdc4;
border: none;
border-radius: 25px;
color: white;
cursor: pointer;
margin: 10px;
}
</style>
</head>
<body>
<h1>🌈 Color Match Puzzle!</h1>
<div id="score">Moves: <span id="move-counter">0</span></div>
<div id="game-board"></div>
<button onclick="resetGame()">New Game</button>
<script>
const COLORS = ['red', 'blue', 'green', 'yellow', 'purple'];
const BOARD_SIZE = 6;
let moves = 0;
let selectedTile = null;
let board = [];
class Tile {
constructor(color) {
this.element = document.createElement('div');
this.element.className = `tile ${color}`;
this.color = color;
this.element.addEventListener('click', () => this.handleClick());
}
handleClick() {
if (!selectedTile) {
selectedTile = this;
this.element.style.border = '3px solid white';
} else {
if (this.isAdjacent(selectedTile)) {
swapTiles(selectedTile, this);
checkMatches();
moves++;
document.getElementById('move-counter').textContent = moves;
}
selectedTile.element.style.border = '';
selectedTile = null;
}
}
isAdjacent(otherTile) {
const index1 = Array.from(this.element.parentNode.children).indexOf(this.element);
const index2 = Array.from(otherTile.element.parentNode.children).indexOf(otherTile.element);
const diff = Math.abs(index1 - index2);
return diff === 1 || diff === BOARD_SIZE;
}
}
function createBoard() {
const boardElement = document.getElementById('game-board');
boardElement.innerHTML = '';
board = [];
for (let i = 0; i < BOARD_SIZE * BOARD_SIZE; i++) {
const color = COLORS[Math.floor(Math.random() * COLORS.length)];
const tile = new Tile(color);
boardElement.appendChild(tile.element);
board.push(tile);
}
}
function swapTiles(tile1, tile2) {
const tempColor = tile1.color;
tile1.color = tile2.color;
tile2.color = tempColor;
tile1.element.className = `tile ${tile1.color}`;
tile2.element.className = `tile ${tile2.color}`;
}
function checkMatches() {
// Check horizontal matches
for (let row = 0; row < BOARD_SIZE; row++) {
for (let col = 0; col < BOARD_SIZE - 2; col++) {
const index = row * BOARD_SIZE + col;
if (board[index].color === board[index + 1].color &&
board[index].color === board[index + 2].color) {
clearTiles([index, index + 1, index + 2]);
}
}
}
// Check vertical matches
for (let col = 0; col < BOARD_SIZE; col++) {
for (let row = 0; row < BOARD_SIZE - 2; row++) {
const index = row * BOARD_SIZE + col;
if (board[index].color === board[index + BOARD_SIZE].color &&
board[index].color === board[index + BOARD_SIZE * 2].color) {
clearTiles([index, index + BOARD_SIZE, index + BOARD_SIZE * 2]);
}
}
}
}
function clearTiles(indices) {
indices.forEach(index => {
board[index].color = COLORS[Math.floor(Math.random() * COLORS.length)];
board[index].element.className = `tile ${board[index].color}`;
board[index].element.classList.add('pop');
setTimeout(() => board[index].element.classList.remove('pop'), 300);
});
}
function resetGame() {
moves = 0;
document.getElementById('move-counter').textContent = moves;
createBoard();
}
// Initialize game
resetGame();
</script>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.