Permainan Batu, Kertas, Gunting

Dalam projek ini, anda akan mencipta permainan Rock, Paper, Gunting mudah menggunakan HTML dan CSS . Projek ini sesuai untuk pemula untuk berlatih menstruktur halaman web asas, menggayakannya dengan CSS dan memahami interaksi mudah tanpa JavaScript.

---

? Gambaran Keseluruhan Projek

Ciri

• Tiga Pilihan: Batu ?, Kertas ?, dan Gunting ✂️.
• Antara Muka Mesra Pengguna: Butang interaktif untuk memilih langkah.
• Penggayaan Asas: Reka bentuk bersih dengan kesan tuding untuk butang.
• Paparan Hasil: Teks ringkas untuk menunjukkan langkah yang dipilih (tiada logik JavaScript).

---

? Struktur Fail

rock-paper_scissors/
│-- index.html    ← The HTML structure
└-- styles.css    ← The CSS styling

---

? Konsep Utama untuk Pembelajaran

1. Elemen HTML:

   • Butang: Digunakan untuk memilih Batu, Kertas atau Gunting.
   • Div dan Tajuk: Susun reka letak supaya mudah dibaca.

2. Penggayaan CSS:

   • Penggayaan Butang: Cipta butang interaktif dengan kesan tuding.
   • Reka Letak: Gunakan Flexbox dan penjajaran teks untuk reka letak berpusat.
   • Bayang Kotak: Tambahkan kedalaman pada bekas untuk penampilan moden.

3. Reka Bentuk Responsif:

   • Bekas permainan melaraskan kepada saiz skrin yang berbeza dengan lebar maksimum.

---

?️ Cara Menjalankan Projek

1. Buat Fail:

   • Buat index.html dan styles.css dalam folder yang sama.
   • Salin kod ke dalam fail masing-masing.

2. Buka index.html dalam Penyemak Imbas Anda:
   

   open index.html

1. Main Permainan:
   • Klik pada "Rock ?", "Kertas ?" atau "Gunting ✂️".
   • Teks di bawah akan memaparkan langkah pilihan anda.

---

? Penambahan untuk Dicuba

• Logik JavaScript: Tambahkan JavaScript untuk membandingkan pilihan pengguna dengan pilihan yang dijana komputer dan memaparkan pemenang.
• Pembilang Skor: Jejaki bilangan kemenangan, kalah dan seri.
• Animasi: Tambahkan animasi CSS apabila butang diklik.
• Mod Gelap: Cipta suis togol untuk tema mod gelap.

---

Lihat projek di GitHub

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