Pernahkah Anda bertanya-tanya, bagaimana cara kerja sebuah Game Engine seperti Unity, Godot, atau Phaser di balik layar? Bagaimana mungkin sebuah karakter bisa tahu kapan dia menabrak tembok? Mengapa game terus berjalan padahal Anda tidak menekan tombol apapun?

Jika Anda langsung belajar menggunakan Framework, Anda akan dimanjakan oleh fitur sihir yang menyembunyikan proses menyiksa—namun sangat indah—dari pemrosesan algoritma murni.

Dalam kursus fondasi eksklusif ini, kita akan MENGHARAMKAN penggunaan Framework. Kita hanya akan menggunakan teks editor kosong, file HTML dasar, dan kekuatan liar dari Vanilla JavaScript (ES6).

Apa yang akan saya pelajari ?

• Anatomi HTML5 Canvas: Mengenal elemen <canvas>, sebuah layar proyektor beresolusi mutlak di mana Anda akan menyapu kuas gambar (ctx.fillRect) puluhan kali dalam sedetik.
• Detak Jantung Game (The Game Loop): Anda tidak akan lagi bergantung pada setTimeout. Anda akan menguasai fungsi sakral window.requestAnimationFrame yang berdetak seiring Refresh Rate layar monitor Anda (60 FPS).
• Manajemen State (Keadaan): Menyimpan koordinat $X$ dan $Y$ dari sebuah benda ke dalam variabel, dan menggesernya secara dinamis berdasarkan perhitungan Waktu Delta (Kecepatan murni).
• Pendengar Sinyal Keyboard: Merajut alat tangkap pendengar keydown dan keyup untuk membaca aliran input tombol dari jari pemain.
• Fisika Pantulan Biner: Logika primitif: Jika nilai Y suatu bola mencapai titik nol, maka balikkan arah kecepatannya agar memantul melawan dinding ruang proyektor!
• Deteksi Tabrakan (Collision Detection): Ilmu sihir sesungguhnya. Anda akan mengetikkan rumus matematika AABB (Axis-Aligned Bounding Box) secara manual untuk mengkalkulasi tumpang tindih piksel antara Bola dan Papan Raket (Paddle).

Project apa yang akan saya buat ?

Sebagai pembuktian gelar Anda sebagai Insinyur Logika Murni, Anda akan merakit nenek moyang dari seluruh permainan Video Game di bumi: Classic Ping-Pong (Paddle & Ball).

Anda akan menggambar sebuah papan yang bisa Anda gerakkan ke atas dan ke bawah, sebuah bola yang memantul gila di dalam layar, dan sebuah papan musuh (Komputer/AI Sederhana) yang akan bergerak secara otomatis mengejar koordinat Y bola. Lengkap dengan bunyi peluit dan papan skor digital yang diukir tepat di atas kanvas web Anda!

💎 Materi

Menjadi pembuat Game Engine buatan tangan adalah hak istimewa yang memisahkan Anda dari amatir. Mari bongkar layar <canvas> pertama Anda! 🖌️🕹️