Mengapa menulis keseluruhan game (termasuk Grafik) dalam satu file JavaScript yang diberi kode tangan?

01 Juli 2021 [Games, JavaScript, Programming, Smolpxl]

Game baru saya, Rightwaves, sudah keluar sekarang! Ini merupakan penghormatan kepada R-Type klasik yang hebat.

Seluruh implementasi, termasuk semua grafik, terkandung dalam satu file JavaScript ~5000 baris. Mengapa?

Ini adalah ide yang buruk

Mari saya mulai dengan mengatakan saya tidak menyarankan menulis kode dengan cara ini. Ini adalah ide yang buruk, dan beberapa aspek proses pembangunan menjadi sangat terhambat karena hal ini.

Kompleksitas

Salah satu tujuan saya untuk Smolpxl adalah mengembalikan pengkodean ke hal yang paling sederhana.

Selama 40 tahun terakhir, pemrograman telah banyak berubah: jumlah dan variasi alat yang harus kita gunakan telah meningkat melebihi apa yang dapat saya pahami, dan hampir semua hal ini benar-benar brilian.

Saya tidak dapat membayangkan menulis game seperti Eat Apples Quick menggunakan editor berorientasi garis yang saya gunakan di ZX Spectrum. Saya benar-benar menikmati penyelesaian kode Rust dan dokumentasi yang saya dapatkan dari menjalankan server bahasa karat di dalam NeoVim. (Saya bahkan pernah mendengar ada editor yang bekerja dalam lingkungan berjendela, namun saya tidak cukup berani untuk mencobanya.)

Saya tidak dapat membayangkan menulis mesin fisika sederhana untuk Spring dalam bahasa assembly, atau mencoba berkonsentrasi pada hal itu sementara saya harus mengungkap konvensi dan pengaturan waktu rendering grafis yang rumit. Sebaliknya, saya bisa menulis kode yang terlihat seperti matematika yang diwakilinya, dan mengizinkan browser menangani kartu grafis.

Namun, seiring dengan semua alat canggih seperti bahasa pemrograman tingkat tinggi, komponen antarmuka pengguna lintas platform, dan pustaka yang membuat penulisan game loop menjadi sederhana, muncul masalah baru: kompleksitas.

Kita harus memilih alat, perpustakaan, dan paradigma mana yang akan kita gunakan, dan untuk membuat pilihan itu kita perlu memahaminya.

Pustaka Smolpxl membuat beberapa pilihan ini untuk Anda, dengan menerapkan pemisahan model/pembaruan/tampilan gaya Elm, menyediakan kanvas berpiksel dengan ukuran yang diketahui, dan menangani game loop dengan framerate tetap. Ini sangat cocok untuk menulis game kecil bergaya retro, mirip dengan apa yang biasa saya tulis di AMOS Basic di Amiga saya.

Saya ingin membuat semuanya sederhana, tapi saya ingin game kami berfungsi di komputer orang. Satu-satunya platform yang secara realistis dapat kita pilih adalah browser: kode yang sama dapat digunakan hampir di semua tempat.

Semua ini tidak menjelaskan mengapa saya akan menulis game di dalam satu file kode sumber, tapi mudah-mudahan ini mulai menunjukkan dari mana saya berasal.

Kesederhanaan

Tujuan lain Smolpxl adalah untuk mengajarkan pemrograman, dan hambatan besar yang saya lihat untuk memulainya adalah proses pembuatannya.

Tidak ada pembangunan

Anda dapat menulis game Smolpxl di Rust dan mengkompilasinya ke WASM (begitulah cara Eat Apples Quick dilakukan), dan Anda juga dapat mengemas JavaScript dengan webpack atau serupa, tetapi saya ingin cara kelas satu dalam menggunakan Smolpxl melibatkan tidak ada pembangunan sama sekali: Saya ingin Anda dapat menyalin dalam index.html dan smolpxl.js standar, lalu menulis kode Anda di game.js dan membuatnya berfungsi saat Anda mengklik dua kali pada index.html.

Tujuan dari Rightwaves adalah untuk menunjukkan bahwa Anda dapat menulis game lengkap di Smolpxl, tanpa keluar dari cerita sederhana itu: cukup klik dua kali pada index.html.

