Game Puzzle sedrhana untuk pembelajaran di kelas lebih menarik.
Tulis kode berikut dan simpan dengan nama puzzle.html
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="card">
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
}
.game-container {
margin-top: 50px;
}
.puzzle {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 5px;
justify-content: center;
margin: 20px auto;
}
.tile {
width: 100px;
height: 100px;
background-color: white;
border: 2px solid #2980b9;
font-size: 2em;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.empty {
background-color: #f4f4f4;
border: none;
}
.message {
font-size: 1.5em;
font-weight: bold;
color: #e74c3c;
}
</style>
</head>
<body>
<audio id="bgMusic" loop autoplay>
<source src="background.mp3" type="audio/mpeg">
</audio>
<audio id="correctSound" src="correct.mp3"></audio>
<div class="game-container">
<h1>Game Puzzle</h1>
<p>Susun angka sesuai urutan yang benar!</p>
<div class="puzzle" id="puzzle"></div>
<p id="message" class="message"></p>
</div>
<script>
let tiles = [...Array(15).keys()].map(x => x + 1).concat([""]);
let puzzle = document.getElementById("puzzle");
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
function renderPuzzle() {
puzzle.innerHTML = "";
tiles.forEach((num, index) => {
let tile = document.createElement("div");
tile.classList.add("tile");
if (num === "") {
tile.classList.add("empty");
} else {
tile.innerText = num;
tile.onclick = () => moveTile(index);
}
puzzle.appendChild(tile);
});
}
function moveTile(index) {
let emptyIndex = tiles.indexOf("");
let validMoves = [emptyIndex - 1, emptyIndex + 1, emptyIndex - 4, emptyIndex + 4];
if (validMoves.includes(index)) {
[tiles[index], tiles[emptyIndex]] = [tiles[emptyIndex], tiles[index]];
renderPuzzle();
checkWin();
}
}
function checkWin() {
if (tiles.join() === [...Array(15).keys()].map(x => x + 1).concat([""]).join()) {
document.getElementById("message").innerText = "🎉 Selamat! Anda berhasil menyelesaikan puzzle!";
document.getElementById("correctSound").play();
}
}
shuffle(tiles);
renderPuzzle();
</script>
</body>
</div>
</div>
</div>
</div>
Selamat mencoba
0 komentar: