Get best of the week

Personal Las Vegas, atau game dalam ekstensi browser


Baru-baru ini, seorang teman dan saya mulai berbicara tentang permainan kartu. Dia mengatakan bahwa dia hanya bisa bermain poker, tetapi dia tidak melakukannya untuk waktu yang lama, karena dia telah lupa semua kombinasi. Jadi mereka berbicara ... Saya ingat bahwa beberapa tahun yang lalu saya menulis lima permainan kartu, termasuk Texas Hold'em poker, di mana setiap saat selama permainan Anda tidak hanya dapat melihat kombinasi yang dikumpulkan, tetapi juga semua opsi potensial dengan kartu yang belum dibuka. Ini bisa menjadi alat pengajaran dan membantu menyegarkan aturan dalam proses bermain dengan bot.

Saya memutuskan untuk memperbaiki kode lama saya, serta mengubah gambar. Desain selalu sulit bagi saya, itu bukan milik saya. Mengandalkan setidaknya beberapa inspirasi, saya menyalakan soundtrack dari GTA San Andreas, yang dengan musik country, dari radio K-Rose. Sepertinya bagi saya bahwa itu menyampaikan suasana Las Vegas dengan baik. Saya belum pernah ke sana, tapi pasti menyampaikan! Saya bersumpah pada bintang sheriff saya. (Jika ada - ini plastik, jadi tidak sayang ...) Dan saya tidak terlalu malas untuk pergi ke permainan legendaris itu sendiri dan berkeliling Las Venturas, sebuah prototipe virtual dari ibukota judi dunia.


Ya, saya sadar bahwa Las Vegas terletak di Nevada dan bukan di Texas. Tapi permainan seperti itu terkait, setelah semua, pertama-tama, dengan Vegas. Texas Hold'em dibawa ke sana dan setelah itu ia mendapatkan popularitas luas. Vegas adalah produsen game.

Beberapa tahun yang lalu, untuk beberapa alasan, saya memposting permainan saya hanya di Windows Store, yang tidak menggunakan banyak lalu lintas. Meskipun, mungkin segera, karena penghentian Windows 7 dan transisi besar ke 10, toko aplikasi ini akan mendapatkan angin kedua. Kami mengucapkan semoga beruntung dan terus mengepalkan tangannya di Vegas. Tapi artikelnya bukan tentang ini, tetapi tentang angin kedua dari gim saya. Itu ditulis dalam Javascript murni, dan saya memutuskan bahwa hari ini itu bisa berfungsi sebagai ekstensi browser untuk Chrome dan Firefox dari toko tambahan yang sesuai, serta dalam bentuk perakitan untuk Windows 7-10 berdasarkan Chrome.

Game ini disebut "Poker 3 Bags" dan mencakup lima game: "Texas Hold'em Poker", "Throwing Fool", "Czech Fool", "Three Sticks", dan game penulis saya "3 Bags". Hanya permainan dengan bot di komputer lokal yang tersedia.

Negara


Jadi, tentang musik country. Melodi dari GTA San-Andreas menyarankan bahwa akan menyenangkan untuk menambahkan tema koboi kecil ke permainan: lagipula, Poker Texas Hold'em di sini akan menjadi permainan utama. Saya menempatkan topi koboi dan pistol di ikat kepala sambil meletakkan kartu.

Firefox

Dan juga - ikon topi kecil di sebelah kiri nama permainan di menu utama.

Google Chrome

Dan topinya akan ditampilkan pada gambar profil pemenang. Desain keseluruhan, semacam badut, saya memutuskan untuk tidak berubah secara mendasar.

Perangkat tambahan


Selain elemen grafis, kodenya juga berubah di dalam gim. Saya mentransfer semuanya ke versi baru mesin saya. Namun, mesinnya terlalu keras mengatakan dalam kaitannya dengan game ini. Mesin mendukung grafis 3D, tetapi di sini - hanya sprite kartu bermain di pesawat. Tapi kemudian saya mengoptimalkan animasi dan membuatnya multithreaded. (Tentu saja, dalam javascript tidak ada multithreading nyata, setidaknya ketika bekerja dengan jendela browser. Paralelisme dicapai dengan mengulangi secara berurutan melalui semua animasi untuk setiap panggilan.)

Ada lebih banyak pilihan. Pertama, menu dalam game telah muncul, dari mana Anda sekarang dapat mengontrol skala gambar. Contohnya:

var scaleValue=0.5;
var scale = 'scale('+scaleValue+')';
document.body.style.webkitTransform = document.body.style.msTransform = document.body.style.transform = scale;

Ini memungkinkan Anda untuk memasukkan gambar ke dalam jendela browser dengan ukuran berapa pun yang tersedia. Fungsi ini bekerja bersama dengan peristiwa ukuran jendela, skala yang diinginkan sudah dihitung sebelumnya. Yang terakhir ini juga dapat disesuaikan secara manual. Sebelumnya, di komputer saya permainan ini tampak terlalu kecil, dan di telepon itu terlalu besar dan bilah gulir muncul. Akhirnya, masalah ini teratasi. Benar, sekarang, mungkin, Anda harus memasang antarmuka kedua ke gim - potret, untuk perangkat seluler, terutama untuk ponsel ... Ukuran garis peramban, yang memakan sebagian besar layar pada ponsel, juga tidak menyenangkan. Tetapi ada tombol untuk memperluas game ke layar penuh.

Android 7.0 dan Windows 8.1

Second. Saya menyelesaikan poker Texas Hold'em. Sekarang taruhan all-in tersedia, yang sebelumnya tidak ada, serta pemilihan ukuran taruhan manual. Keripik di semua permainan mulai bergerak lebih realistis dan sesuai dengan denominasi mereka: yaitu, misalnya, jika Anda bertaruh 15, maka dua chip - 5 dan 10 akan meninggalkan pemain dari meja, membentuk semacam tumpukan di sana. Sebelumnya, hanya satu chip kondisional yang dipindahkan. Selain itu, sekarang mereka dapat bermain bukan 4, tetapi hingga 10 pemain. Nah, dan perbaikan kecil lainnya, yang, mungkin, tidak boleh dihentikan.

Bagian teknis


Seperti yang telah saya sebutkan, gim ini ditulis dalam Javascript murni tanpa menggunakan pustaka pihak ketiga (bahkan JQuery tidak digunakan). Hanya ada satu perpustakaan, milikku, yang mengimplementasikan fungsi menampilkan antarmuka pada tag kanvas. Sebenarnya, semua konten game adalah bagian dari antarmuka. Dalam yang terakhir, saya memiliki hal seperti menu dengan dukungan. Misalnya, Anda bisa menggunakan tabel permainan itu sendiri untuk menu "Keluar", yang terdiri dari satu tombol dengan nama yang sama, sebagai "latar belakang". Dan itu akan cukup untuk menampilkan menu ini sehingga sebuah tabel dan tombol muncul di kanvas. Selain itu, tombol tidak harus terletak di atas media - ia juga dapat berada di dekatnya. Atau, misalnya, media mungkin tidak sama sekali. Selain itu, untuk setiap menu, Anda dapat menampilkan sprite terkait, atau "satelit" yang bukan tombol. Bagi mereka, juga untuk tombol,koordinat relatif ditetapkan.

Document Tree (DOM) adalah dua blok kanvas dengan posisi absolut yang direntangkan oleh ukuran jendela browser. Semua sprite, sebagaimana diminta oleh kanvas, ditampilkan menggunakan drawImage (). Lapisan latar belakang (gradien) dan elemen antarmuka terletak di lapisan bawah, dan lapisan atas digunakan untuk animasi. Tentu saja, saya bisa membatasi diri hanya menjadi dua layer, tetapi saya memutuskan untuk menambahkan dua layer lagi. Jadi di mesin ui saya, DOM dibangun:

m3d.ui.initHtml([
	m3d.ui.htmlCanvas('canvbk'),
	m3d.ui.htmlControlsHand(),
	m3d.ui.htmlDiv('help', 0,0),
	m3d.ui.htmlCanvas('canvblack')
]);

  • htmlCanvas adalah lapisan dengan kanvas agar sesuai dengan ukuran jendela browser; namanya ('canvbk') digunakan sehingga Anda dapat menonaktifkan layer jika perlu (dalam kasus elemen ini, itu tidak pernah diperlukan). Blok ini untuk menampilkan gradien latar belakang dan antarmuka.
  • htmlControlsHand — , , . , DOM . ( ).
  • htmlDiv — div- id='help', , , . . ( id display='block', display='none' : m3d.ui.layersDiv.help.div.style.display='block'; ). htmlDiv - (, ). , , , (0,0).
  • htmlCanvas('canvblack') — canvas, . «» . .

Dengan demikian, hanya dua lapisan bawah yang tetap menyala secara permanen. Semua elemen yang ditentukan melalui m3d.ui.initHtml diproses oleh fungsi pengubahan ukuran dan, ketika jendela browser diubah ukurannya, menyesuaikannya.

Mesin animasi juga milik Anda. Fungsinya untuk mengubah parameter, dari nilai awal ke nilai akhir, untuk waktu tertentu. Ini bisa, misalnya, koordinat sepanjang dua sumbu (untuk 3D - sepanjang tiga) dan sudut rotasi. Secara umum, jumlah parameter untuk satu animasi tidak terbatas, dan Anda dapat membuat formula untuk mengubah apa pun. Akhirnya, dalam fungsi panggilan balik, di mana sprite diposisikan, nilai saat ini dari semua parameter ditransmisikan dengan frekuensi yang tergantung pada kekuatan pemrosesan sistem. Fps mungkin jatuh, tetapi total waktu animasi tidak akan berubah. Kanvas atas menerima acara klik (dan gerobak dorong untuk perangkat seluler) dengan penentuan koordinat tombol mana pada antarmuka yang harus ditekan.

Animasi bekerja seperti ini. Objek yang ingin Anda pindahkan dihapus dari lapisan bawah (objek harus berupa "satelit" yang baru saja mati), seluruh antarmuka, yaitu, semua "menu dengan substrat" ​​terbuka digambar ulang (sehingga, satelit tidak lagi ada, dihapus), objek ia naik ke lapisan atas, bergerak ke sana, lalu menghilang dan akhirnya jatuh ke lapisan bawah, di mana ia mengikat ke “menu lain dengan substrat” sebagai satelit, atau, lebih lagi, tetapi dengan koordinat relatif yang berbeda. Menu di lapisan bawah digambar kembali. Fungsi menggabungkan konten lapisan diserahkan kepada browser, ia melakukan ini secara asli. DOM selama pertandingan tidak berubah dengan cara apa pun dan selalu terdiri dari dua kanvas yang saling menempel. Kecuali saat mengubah ukuran jendela browser, semua konten digambar ulang 1 kali, sudah pada skala baru.

Semuanya berfungsi di Windows dan Android di Chrome dan Firefox. Baik dari server lokal dan dari sistem file dengan membuka index.html. IE11 meninggalkan tata letak. Tampaknya ukuran atau skala kanvas entah bagaimana salah didefinisikan di sana, yang mengarah ke tampilan bilah gulir. Meskipun, gamenya sendiri bekerja dengan baik. Saya tidak berurusan dengan ini: tidak mungkin ada orang yang akan menggunakan browser yang ketinggalan zaman ini. Dalam versi kuno Edge, semuanya bekerja dengan baik.

IE11

Di iOS (+ MacOS) dan Linux saya tidak menguji, tetapi saya tidak melihat alasan untuk tidak bekerja, karena semuanya dilakukan dengan sangat sederhana.

Tentang pelokalan. 2 bahasa didukung - Rusia dan Inggris. Beralih dengan mengklik pada bendera di menu utama. Secara teknis, ini diimplementasikan dalam bentuk dua file js dengan array asosiatif frasa dalam bahasa yang berbeda, ditambah gambar yang berbeda, dalam kasus beberapa teks tertanam dalam gambar: misalnya, teks tersembunyi atau gradien.

Bagikan dengan dunia


Saya tidak dapat menemukan sesuatu yang lebih baik daripada pergi ke toko ekstensi browser untuk Chrome dan Firefox. Yah, saya juga membuat build untuk Windows berdasarkan Chrome.

Versi game ini lebih seperti demo. Itu membutuhkan penyempurnaan lebih lanjut. Versi uji coba direncanakan, dengan tiga game, selama 30 hari. Dan versi berbayar, dengan lima pertandingan, tanpa batas. Yang terakhir juga akan memiliki kesempatan untuk menempatkan taruhan all-in di poker, dan juga, senioritas dari kartu kombinasi akan diperhitungkan dalam menentukan pemenang. Sekarang dalam demo ada tiga pertandingan dan tidak ada batasan waktu. Nantinya, demo ini akan berubah menjadi versi uji coba dan versi lain, yang sudah lengkap, akan dirilis.

Ekstensi browser


Jadi, hal pertama yang saya putuskan untuk menempatkan game di toko add-on Chrome dan Firefox. Saya memiliki akun pengembang dan beberapa pengalaman, karena saya sudah memposting salah satu ekstensi browser saya di sana. Ngomong-ngomong, jika ada yang punya ChromeOS, maka akan menarik untuk mengetahui apakah game saya berfungsi di sana. Saya tidak punya kesempatan untuk memeriksanya.

Ada dua opsi untuk menampilkan konten ekstensi - di jendela di atas antarmuka browser atau di tab terpisah. Karena konten menempati area yang agak besar dan akan sangat memblokir tab terbuka saat ini, saya memilih opsi kedua.

Tidak ada yang rumit dalam membuat ekstensi browser berdasarkan halaman web, yang, pada dasarnya, adalah permainan saya. Anda hanya perlu menambahkan file manifes, ikon, dan tangkapan layar. Di Chrome Webstore, Anda juga dapat menambahkan video dengan gameplay, yang saya lakukan. Lalu dia merekam video lain, sudah dengan Firefox:

Pengaya browser Firefox

Ukuran arsip adalah 4,8 Mb. Gim dalam bentuk yang belum dikemas - 5,2 MB. Sebagian besar volume, tentu saja, mengambil gambar. Kode gim itu sendiri persis sama untuk kedua peramban, hanya berbeda dalam selusin garis penjilidan yang bertanggung jawab untuk membuka tab dengan gim dengan mengklik ikon gim di panel peramban di sebelah kanan baris perintah.

Karena add-on tidak memerlukan izin khusus sama sekali dan tidak memerlukan akses ke server atau data pribadi, moderasi di kedua toko hampir instan, pada hari penempatan.

Eksekusi Windows dan versi lainnya


Saya membuat perakitan di mesin Chrome menggunakan utilitas paling sederhana untuk Windows Web2Exe dan mengunggahnya ke toko Itch dan Indiexpo, di mana salah satu game saya sudah ada. Ukuran perakitan ini adalah 115 MB. Dan setelah dikemas dengan program untuk membuat installer, paket distribusi untuk mengunduh ternyata mencapai 40 MB.

Bangun untuk Windows 7 - 10

Saya belum memposting versi game ini di Windows Store sebagai aplikasi Windows 10, meskipun saya memiliki akun pengembang di sana. Saya sudah lama, beberapa tahun yang lalu, menghancurkan Visual Studio. Apalagi ada cerita yang menarik. Saya telah melisensikan Windows 8.1 di tablet saya dan sangat cocok untuk saya. Dan di komputer - Windows 10. Dimulai dengan beberapa versi Visual Studio - di sini saya tidak ingat persis - baik itu tidak memungkinkan Anda untuk membuat aplikasi javascript dengan dukungan untuk Windows 8.1 sama sekali, atau Anda tidak ingin menanamkan iklan di dalamnya jika dirancang, kecuali "Puluhan", juga pada Windows 8.1 yang lebih lama (tapi saya ingin memiliki potensi untuk monetisasi). Secara umum, saya sudah lupa apa sebenarnya yang ada di sana, tetapi beberapa masalah justru terkait dengan keterbatasan dukungan 8.1. Tetapi jelas bahwa saya mengunduh permainan saya hanya dari toko ini,dan saya ingin dapat memainkannya di tablet saya. Toko itu sendiri, menurut pendapat saya, tidak mempromosikan aplikasi dengan cara apa pun. Jadi saya belum memutuskan apakah saya benar-benar ingin meletakkan Visual Studio besar pada kartu MicroSD 32GB di tablet lagi ... Akun pengembang hanya berfungsi dengannya. Atau, setelah mempertimbangkan pro dan kontra dan memberi jumlah pengunjung ke toko Microsoft, tetap menulis kode seperti buku catatan dan tidak mengacaukan lingkungan pengembangan raksasa sama sekali? Sangat disayangkan bahwa di sana Anda tidak bisa mengunduh arsip dengan aplikasi melalui formulir di situs, seperti yang diterapkan, misalnya, untuk ekstensi browser.apakah sangat kuat saya ingin meletakkan Visual Studio besar lagi di kartu MicroSD 32GB di tablet ... Akun pengembang hanya bekerja dengannya. Atau, setelah mempertimbangkan pro dan kontra dan memberi jumlah pengunjung ke toko Microsoft, tetap menulis kode seperti buku catatan dan tidak mengacaukan lingkungan pengembangan raksasa sama sekali? Sangat disayangkan bahwa di sana Anda tidak bisa mengunduh arsip dengan aplikasi melalui formulir di situs, seperti yang diterapkan, misalnya, untuk ekstensi browser.apakah sangat kuat saya ingin meletakkan Visual Studio besar lagi di kartu MicroSD 32GB di tablet ... Akun pengembang hanya bekerja dengannya. Atau, setelah mempertimbangkan pro dan kontra dan memberi jumlah pengunjung ke toko Microsoft, tetap menulis kode seperti buku catatan dan tidak mengacaukan lingkungan pengembangan raksasa sama sekali? Sangat disayangkan bahwa di sana Anda tidak bisa mengunduh arsip dengan aplikasi melalui formulir di situs, seperti yang diterapkan, misalnya, untuk ekstensi browser.

