Game Scrabble bisa kamu buat mandiri, cukup dengan HTML dan Javascript.
<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;
}
.board {
display: grid;
grid-template-columns: repeat(5, 60px);
grid-gap: 5px;
justify-content: center;
margin: 20px auto;
}
.tile {
width: 60px;
height: 60px;
background-color: white;
border: 2px solid #2980b9;
font-size: 1.5em;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.tile.placed {
background-color: #2ecc71;
border-color: #27ae60;
}
.letter-bank {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.letter {
width: 50px;
height: 50px;
background-color: #e67e22;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
cursor: grab;
border-radius: 5px;
}
.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>
<audio id="wrongSound" src="wrong.mp3"></audio>
<div class="game-container">
<h1>Scrabble Junior</h1>
<p>Tempatkan huruf di papan untuk membentuk kata yang benar!</p>
<div class="board" id="board"></div>
<div class="letter-bank" id="letterBank"></div>
<p id="message" class="message"></p>
</div>
<script>
const words = ["KATA", "BUKU", "MEJA", "PENA", "BOLA"];
let currentWordIndex = 0;
let board = document.getElementById("board");
let letterBank = document.getElementById("letterBank");
function loadNewWord() {
if (currentWordIndex >= words.length) {
document.getElementById("message").innerText = "🎉 Selamat! Anda telah menyelesaikan semua kata!";
return;
}
selectedWord = words[currentWordIndex];
createBoard();
createLetterBank();
document.getElementById("message").innerText = "";
}
function createBoard() {
board.innerHTML = "";
for (let i = 0; i < selectedWord.length; i++) {
let tile = document.createElement("div");
tile.classList.add("tile");
tile.dataset.index = i;
tile.ondrop = drop;
tile.ondragover = allowDrop;
board.appendChild(tile);
}
}
function createLetterBank() {
letterBank.innerHTML = "";
let shuffledLetters = selectedWord.split("").sort(() => Math.random() - 0.5);
shuffledLetters.forEach(letter => {
let letterDiv = document.createElement("div");
letterDiv.classList.add("letter");
letterDiv.innerText = letter;
letterDiv.draggable = true;
letterDiv.ondragstart = drag;
letterBank.appendChild(letterDiv);
});
}
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("text", event.target.innerText);
}
function drop(event) {
event.preventDefault();
let letter = event.dataTransfer.getData("text");
event.target.innerText = letter;
event.target.classList.add("placed");
checkWin();
}
function checkWin() {
let placedWord = Array.from(board.children).map(tile => tile.innerText).join("");
if (placedWord === selectedWord) {
document.getElementById("message").innerText = "🎉 Selamat! Kata yang benar!";
document.getElementById("correctSound").play();
setTimeout(() => {
currentWordIndex++;
loadNewWord();
}, 2000);
} else if (placedWord.length === selectedWord.length) {
document.getElementById("message").innerText = "❌ Salah! Coba lagi.";
document.getElementById("wrongSound").play();
}
}
loadNewWord();
</script>
</body>
</div>
</div>
</div>
</div>
Note : jika menyertakan media seperti sound, gambar dan lainnya kamu wajib menyimpannya dalam 1 folder dan panggil sesuai dengan nama file.
Selamat Mencoba
0 komentar: