Membuat permainan berasaskan penyemak imbas dengan vanila JS dan CSS - SitePoint

Artikel ini menunjukkan membina permainan meneka bendera berasaskan pelayar menggunakan hanya vanila JavaScript dan CSS, mempamerkan kuasa teknologi web moden tanpa perpustakaan luaran atau rangka kerja. Mari kita menyelam untuk mencipta permainan ini langkah demi langkah.

Konsep:

Permainan ini membentangkan emoji bendera dan pilihan pelbagai pilihan. Pemain memilih negara, menerima maklum balas dan maju melalui pusingan.

Langkah 1: Struktur Asas

Kami memerlukan senarai negara dan bendera mereka (menggunakan emojis). Antara muka mudah memaparkan bendera dan lima butang jawapan. CSS menggunakan susun atur grid untuk reka bentuk responsif. Struktur projek termasuk fail HTML, fail data.json yang mengandungi data negara, dan folder untuk JavaScript, fungsi penolong, CSS, dan imej.

Langkah 2: Prototaip mudah

Kami memuatkan data.json menggunakan fetch , kemudian mulakan permainan. Fungsi startGame rawak senarai negara, memilih jawapan, memilih empat lagi negara, dan mengemas kini DOM dengan butang bendera dan jawapan. Fungsi checkAnswer menilai pilihan pemain, memberikan maklum balas. Algoritma shuffle fisher-yates merebak perintah negara.

Langkah 3: Kod Modular

Untuk meningkatkan organisasi kod, kami akan menggunakan modul JavaScript. HTML mengimport step3.js , yang mengimport fungsi penolong ( loadCountries dan shuffle ) dari fail berasingan. Logik permainan dikemas dalam kelas Game , meningkatkan integriti data dan pemeliharaan.

Langkah 4: Pemarkahan dan Permainan berakhir

Pembina Game kini termasuk numTurns . DOM dikemas kini untuk memasukkan paparan skor, butang replay, dan skrin permainan. Kaedah start memulakan skor dan kaunter putar, dan kaedah nextTurn mengendalikan perkembangan bulat, mengemas kini skor dan mencetuskan keadaan permainan apabila semua giliran selesai. Kaedah gameOver memaparkan skor akhir.

Langkah 5: Animasi

Animasi CSS meningkatkan pengalaman pengguna. Keyframes membuat animasi gelongsor untuk senarai negara, muncul dan hilang dengan lancar antara giliran. Acara animationend memastikan peralihan yang lancar.

Langkah 6: Sentuhan Akhir

Skrin tajuk ditambah untuk menyediakan konteks. Sistem penarafan pemain dilaksanakan berdasarkan skor akhir. Animasi ditambah untuk meraikan jawapan yang betul.

Penambahbaikan selanjutnya:

Artikel ini mencadangkan beberapa penambahbaikan:

• Menambah kesan bunyi.
• Membolehkan bermain luar talian menggunakan pekerja web.
• Menyimpan statistik permainan dalam penyimpanan tempatan.
• Menambah keupayaan perkongsian media sosial.

Tutorial ini secara berkesan menunjukkan cara membuat permainan yang berfungsi dan menarik dengan kod minimum, menonjolkan keupayaan vanila JavaScript dan CSS. Pendekatan modular dan penggunaan animasi CSS mempamerkan amalan terbaik untuk pembangunan web moden.

Atas ialah kandungan terperinci Membuat permainan berasaskan penyemak imbas dengan vanila JS dan CSS - SitePoint. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!