Batu, Kertas, Gunting (dengan JavaScript)

Projek ini sesuai untuk pelajar pertengahan kerana ia menggabungkan HTML, CSS dan JavaScript untuk mencipta permainan yang lengkap dan berfungsi.

---

? Struktur Fail

rock-paper-scissors/
│-- index.html    ← HTML structure
│-- styles.css    ← CSS styling
└-- script.js     ← JavaScript functionality

?️ Cara Menjalankan Projek

1. Buat Fail:

   • Buat folder yang dipanggil rock-paper-gunting.
   • Di dalam folder ini, buat tiga fail: index.html, styles.css dan script.js.

2. Salin Kod:

   • Tampal kod HTML, CSS dan JavaScript ke dalam fail masing-masing.

3. Buka Fail HTML:

   • Buka index.html dalam penyemak imbas anda untuk bermain permainan.

---

? Cara Permainan Berfungsi

1. Pilih Pilihan:

   • Klik pada salah satu butang: Rock ?, Kertas ? atau Gunting ✂️.

2. Pilihan Komputer:

   • Komputer secara rawak memilih Rock, Kertas atau Gunting.

3. Paparkan Keputusan:

   • Permainan menunjukkan pilihan anda, pilihan komputer dan siapa yang menang.

4. Main Lagi:

   • Klik butang "Main Lagi" untuk menetapkan semula permainan.

---

? Konsep Utama untuk Pembelajaran

Konsep JavaScript

1. Pendengar Acara:

   • Penggunaan addEventListener untuk mengendalikan klik butang.

2. Penjanaan Nombor Rawak:

   • Math.random() untuk menjana pilihan rawak untuk komputer.

3. Syarat:

   • kenyataan if-else untuk menentukan pemenang.

4. Manipulasi DOM:

   • Mengemas kini kandungan HTML secara dinamik menggunakan textContent.

---

Lihat di GitHub

Atas ialah kandungan terperinci Batu, Kertas, Gunting (dengan JavaScript). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!