Dalam waktu dekat saya berencana memposting game ini sebagai aplikasi i-frame di jejaring sosial VKontakte dan Facebook. Menurut aturan mereka, masih perlu untuk mengencangkan beberapa fungsi sosial dalam permainan, seperti tabel peringkat pemain terbaik dan sebagainya.

Mungkin masih layak dicari ke arah Google Play Market. Sejauh yang saya tahu, PWA (Aplikasi Web Progresif) sekarang dapat di-host di sana. Tapi saya belum punya akun pengembang dan saya belum mengetahuinya. Di sisi lain, PWA dapat ditempatkan di situs web Anda, dari mana game akan dipasang di ponsel, ikon akan dibuat, dan semuanya akan terlihat seperti aplikasi Android normal. Kemungkinan besar, masuk akal untuk pergi ke Toko hanya dengan anggaran iklan yang besar, yang tidak saya miliki. Secara umum, belum ada game di perangkat seluler. Saya pikir saya hanya akan mempostingnya di situs untuk bermain melalui browser dan menginstalnya sebagai aplikasi PWA, agar tidak bergantung pada koneksi jaringan.

Ya, menyenangkan bahwa Google Play, seperti halnya Microsoft Store, memungkinkan untuk mengunduh aplikasi yang ditulis dalam Javascript. Saya pernah menyukai fitur ini di toko Microsoft. Sangat disayangkan bahwa yang terakhir ini tidak terlalu populer. Dan sangat nyaman - saya hanya mengunduh 5,2 MB di sana (yaitu, kode javascript dan gambar) - dan Anda selesai. Tanpa ikatan besar dan perpustakaan tambahan. Dan browser digunakan dari yang diinstal di sistem. Idealnya, ini juga akan memberi pengguna kesempatan untuk memilih browser mana yang akan berfungsi sebagai "pemain" untuk game. Microsoft, seingat saya, ketika mengunduh aplikasi seperti itu dari toko hanya menawarkan IE11. Bagaimanapun, versi lama gim saya diluncurkan di dalamnya. Namun, sekarang, ketika mereka beralih ke mesin dari Google, mungkin tidak ada perbedaan. Omong-omong, Chrome lebih baik dari IE11,bekerja dengan grafis 3D WebGL ... Tapi ini tidak berlaku untuk permainan, yang dibahas dalam artikel ini.

Total


Secara keseluruhan, game ini adalah simulator. Tidak ada game online, Anda hanya bisa berlatih dengan bot. Hal utama di sini adalah melihat kombinasi yang telah Anda kumpulkan dan berpotensi mengumpulkan. Untuk melakukan ini, cukup klik tombol menu dengan tanda tanya atau pada kartu Anda. Kombinasi siap pakai ditandai dengan lingkaran hijau di sebelah kanan, yang potensial berisi kartu gelap yang masih bisa berasal dari geladak. Akhirnya, mengingat ketersediaan game lain dalam kit, program ini dapat digunakan, misalnya, sebagai pengganti game solitaire bosan. Program ini bersifat otonom baik dalam bentuk perakitan untuk Windows maupun dalam bentuk add-on browser, dan untuk pekerjaannya tidak memerlukan koneksi Internet.

Akhirnya: daftar periksa


Tempat di mana saya ingin tinggal dan di mana sudah dilakukan:

+
Toko ekstensi browser - Toko game Windows Utama (Steam)
+ Toko game Windows sekunder
- Toko ponsel
- Jaringan sosial
- Situs web

Add-on di Firefox

More articles:


All Articles