Semuanya ada di dalam game.js

Jadi, Rightwaves adalah file JavaScript* tunggal yang berisi kode, deskripsi level, dan, mungkin yang paling tidak biasa, grafik.

* Catatan: Saya curang – data “action-replay” ada dalam file terpisah – ukurannya jauh lebih besar daripada kode sumbernya, dan akan membuatnya terlalu sulit untuk ditangani. Jika saya ingin tetap murni, saya harus menghapus tayangan ulang aksi default dari game, tapi saya terlalu menyukainya.

Desain tingkat

Seringkali ketika saya sedang menulis Rightwaves, saya berharap saya telah menulis editor tingkat. Bahkan, saya sering dikutip mengatakan

“Permainan tanpa editor level hanyalah setengah permainan.”
— Andy Bileam, cukup sering

Namun sebaliknya, desain levelnya adalah kode seperti ini:

TINGKAT const = [
    {
        scenery: [
            { x:   0, y: 80, image: "machinery-20x16-01"},
            { x:  20, y: 88, image: "machinery-20x08-01"},
// ... etc.
        ]lebar: 1526, alien: [
            newRedFlat(130, 20),
            newRedFlat(145, 25),
// ... etc.

The full code is at gitlab.com/smolpxl/rightwaves/-/blob/main/public/game.js#L3478.

It’s not a lot of fun to edit, but on the other hand, every time you make a change a simple refresh in the browser lets you see what it really looks like. No build process; no waiting.

Graphics

I drew the graphics for Rightwaves using GIMP, exported the images as PNG files, and converted them to text using a little Rust utility I wrote.

When I wanted to change an image, it was a nightmare, and I would recommend this approach to no-one whatsoever.

The reason why Smolpxl supports creating images in the source code is so you can hand-craft them right there, using an ASCII-art style.

Here’s the spaceship:

and here is the code for it:

const IMAGES = {
    "ship": {
        pixels: [
            "..www.......",
            "dddddww.bbb.",
            "rllldddcccwb",
            "dddhlllccccb",
            "rddddddaccb.",
            "..aaa......."
        ]kunci: { "w": [255, 255, 255]"D": [88, 88, 88]"B": [77, 111, 249]"R": [141, 0, 0]"aku": [126, 125, 125]"H": [192, 192, 192]"C": [3, 157, 157]"A": [42, 42, 42]
        } }, // ... banyak, dan maksud saya banyak, lebih lanjut di sini untuk grafik lainnya ...

Kode lengkapnya ada di gitlab.com/smolpxl/rightwaves/-/blob/main/public/game.js#L41.

Perhatikan bahwa saya dengan susah payah mewarnai kode itu untuk Anda, untuk postingan blog ini. Di dalam kode tidak ada kemewahan seperti itu!

Keterbukaan

Semua game Smolpxl tentunya merupakan software Gratis/Open Source. Dengan menghindari build, siapa pun dapat melihat kode sumbernya, seperti yang saya tulis, di browser mereka. Siapa pun (termasuk saya) dapat men-debug masalah tanpa langkah tambahan apa pun. Menempatkan semuanya dalam satu file membuatnya lebih mudah untuk menemukan kodenya (tetapi mungkin membuatnya lebih sulit untuk dipahami).

Optimasi

Gelombang kanan memuat dengan sangat cepat. Di mesin saya, pertama kali Anda mengunjungi halaman tersebut, halaman tersebut diputar dalam 1,4 detik, setelah mengunduh 5 file dengan total 149kB (gzip). Jika kami mengecualikan tayangan ulang aksi yang disertakan, ukurannya jauh lebih kecil.

Semua ini, tanpa proses pembuatan.

Mungkin itu bukan ide yang buruk.

Ini adalah ide yang buruk

Jangan coba ini.

Untuk bersenang-senang

Kecuali, tentu saja, jika Anda suka bersenang-senang. Saya mencoba ini karena itu menyenangkan. Saya sungguh-sungguh merekomendasikan untuk mencoba berbagai hal karena mungkin menyenangkan.

Selain itu, jika Anda suka bersenang-senang, coba mainkan game di game Smolpxl, atau tulis game Anda sendiri!