Proyek JavaScript - Mesin Slot

Deskripsi Proyek

Kelas keempat saya, JavaScript, berfokus pada pengalaman pengguna di sisi depan. Jadi untuk proyek saya, saya memilih untuk membuat game - mesin slot - dengan peluang yang lebih baik sehingga pemain biasanya akan menang. Saya menggunakan Ruby on Rails untuk menyediakan antarmuka ke database, tetapi fokusnya adalah pada pengalaman pengguna sehingga sebagian besar pekerjaan difokuskan pada penyediaan fungsionalitas front end (mesin slot).

Fitur mesin slot saya mencakup kemampuan bagi pengguna untuk membuat akun dan bagi pengguna yang kembali untuk masuk dan mengambil saldo sebelumnya. Setelah masuk, pengguna dapat melakukan setoran dan penarikan palsu, menyesuaikan jumlah taruhan, 'memutar' mesin slot (dengan taruhan dikurangkan dan kemenangan ditambahkan ke saldo pengguna), melihat lima transaksi terakhir mereka (setoran dan/atau penarikan), dan melihat tabel pembayaran kemenangan. Saldo pengguna yang diperbarui disimpan ke database setelah setiap putaran.

Karena membuat game adalah pengalaman yang benar-benar baru, saya kesulitan dalam menyusun desain yang detail. Sebaliknya, saya fokus pada fitur-fitur yang saya inginkan pada mesin slot saya dan kemudian langsung mulai membuat kode fitur satu per satu. Akibatnya, saya menghabiskan lebih banyak waktu untuk trial and error. Namun, ini akan menjadi lebih mudah seiring dengan bertambahnya pengalaman saya bekerja dengan jenis proyek seperti ini.

Satu masalah desain yang saya hadapi adalah cara menyimpan hasil permainan mesin slot ke database. Awalnya saya berpikir untuk menyimpan setiap kemenangan atau kekalahan ke tabel transaksi dengan saldo pengguna sebagai jumlah dari semua transaksi. Namun, ini menambah kerumitan (banyak transaksi) dan rawan kesalahan. Saya juga berpikir untuk hanya menyimpan kemenangan atau kerugian bersih setiap kali pengguna keluar dari sesi saat ini, tetapi apa yang terjadi jika pengguna hanya menutup jendela? Pilihan akhir saya adalah menyimpan saldo pengguna yang diperbarui ke database setelah setiap putaran. Saya merasa ini adalah solusi yang seimbang dan menjaga kode tetap sederhana.

Membuat tata letak mesin slot dalam HTML dan menata elemen dengan CSS juga menantang. Ini sebagian besar akibat dari fungsionalitas yang relatif rumit. Satu hal yang harus saya biasakan adalah menggunakan banyak elemen <div> sehingga saya dapat mengidentifikasi dan mengubah sesuatu dengan JavaScript.

Bagian paling menantang dari proyek ini adalah membuat kode fungsi putaran dalam JavaScript. Saya harus menggunakan timer untuk membuat gambar 'berputar' dan memastikan hasilnya tidak muncul terlalu cepat. Saya menggunakan fungsi setTimeout() di beberapa tempat untuk (1) memperlambat kemunculan setiap gambar dalam gulungan, dan (2) menunda kemunculan hasil hingga semua putaran selesai. Pendekatan saya untuk mengatur waktu peristiwa mencakup langkah-langkah berikut:

• Mengidentifikasi gambar awal dan akhir (pemenang)
• Membuat array dari semua gambar untuk setiap gulungan (total 3 gulungan)
• Mulai memutar ketiga gulungan menggunakan penundaan 150 milidetik untuk setiap gambar
• Menunda langkah-langkah selanjutnya hingga gulungan ke-3 (gulungan yang berputar paling lama) selesai

Penundaan langkah-langkah terakhir dilakukan menggunakan fungsi setTimeout() untuk menunda 150 milidetik dikalikan jumlah gambar dalam array untuk gulungan ke-3:

windoweout(() => { code for remaining steps… }, (reel3SpinArry + 2) * 150)

Ada banyak tantangan lain yang harus diatasi termasuk menampilkan dan menyembunyikan formulir, membuat objek untuk gambar, pengguna, dan permainan, serta membuat panggilan fetch ke Rails. Namun, dengan banyak trial and error saya berhasil membuat semuanya berfungsi. Saya senang dengan kemajuan saya sejauh ini dan merasa bahwa saya telah belajar banyak. JavaScript rumit dan menantang untuk dipelajari, tetapi juga menarik. Saya menantikan kelas terakhir saya di Flatiron Academy yang juga terkait JavaScript.