HTML Puzzle Game Developer i have been solved it
Budget: $15 – $25 USD
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Puzzle Game</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
height: 100vh;
background-color: #2a2a72;
}
.game-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.puzzle-board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
background-color: #1a1a40;
padding: 10px;
border-radius: 10px;
}
.puzzle-slot {
width: 100px;
height: 100px;
background-color: #f0f0f0;
border: 2px dashed #ccc;
border-radius: 10px;
position: relative;
}
.puzzle-pieces {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.puzzle-piece {
width: 100px;
height: 100px;
background-color: white;
border: 2px solid #ccc;
border-radius: 10px;
cursor: grab;
}
.correct {
border: 2px solid green;
}
.incorrect {
border: 2px solid red;
}
</style>
</head>
<body>
<div class="game-container">
<div class="puzzle-board" id="puzzleBoard">
<div class="puzzle-slot" data-id="1"></div>
<div class="puzzle-slot" data-id="2"></div>
<div class="puzzle-slot" data-id="3"></div>
<div class="puzzle-slot" data-id="4"></div>
<div class="puzzle-slot" data-id="5"></div>
</div>
<div class="puzzle-pieces" id="puzzlePieces">
<div class="puzzle-piece" draggable="true" data-id="1">1</div>
<div class="puzzle-piece" draggable="true" data-id="2">2</div>
<div class="puzzle-piece" draggable="true" data-id="3">3</div>
<div class="puzzle-piece" draggable="true" data-id="4">4</div>
<div class="puzzle-piece" draggable="true" data-id="5">5</div>
</div>
</div>
<script>
const puzzlePieces = document.querySelectorAll('.puzzle-piece');
const puzzleSlots = document.querySelectorAll('.puzzle-slot');
puzzlePieces.forEach(piece => {
piece.addEventListener('dragstart', dragStart);
});
puzzleSlots.forEach(slot => {
slot.addEventListener('dragover', dragOver);
slot.addEventListener('drop', drop);
});
function dragStart(event) {
event.dataTransfer.setData('text', event.target.dataset.id);
}
function dragOver(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
const pieceId = event.dataTransfer.getData('text');
const slotId = event.target.dataset.id;
const piece = document.querySelector(`.puzzle-piece[data-id='${pieceId}']`);
if (pieceId === slotId) {
event.target.appendChild(piece);
piece.classList.add('correct');
piece.setAttribute('draggable', 'false');
} else {
piece.classList.add('incorrect');
setTimeout(() => piece.classList.remove('incorrect'), 1000);
}
checkCompletion();
}
function checkCompletion() {
const allCorrect = Array.from(puzzleSlots).every(slot => {
const piece = slot.querySelector('.puzzle-piece');
return piece && piece.dataset.id === slot.dataset.id;
});
if (allCorrect) {
alert('Congratulations! You completed the puzzle!');
}
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Puzzle Game</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
height: 100vh;
background-color: #2a2a72;
}
.game-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.puzzle-board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
background-color: #1a1a40;
padding: 10px;
border-radius: 10px;
}
.puzzle-slot {
width: 100px;
height: 100px;
background-color: #f0f0f0;
border: 2px dashed #ccc;
border-radius: 10px;
position: relative;
}
.puzzle-pieces {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.puzzle-piece {
width: 100px;
height: 100px;
background-color: white;
border: 2px solid #ccc;
border-radius: 10px;
cursor: grab;
}
.correct {
border: 2px solid green;
}
.incorrect {
border: 2px solid red;
}
</style>
</head>
<body>
<div class="game-container">
<div class="puzzle-board" id="puzzleBoard">
<div class="puzzle-slot" data-id="1"></div>
<div class="puzzle-slot" data-id="2"></div>
<div class="puzzle-slot" data-id="3"></div>
<div class="puzzle-slot" data-id="4"></div>
<div class="puzzle-slot" data-id="5"></div>
</div>
<div class="puzzle-pieces" id="puzzlePieces">
<div class="puzzle-piece" draggable="true" data-id="1">1</div>
<div class="puzzle-piece" draggable="true" data-id="2">2</div>
<div class="puzzle-piece" draggable="true" data-id="3">3</div>
<div class="puzzle-piece" draggable="true" data-id="4">4</div>
<div class="puzzle-piece" draggable="true" data-id="5">5</div>
</div>
</div>
<script>
const puzzlePieces = document.querySelectorAll('.puzzle-piece');
const puzzleSlots = document.querySelectorAll('.puzzle-slot');
puzzlePieces.forEach(piece => {
piece.addEventListener('dragstart', dragStart);
});
puzzleSlots.forEach(slot => {
slot.addEventListener('dragover', dragOver);
slot.addEventListener('drop', drop);
});
function dragStart(event) {
event.dataTransfer.setData('text', event.target.dataset.id);
}
function dragOver(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
const pieceId = event.dataTransfer.getData('text');
const slotId = event.target.dataset.id;
const piece = document.querySelector(`.puzzle-piece[data-id='${pieceId}']`);
if (pieceId === slotId) {
event.target.appendChild(piece);
piece.classList.add('correct');
piece.setAttribute('draggable', 'false');
} else {
piece.classList.add('incorrect');
setTimeout(() => piece.classList.remove('incorrect'), 1000);
}
checkCompletion();
}
function checkCompletion() {
const allCorrect = Array.from(puzzleSlots).every(slot => {
const piece = slot.querySelector('.puzzle-piece');
return piece && piece.dataset.id === slot.dataset.id;
});
if (allCorrect) {
alert('Congratulations! You completed the puzzle!');
}
}
</script>
</body>
</html>