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!