Di Balik Layar: Membuat Mario.Game Adventure

Mario.Game Adventure hanyalah satu file JavaScript tanpa engine, tanpa file gambar, dan tanpa file audio. Begini proses pembuatannya.

Pixel art yang digambar lewat kode

Setiap sprite — sang pahlawan dalam wujud kecil dan besar, Walker, Koopa, Spiny, Piranha Plant, bos, blok, awan, dan kastil — dituliskan di kode sumber sebagai baris huruf warna, atau digambar dengan rutinitas bentuk sederhana. Saat game dimulai, semua sprite dilukis sekali ke canvas di luar layar, lalu disalin ke layar pada setiap frame. Setiap dunia punya palet warnanya sendiri: bata yang sama bisa berubah menjadi biru di bawah tanah, berwarna es di malam hari, dan abu-abu di kastil.

Fisika yang terasa klasik

Gerakan adalah penentu hidup-matinya sebuah game platformer. Sang pahlawan punya kecepatan jalan dan lari yang terpisah, akselerasi dan deselerasi, skid yang tegas saat berganti arah, dan tinggi lompatan yang bisa diatur: gravitasi lebih rendah selama kamu menahan tombol lompat dan karakter masih naik. Kami menyetel nilainya sampai lompatan sambil berlari bisa melewati jurang selebar tiga petak dengan nyaman, sedangkan lompatan sambil berjalan tidak — jadi berlari terasa seperti keterampilan yang layak dipelajari. Baca panduan gerakan untuk detailnya.

Delapan level, empat tema

Setiap dunia memperkenalkan satu ide utama:

1. Dunia 1 — dasar-dasarnya: pipa, jurang, power-up, lalu gua dengan langit-langit rendah.
2. Dunia 2 — Spiny yang tidak bisa diinjak, dan lift bergerak pertama di awan.
3. Dunia 3 — level malam yang memadukan semuanya, lalu puncak pohon di atas jurang tanpa dasar.
4. Dunia 4 — jalur benteng yang ramai, lalu kastil dengan batang api, lava, dan seorang bos.

Bot yang memainkan setiap level

Untuk memastikan setiap level bisa diselesaikan, kami menulis bot penguji yang menjalani tiap stage dengan mode kebal, melompat di dinding dan jurang. Saat bot tersangkut, kami memeriksa lokasinya: beberapa kali ini menyingkap lompatan yang terlalu tinggi satu piksel atau blok yang tidak bisa dijangkau, lalu kami memperbaiki levelnya. Dikombinasikan dengan pemeriksaan tinggi lompatan untuk setiap blok, cara ini menangkap semua titik tak terjangkau yang bisa kami temukan.

Musik dengan Web Audio

Musik latarnya dihasilkan secara langsung oleh sequencer mungil yang memakai Web Audio API di browser: gelombang persegi dan segitiga untuk melodi dan bass, serta noise untuk drum. Setiap dunia punya lagu orisinalnya sendiri, ditambah jingle untuk power-up, bendera, game over, dan finale. Saat timer turun ke 100, tempo musik naik — persis seperti yang kamu harapkan.

Cobalah

Mainkan Mario.Game Adventure, atau langsung buka panduan penyelesaian kalau kamu buntu.