Friday JS: 0-line JS dan CSS game

Mungkin banyak dari orang tua akan mengingat epidemi artikel dengan tajuk seperti "% something% dalam 30 baris JS." Dan juga postingan epik " Game in 0 lines of code on JS murni " yang mengikutinya, setelah itu epidemi tiba-tiba berkurang. Sadar sepenuhnya bahwa saya tidak akan pernah melampaui karya agung ini, namun saya memutuskan lima tahun kemudian untuk menyelesaikan lima sen saya.

Hadirin sekalian, kami menawarkan game "Tic-Tac-Toe" di nol garis JS, dan juga, tidak seperti game yang disebutkan di atas, di nol garis CSS (termasuk gaya inline). Hanya HTML kosong, hanya hardcore.


→ Tautan ke game

Itu terlihat jelek, tetapi akan bekerja di browser apa pun. Di bawah potongan, saya akan memberi tahu Anda mengapa game tanpa JS ada di bagian "Friday JS", serta detail kotor lainnya. Namun, saya tidak akan membuka Amerika untuk siapa pun, jika Anda seorang pembuat kode yang berpengalaman, Anda bahkan tidak bisa memotongnya

Sebenarnya, semuanya sangat bodoh. Gim ini terdiri dari hampir 6 ribu halaman HTML statis, yang saling terhubung. Saat Anda menyodok pada sel bidang bermain, Anda pergi ke halaman di mana pemindahan ke sel ini telah dibuat. Jelas, menulis halaman 6k dengan tangan Anda adalah kesenangan di bawah rata-rata. Oleh karena itu (kejutan!) Halaman ini dihasilkan oleh skrip JS menggunakan NodeJS.


Pertama, kami membangun pohon permainan yang disebut - totalitas dari semua status permainan yang mungkin dan transisi di antara mereka. Keadaan awal game dalam kode saya adalah sebagai berikut:

const initialState = { player: PLAYER_X, field: Array.from(Array(9)).map(() => EMPTY_CELL), moves: {} } 

Ini berisi informasi tentang giliran siapa sekarang dan bagaimana keadaan lapangan permainan. Di masa depan, itu juga akan berisi informasi tentang gerakan apa yang dapat dilakukan dan apa yang akan mereka tuju, serta beberapa hal menyenangkan lainnya.

Kemudian kita mulai, saya minta maaf untuk tautologi, dari keadaan awal dan lakukan hal berikut:

1. Kami memeriksa apakah negara adalah terminal (kemenangan salib, kemenangan token, imbang).
2. Jika demikian, tambahkan informasi tentang ini ke objek keadaan dan selesaikan.
3. Jika tidak, buka semua sel di lapangan.
4. Untuk setiap sel kosong di lapangan, buat status permainan baru tempat pemain saat ini pindah ke sel ini, dan langkah tersebut diteruskan ke pemain berikutnya.
5. Di bidang pemindahan dari kondisi saat ini, tambahkan catatan kemungkinan pemindahan. Kunci untuk entri ini adalah indeks sel, dan nilainya adalah tautan ke status baru.
6. Kami ulangi algoritme ini secara rekursif untuk semua status yang baru muncul.

Pada kenyataannya, kode saya sedikit lebih rumit, saya tidak terbiasa membuka rekursi menjadi satu lingkaran, dan alih-alih referensi ke negara lain dalam moves kunci string mereka disimpan dalam beberapa array asosiatif. Tapi ini semua detailnya.

Lalu, dari setiap objek status permainan, kami membuat halaman HTML. Berjalan melalui objek moves , kami mengisi sel-sel kosong di lapangan dengan tautan ke halaman yang sesuai dengan gerakan yang dibuat ke dalam sel-sel ini. Kemudian kita mengubah array satu dimensi dari lapangan menjadi tabel HTML dua dimensi. Kami menambahkan segala macam hal menyenangkan seperti instruksi yang dijalankan pemain, dan tautan ke beranda - dan voila!

Selain mode, ketika kedua salib dan nol ditempatkan oleh seseorang, dalam hit mega-indie saya ada juga kesempatan untuk bermain melawan otak besi. Ini dicapai sebagai berikut:

1. Pertama, secara rekursif (sebenarnya tidak) untuk setiap kondisi permainan, hasil yang diharapkan dari permainan dihitung - yang akan dicapai jika kedua belah pihak bermain dengan sempurna.
2. Kemudian tree game dimodifikasi sebagai berikut: alih-alih memindahkan pemain, kami sekarang membuat dua gerakan sekaligus. Langkah kedua adalah gerakan kecerdasan buatan. Selain itu, dari semua jawaban yang mungkin untuk kepindahan pemain, yang dipilih dengan hasil terbaik diharapkan dipilih. Jadi, dengan mengetuk sel kosong, pemain segera pergi ke posisi di mana salib (atau jari kaki) muncul di sel ini, dan jari kaki (atau salib) muncul di beberapa lainnya.
3. Semua posisi game yang sesuai dengan gerakan yang AI tidak buat dibuang dengan kejam.
4. Kemudian HTML dihasilkan dari posisi yang tersisa di folder yang terpisah - persis sama dengan kasus dua pemain.

Dengan prinsip serupa, Anda dapat menerapkan game apa pun dengan pohon yang tidak terlalu besar. Namun, jika saya ingin membuat catur dengan cara ini, menurut saya github akan menolak untuk menjadi tuan rumah ini =)

Berbicara tentang github: Anda dapat melihat seluruh kode di sana (tautannya ada di halaman utama permainan). Tentang ini, secara umum, itu saja. Selamat tinggal, cewek dan cowok. Sampai jumpa lagi.

PS Mengganti jeda baris dari gaya Windows ke gaya Unix adalah waktu yang sangat lama untuk 6 ribu file. Saya menyesal tidak mengurus ini pada tahap penulisan kode, tetapi masih berani bertahan git add akhir.