PERMAINAN BAHASA - APLIKASI
PROMPT MUDAH
Saya guru Prasekolah yang mengajar murid berusia 5 tahun dan 6 tahun. Bantu saya untuk menghasilkan permainan bahasa 'object catcher'. Objek jatuh dari atas, murid perlu catch objek tersebut berdasarkan pop up perkataan yang keluar. Skor terkumpul disediakan. Senarai objek terdiri daripada kata nama am iaitu meja, buku, pensil, basikal, kereta, bas, beg sekolah, air, dan kasut sekolah. Objek-objek bukan daripada senarai kata nama tadi adalah pengganggu yang akan jatuh dari atas. Murid perlu catch objek yang betul. Aplikasi perlu berwarna warni dalam format 2D game.
ROLE (PERANAN):
Saya guru Prasekolah yang mengajar murid berusia 5 tahun dan 6 tahun.
TASK (TUGASAN):
Bantu saya untuk menghasilkan permainan bahasa 'object catcher'.
FORMAT (FORMAT):
Objek jatuh dari atas, murid perlu catch objek tersebut berdasarkan pop up perkataan yang keluar. Skor terkumpul disediakan. Senarai objek terdiri daripada kata nama am iaitu meja, buku, pensil, basikal, kereta, bas, beg sekolah, air, dan kasut sekolah. Objek-objek bukan daripada senarai kata nama tadi adalah pengganggu yang akan jatuh dari atas. Murid perlu catch objek yang betul. Aplikasi perlu berwarna warni dalam format 2D game. Hasilkan kod yang sesuai dan tepat serta boleh diembed dan dimainkan dalam Google Site.
PROMPT KOMPLEKS
Saya seorang guru prasekolah yang mengajar murid prasekolah berusia 5 tahun dan 6 tahun. Saya ingin menghasilkan sebuah permainan bahasa interaktif bertajuk “SIAPA SAYA?” seperti paparan gambar yang dilampirkan.
PAPARAN UTAMA:
BUTANG: MULA PERMAINAN
Peserta akan klik butang MULA PERMAINAN untuk memulakan permainan.
Kiraan masa permainan bermula sebaik sahaja peserta klik butang MULAKAN PERMAINAN.
PAPARAN PERMAINAN:
GAMBAR:
Kotak berwarna dengan kod warna: #000099.
Saiz kotak perlu sesuai dengan paparan kandungan permainan.
Sediakan BUTANG berwarna dengan label LIHAT GAMBAR SEBELUMNYA di sebelah kiri bahagian bawah kotak GAMBAR. Butang LIHAT GAMBAR SEBELUMNYA tidak muncul semasa paparan gambar pertama. Butang LIHAT GAMBAR SEBELUMNYA hanya akan mucul pada paparan gambar kedua hingga gambar terakhir.
Sediakan BUTANG berwarna dengan label LIHAT GAMBAR SETERUSNYA. Gambar akan dipaparkan bila peserta klik butang LIHAT GAMBAR SETERUSNYA. Butang LIHAT GAMBAR SETERUSNYA berada di sebelah kanan bahagian bawah kotak GAMBAR.
Senarai gambar adalah seperti berikut:
Terdapat 6 gambar berasingan. Sediakan gambar emoji bagi senarai perkataan berikut:
GAMBAR 1: BUKU
GAMBAR 2: KERUSI
GAMBAR 3: LAMPU
GAMBAR 4: KERETA
GAMBAR 5: JAM
GAMBAR 6: BEG
EJA PERKATAAN merupakan kotak kosong. Pada kotak kosong itu akan terpapar kotak-kotak huruf mengikut jumlah huruf bagi ejaan objek gambar yang terpapar. Murid mengeja perkataan dengan dengan klik huruf, seret dan letakkan pada ruang kotak-kotak huruf EJA PERKATAAN. Jumlah kotak-kotak huruf itu bergantung pada jumlah huruf bagi ejaan objek gambar yang terpapar. Ejaan dikira betul jika gambar yang menjadi rujukan adalah betul. Kod warna Kotak 3: #FFFFFF
PILIH HURUF DAN SUSUN DI RUANG EJA PERKATAAN merupakan ruang papan kekunci (keyboard) huruf “A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z”. Susunan huruf-huruf pada papan kekunci (keyboard) dalam 3 baris (10,10,6). Murid perlu pilih huruf yang betul, klik huruf, hold huruf, seret huruf dan masukkan
huruf (drag and drop) ke dalam kotak EJA PERKATAAN. Klik, seret huruf dan masukkan huruf (drag dan drop) ke dalam kotak tidak akan menghilangkan huruf pada papan kekunci (keyboard). Huruf-huruf pada papan kekunci (keyboard) itu masih kekal setiap kali peserta pilih huruf yang betul, klik huruf, hold huruf, seret huruf dan masukkan huruf (drag and drop) ke dalam kotak EJA PERKATAAN. Kod warna Kotak 4: #D9F2D0
BUTANG: Sediakan butang berwarna yang sesuai dengan warna LATAR bagi item berikut:
1. MARKAH memaparkan jumlah markah terkumpul. Kod warna kotak: #FFD9D9
2. KIRAAN MASA. Kod warna kotak: #D9F2D0
3. SEMAKAN JAWAPAN bagi ejaan sama ada betul atau salah berdasarkan objek yang dipaparkan.
Kod warna kotak: #CAEDFB.
4. GANJARAN: Jika jawapan betul dipaparkan “Tahniah! Jawapan anda betul.” Kod warna kotak jika jawapan betul: #CCFF66, jika jawapan salah dipaparkan “Jawapan salah. Sila cuba lagi.” Kod warna kotak jika jawapan salah: #F2CEED
5. CUBA LAGI: untuk memberi peluang murid mencuba semula. Kod warna kotak: #F2CEED
6. TAMAT PERMAINAN. Kod warna kotak: #FF6565
PAPARAN PERMAINAN TAMAT:
Bila peserta menekan butang TAMAT PERMAINAN di bahagian kawalan, skrin PERMAINAN TAMAT! akan muncul. Skrin PERMAINAN TAMAT! akan memaparkan markah akhir dan masa yang digunakan apabila peserta menekan butang tersebut. Terdapat juga butang MAIN SEMULA pada skrin tamat.
Hasilkan kod yang sesuai dan tepat serta boleh diembed dan dimainkan dalam Google Site.
ROLE (PERANAN):
Saya seorang guru prasekolah yang mengajar murid prasekolah berusia 5 tahun dan 6 tahun.
TASK (TUGASAN):
Saya ingin menghasilkan sebuah permainan bahasa interaktif bertajuk “SIAPA SAYA?” seperti paparan gambar yang dilampirkan.
1) 3 Paparan Permainan:
a. Paparan Utama
b. Paparan Permainan
c. Paparan Permainan Tamat
2) Butang Permainan:
a. Mulakan Permainan.
b. Lihat Gambar Sebelumnya
c. Lihat Gambar Seterusnya
d. Mulakan Permainan
e. Markah. Kod warna kotak: #FFD9D9
f. Kiraan Masa. Kod warna kotak: #D9F2D0
g. Semakan Jawapan. Kod warna kotak: #CAEDFB
h. Ganjaran. Kod warna kotak jika jawapan betul: #CCFF66. Kod warna kotak jika jawapan salah: #F2CEED
i. Cuba Lagi. Kod warna kotak: #F2CEED
j. Tamat Permainan. Kod warna kotak: #FF6565
k. Main Semula
3) Gambar: Format gambar emoji
a. Buku
b. Kerusi
c. Lampu
d. Kereta
e. Jam
f. Beg
4) Kotak:
a. Kotak Gambar. Kotak berwarna dengan kod warna: #000099
b. Kotak Eja Perkataan. Kod warna Kotak 3: #FFFFFF
c. Kotak Pilih Huruf dan Susun Di Ruang Eja Perkataan (papan kekunci).Kod warna Kotak 4: #D9F2D0
5) Format coding:
Kod yang sesuai dan tepat serta boleh diembed dan dimainkan dalam Google Site.
FORMAT (FORMAT KOMPLEKS):
PAPARAN UTAMA:
BUTANG: MULA PERMAINAN
Peserta akan klik butang MULA PERMAINAN untuk memulakan permainan.
Kiraan masa permainan bermula sebaik sahaja peserta klik butang MULAKAN PERMAINAN.
PAPARAN PERMAINAN:
GAMBAR:
Kotak berwarna dengan kod warna: #000099.
Saiz kotak perlu sesuai dengan paparan kandungan permainan.
Sediakan BUTANG berwarna dengan label LIHAT GAMBAR SEBELUMNYA di sebelah kiri bahagian bawah kotak GAMBAR. Butang LIHAT GAMBAR SEBELUMNYA tidak muncul semasa paparan gambar pertama. Butang LIHAT GAMBAR SEBELUMNYA hanya akan mucul pada paparan gambar kedua hingga gambar terakhir.
Sediakan BUTANG berwarna dengan label LIHAT GAMBAR SETERUSNYA. Gambar akan dipaparkan bila peserta klik butang LIHAT GAMBAR SETERUSNYA. Butang LIHAT GAMBAR SETERUSNYA berada di sebelah kanan bahagian bawah kotak GAMBAR.
Senarai gambar adalah seperti berikut:
Terdapat 6 gambar berasingan. Sediakan gambar emoji bagi senarai perkataan berikut:
GAMBAR 1: BUKU
GAMBAR 2: KERUSI
GAMBAR 3: LAMPU
GAMBAR 4: KERETA
GAMBAR 5: JAM
GAMBAR 6: BEG
EJA PERKATAAN merupakan kotak kosong. Pada kotak kosong itu akan terpapar kotak-kotak huruf mengikut jumlah huruf bagi ejaan objek gambar yang terpapar. Murid mengeja perkataan dengan dengan klik huruf, seret dan letakkan pada ruang kotak-kotak huruf EJA PERKATAAN. Jumlah kotak-kotak huruf itu bergantung pada jumlah huruf bagi ejaan objek gambar yang terpapar. Ejaan dikira betul jika gambar yang menjadi rujukan adalah betul. Kod warna Kotak 3: #FFFFFF
PILIH HURUF DAN SUSUN DI RUANG EJA PERKATAAN merupakan ruang papan kekunci (keyboard) huruf “A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z”. Susunan huruf-huruf pada papan kekunci (keyboard) dalam 3 baris (10,10,6). Murid perlu pilih huruf yang betul, klik huruf, hold huruf, seret huruf dan masukkan
huruf (drag and drop) ke dalam kotak EJA PERKATAAN. Klik, seret huruf dan masukkan huruf (drag dan drop) ke dalam kotak tidak akan menghilangkan huruf pada papan kekunci (keyboard). Huruf-huruf pada papan kekunci (keyboard) itu masih kekal setiap kali peserta pilih huruf yang betul, klik huruf, hold huruf, seret huruf dan masukkan huruf (drag and drop) ke dalam kotak EJA PERKATAAN. Kod warna Kotak 4: #D9F2D0
BUTANG: Sediakan butang berwarna yang sesuai dengan warna LATAR bagi item berikut:
1. MARKAH memaparkan jumlah markah terkumpul. Kod warna kotak: #FFD9D9
2. KIRAAN MASA. Kod warna kotak: #D9F2D0
3. SEMAKAN JAWAPAN bagi ejaan sama ada betul atau salah berdasarkan objek yang dipaparkan.
Kod warna kotak: #CAEDFB.
4. GANJARAN: Jika jawapan betul dipaparkan “Tahniah! Jawapan anda betul.” Kod warna kotak jika jawapan betul: #CCFF66, jika jawapan salah dipaparkan “Jawapan salah. Sila cuba lagi.” Kod warna kotak jika jawapan salah: #F2CEED
5. CUBA LAGI: untuk memberi peluang murid mencuba semula. Kod warna kotak: #F2CEED
6. TAMAT PERMAINAN. Kod warna kotak: #FF6565
PAPARAN PERMAINAN TAMAT:
Bila peserta menekan butang TAMAT PERMAINAN di bahagian kawalan, skrin PERMAINAN TAMAT! akan muncul. Skrin PERMAINAN TAMAT! akan memaparkan markah akhir dan masa yang digunakan apabila peserta menekan butang tersebut. Terdapat juga butang MAIN SEMULA pada skrin tamat.
Hasilkan kod yang sesuai dan tepat serta boleh diembed dan dimainkan dalam Google Site.
<!DOCTYPE html>
<html lang="ms">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SIAPA SAYA? | Permainan Ejaan Bahasa</title>
<!-- Muat Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<style>
/* Konfigurasi Custom Tailwind Colors */
.bg-color-markah { background-color: #FFD9D9; }
.bg-color-masa, .bg-color-keyboard { background-color: #D9F2D0; }
.bg-color-semak { background-color: #CAEDFB; }
.bg-color-betul { background-color: #CCFF66; }
.bg-color-salah, .bg-color-cuba { background-color: #F2CEED; }
.bg-color-tamat { background-color: #FF6565; }
.bg-color-gambar { background-color: #000099; }
body { font-family: 'Inter', sans-serif; background-color: #f0f4f8; }
/* Gaya Seret dan Lepas */
.letter-box {
width: 40px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 1.5rem;
border: 2px solid #374151;
cursor: pointer;
user-select: none;
transition: background-color 0.2s;
}
.drop-target {
min-width: 50px;
height: 60px;
border: 2px dashed #000099;
text-align: center;
font-size: 2rem;
font-weight: bold;
color: #000099;
transition: border-color 0.2s, background-color 0.2s;
}
.drop-target.filled {
border: 2px solid #10B981;
background-color: #EFF6FF;
}
.drop-target:hover {
border-color: #10B981;
}
/* Untuk mengelakkan masalah seret pada peranti sentuh */
.keyboard-letter {
touch-action: none;
}
</style>
</head>
<body class="flex items-center justify-center min-h-screen p-4">
<!-- START SCREEN -->
<div id="start-screen" class="w-full max-w-lg text-center bg-white p-8 rounded-xl shadow-2xl transition-all duration-500">
<h1 class="text-4xl font-extrabold text-blue-800 mb-6">PERMAINAN SIAPA SAYA?</h1>
<p class="text-lg text-gray-600 mb-10">Uji pengetahuan ejaan anda dengan menyeret huruf ke kotak yang betul.</p>
<button id="start-game-btn" class="px-10 py-4 text-xl font-bold text-white bg-green-500 rounded-full shadow-lg hover:bg-green-600 transform hover:scale-105 transition duration-300">
MULA PERMAINAN
</button>
</div>
<!-- GAME SCREEN -->
<div id="game-screen" class="hidden w-full max-w-4xl bg-white p-6 rounded-xl shadow-2xl transition-all duration-500">
<h1 class="text-3xl font-bold text-center text-gray-800 mb-4">SIAPA SAYA?</h1>
<!-- PAPARAN GAMBAR -->
<div class="mb-6 rounded-xl overflow-hidden shadow-inner">
<div class="bg-color-gambar p-4 text-white font-bold text-xl text-center">GAMBAR</div>
<div id="image-display" class="relative flex items-center justify-center h-64 md:h-80 bg-gray-100 p-4">
<p id="current-emoji" class="text-9xl">❓</p>
<!-- Kawalan Navigasi Gambar -->
<div class="absolute inset-x-0 bottom-0 flex justify-between bg-sky-200/90 p-3">
<button id="prev-image-btn" class="hidden px-4 py-2 text-blue-900 font-semibold rounded-full hover:bg-sky-300 transition duration-150 transform hover:scale-105">
< LIHAT GAMBAR SEBELUMNYA
</button>
<button id="next-image-btn" class="px-4 py-2 text-blue-900 font-semibold rounded-full hover:bg-sky-300 transition duration-150 transform hover:scale-105 ml-auto">
LIHAT GAMBAR SETERUSNYA >
</button>
</div>
</div>
</div>
<!-- EJA PERKATAAN -->
<div class="mb-6 p-4 rounded-xl border border-gray-300 bg-white shadow-md">
<p class="text-lg font-bold text-gray-700 mb-3">EJA PERKATAAN:</p>
<div id="word-spelling-area" class="flex justify-center gap-2 flex-wrap min-h-[60px]">
<!-- Kotak huruf akan dijana di sini -->
</div>
</div>
<!-- GANJARAN, MARKAH, MASA -->
<div class="grid grid-cols-3 gap-4 mb-6">
<div id="reward-box" class="bg-color-salah p-3 rounded-lg shadow-md min-h-[80px] flex items-center justify-center text-center text-gray-800 font-medium text-sm md:text-base">
Sila lengkapkan ejaan di atas.
</div>
<div class="bg-color-markah p-3 rounded-lg shadow-md flex flex-col items-center justify-center text-center">
<p class="text-xs text-gray-600">MARKAH</p>
<p id="score-display" class="text-3xl font-extrabold text-red-700">0</p>
</div>
<div class="bg-color-masa p-3 rounded-lg shadow-md flex flex-col items-center justify-center text-center">
<p class="text-xs text-gray-600">KIRAAN MASA</p>
<p id="timer-display" class="text-3xl font-extrabold text-green-700">00:00</p>
</div>
</div>
<!-- BUTANG KAWALAN -->
<div class="flex justify-center gap-3 mb-6">
<button id="check-answer-btn" class="px-4 py-2 bg-color-semak text-blue-800 font-bold rounded-lg shadow-md hover:bg-blue-300 transform hover:scale-105 transition duration-150">
<span class="mr-1">✔</span> SEMAK JAWAPAN
</button>
<button id="try-again-btn" class="px-4 py-2 bg-color-salah text-gray-800 font-bold rounded-lg shadow-md hover:bg-red-200 transform hover:scale-105 transition duration-150">
<span class="mr-1">↻</span> CUBA LAGI
</button>
<button id="end-game-btn" class="px-4 py-2 bg-color-tamat text-white font-bold rounded-lg shadow-md hover:bg-red-600 transform hover:scale-105 transition duration-150">
<span class="mr-1">◼</span> TAMAT PERMAINAN
</button>
</div>
<!-- PAPAN KEKUNCI HURUF -->
<div class="bg-color-keyboard p-4 rounded-xl shadow-inner border border-gray-300">
<p class="text-lg font-bold text-gray-700 mb-3 text-center">PILIH HURUF DAN SUSUN DI RUANG EJA PERKATAAN</p>
<div id="keyboard" class="flex flex-wrap justify-center gap-2">
<!-- Huruf keyboard akan dijana di sini -->
</div>
</div>
</div>
<!-- GAME OVER SCREEN -->
<div id="end-screen" class="hidden w-full max-w-lg text-center bg-white p-8 rounded-xl shadow-2xl transition-all duration-500">
<h2 class="text-5xl font-extrabold text-red-600 mb-4">PERMAINAN TAMAT!</h2>
<p class="text-2xl text-gray-700 mb-8">Keputusan Akhir Anda:</p>
<div class="space-y-4 mb-10">
<div class="p-4 bg-color-markah rounded-lg shadow-md">
<p class="text-lg text-gray-600">Markah Terkumpul:</p>
<p id="final-score-display" class="text-4xl font-extrabold text-red-800">0</p>
</div>
<div class="p-4 bg-color-masa rounded-lg shadow-md">
<p class="text-lg text-gray-600">Masa Digunakan:</p>
<p id="final-time-display" class="text-4xl font-extrabold text-green-800">00:00</p>
</div>
</div>
<button id="restart-game-btn" class="px-10 py-4 text-xl font-bold text-white bg-blue-500 rounded-full shadow-lg hover:bg-blue-600 transform hover:scale-105 transition duration-300">
MAIN SEMULA
</button>
</div>
<script>
// Data Permainan
const WORDS = [
{ word: "BUKU", emoji: "📚" },
{ word: "KERUSI", emoji: "🪑" },
{ word: "LAMPU", emoji: "💡" },
{ word: "KERETA", emoji: "🚗" },
{ word: "JAM", emoji: "⌚" },
{ word: "BEG", emoji: "👜" },
];
const ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
// Pemalar DOM
const startScreen = document.getElementById('start-screen');
const gameScreen = document.getElementById('game-screen');
const endScreen = document.getElementById('end-screen');
const startGameBtn = document.getElementById('start-game-btn');
const restartGameBtn = document.getElementById('restart-game-btn');
const endGameBtn = document.getElementById('end-game-btn');
const prevImageBtn = document.getElementById('prev-image-btn');
const nextImageBtn = document.getElementById('next-image-btn');
const checkAnswerBtn = document.getElementById('check-answer-btn');
const tryAgainBtn = document.getElementById('try-again-btn');
const currentEmojiDisplay = document.getElementById('current-emoji');
const spellingArea = document.getElementById('word-spelling-area');
const keyboardArea = document.getElementById('keyboard');
const scoreDisplay = document.getElementById('score-display');
const timerDisplay = document.getElementById('timer-display');
const rewardBox = document.getElementById('reward-box');
const finalScoreDisplay = document.getElementById('final-score-display');
const finalTimeDisplay = document.getElementById('final-time-display');
// State Permainan
let currentWordIndex = 0;
let score = 0;
let gameTimer;
let timeElapsed = 0;
let currentSpelling = []; // Array of drop targets
/**
* Fungsi Utiliti
*/
// Fungsi untuk format masa dari saat ke MM:SS
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
}
// Fungsi pemasa
function startTimer() {
if (gameTimer) clearInterval(gameTimer);
gameTimer = setInterval(() => {
timeElapsed++;
timerDisplay.textContent = formatTime(timeElapsed);
}, 1000);
}
function stopTimer() {
clearInterval(gameTimer);
}
// Tukar warna kotak ganjaran
function setReward(message, isCorrect) {
rewardBox.textContent = message;
rewardBox.className = 'p-3 rounded-lg shadow-md min-h-[80px] flex items-center justify-center text-center text-gray-800 font-medium text-sm md:text-base';
rewardBox.classList.add(isCorrect ? 'bg-color-betul' : 'bg-color-salah');
}
/**
* Logik Seret dan Lepas (Drag and Drop)
*/
// Handler apabila seret bermula dari papan kekunci
function handleDragStart(e) {
// Tetapkan data yang diseret (huruf)
e.dataTransfer.setData('text/plain', e.target.textContent);
e.dataTransfer.effectAllowed = 'copy'; // Menunjukkan huruf akan disalin
}
// Handler apabila item diseret di atas kotak sasaran
function handleDragOver(e) {
e.preventDefault(); // Membenarkan melepaskan item
e.dataTransfer.dropEffect = 'copy';
}
// Handler apabila item dilepaskan ke kotak sasaran
function handleDrop(e) {
e.preventDefault();
const letter = e.dataTransfer.getData('text/plain');
const target = e.target.closest('.drop-target'); // Pastikan target adalah kotak drop
if (target && !target.textContent) {
target.textContent = letter;
target.classList.add('filled');
}
}
// Handler apabila huruf dalam kotak diklik (untuk memadam)
function handleBoxClick(e) {
const box = e.target.closest('.drop-target');
if (box && box.textContent) {
box.textContent = '';
box.classList.remove('filled');
setReward('Sila lengkapkan ejaan di atas.', false); // Reset feedback
}
}
/**
* Logik Permainan Utama
*/
// Jana kotak ejaan kosong
function generateSpellingBoxes(word) {
spellingArea.innerHTML = '';
currentSpelling = [];
for (let i = 0; i < word.length; i++) {
const box = document.createElement('div');
box.className = 'drop-target bg-white rounded-md flex items-center justify-center shadow-inner';
box.dataset.index = i; // Untuk rujukan
// Tambah event listeners untuk seret dan lepas
box.addEventListener('dragover', handleDragOver);
box.addEventListener('drop', handleDrop);
box.addEventListener('click', handleBoxClick);
spellingArea.appendChild(box);
currentSpelling.push(box);
}
}
// Jana papan kekunci huruf
function generateKeyboard() {
keyboardArea.innerHTML = '';
for (const char of ALPHABET) {
const button = document.createElement('button');
button.className = 'letter-box bg-white text-gray-800 font-bold rounded-md shadow-sm hover:bg-gray-200 keyboard-letter';
button.textContent = char;
button.setAttribute('draggable', 'true');
button.addEventListener('dragstart', handleDragStart);
keyboardArea.appendChild(button);
}
}
// Kemaskini paparan gambar dan kotak ejaan
function updateGameDisplay() {
const currentItem = WORDS[currentWordIndex];
currentEmojiDisplay.textContent = currentItem.emoji;
generateSpellingBoxes(currentItem.word);
scoreDisplay.textContent = score;
// Kawalan butang LIHAT GAMBAR SEBELUMNYA
if (currentWordIndex > 0) {
prevImageBtn.classList.remove('hidden');
} else {
prevImageBtn.classList.add('hidden');
}
// Kawalan butang LIHAT GAMBAR SETERUSNYA
if (currentWordIndex < WORDS.length - 1) {
nextImageBtn.textContent = 'LIHAT GAMBAR SETERUSNYA >';
nextImageBtn.disabled = false;
} else {
nextImageBtn.textContent = 'SELESAIKAN SEMUA';
nextImageBtn.disabled = true; // Tidak boleh teruskan
}
// Set semula ganjaran
setReward('Sila lengkapkan ejaan di atas.', false);
// Dayakan butang semak
checkAnswerBtn.disabled = false;
}
// Fungsi untuk membersihkan kotak ejaan
function tryAgain() {
currentSpelling.forEach(box => {
box.textContent = '';
box.classList.remove('filled');
});
setReward('Sila cuba lagi.', false);
checkAnswerBtn.disabled = false;
}
// Fungsi Semak Jawapan
function checkAnswer() {
const currentWord = WORDS[currentWordIndex].word;
let spelledWord = currentSpelling.map(box => box.textContent).join('');
if (spelledWord.length !== currentWord.length) {
setReward('Sila lengkapkan semua kotak huruf.', false);
return;
}
if (spelledWord === currentWord) {
score += 10;
scoreDisplay.textContent = score;
setReward('Tahniah! Jawapan anda betul.', true);
// Kunci jawapan betul
currentSpelling.forEach(box => {
box.classList.add('bg-color-betul', 'cursor-not-allowed');
box.removeEventListener('click', handleBoxClick);
});
// Lumpuhkan butang Semak dan Cuba Lagi selepas jawapan betul
checkAnswerBtn.disabled = true;
tryAgainBtn.disabled = true;
// Dayakan butang seterusnya jika belum tamat
if (currentWordIndex < WORDS.length - 1) {
nextImageBtn.disabled = false;
}
} else {
setReward('Jawapan salah. Sila cuba lagi.', false);
}
}
// Pindah ke gambar seterusnya
function nextImage() {
if (currentWordIndex < WORDS.length - 1) {
currentWordIndex++;
updateGameDisplay();
tryAgainBtn.disabled = false; // Reset butang
} else {
// Ini adalah gambar terakhir, butang ini sepatutnya lumpuh atau tidak digunakan.
}
}
// Pindah ke gambar sebelumnya
function prevImage() {
if (currentWordIndex > 0) {
currentWordIndex--;
updateGameDisplay();
tryAgainBtn.disabled = false; // Reset butang
}
}
// Tamat Permainan
function endGame() {
stopTimer();
gameScreen.classList.add('hidden');
endScreen.classList.remove('hidden');
finalScoreDisplay.textContent = score;
finalTimeDisplay.textContent = formatTime(timeElapsed);
}
// Mulakan Permainan
function initializeGame() {
currentWordIndex = 0;
score = 0;
timeElapsed = 0;
timerDisplay.textContent = formatTime(timeElapsed);
scoreDisplay.textContent = score;
startScreen.classList.add('hidden');
endScreen.classList.add('hidden');
gameScreen.classList.remove('hidden');
generateKeyboard();
updateGameDisplay();
startTimer();
// Set semula kawalan butang
tryAgainBtn.disabled = false;
checkAnswerBtn.disabled = false;
}
// Event Listeners
startGameBtn.addEventListener('click', initializeGame);
restartGameBtn.addEventListener('click', initializeGame);
endGameBtn.addEventListener('click', endGame);
prevImageBtn.addEventListener('click', prevImage);
nextImageBtn.addEventListener('click', nextImage);
checkAnswerBtn.addEventListener('click', checkAnswer);
tryAgainBtn.addEventListener('click', tryAgain);
// Tambah event listener untuk sentuhan pada peranti mudah alih (untuk simulasi drag)
// Logik seret dan lepas menggunakan 'drag' events mungkin tidak berfungsi secara konsisten pada semua peranti sentuh.
// Untuk penyelesaian yang ringkas dalam satu fail, kita akan bergantung pada 'drag' events standard,
// tetapi menambah arahan visual untuk membantu pengguna.
// Inisialisasi awal (jika perlu)
window.onload = () => {
// Pastikan paparan awal adalah skrin mula
startScreen.classList.remove('hidden');
gameScreen.classList.add('hidden');
endScreen.classList.add('hidden');
};
</script>
</body>
</html>
TERIMA KASIH