Penerapan Konsep Client dalam Pembuatan Shooter Game - Perwira Learning Center

 

1. Latar Belakang

    Dalam rangka persiapan menghadapi LKS Web Technologies tingkat provinsi, saya mempelajari modul Client Side yang berfokus pada pengembangan aplikasi interaktif menggunakan HTML, CSS, dan JavaScript. Salah satu studi kasus yang digunakan dalam pembelajaran ini adalah pembuatan game Shooter berbasis web yang menuntut pemahaman tentang struktur UI hingga pengelolaan interaksi pengguna secara dinamis di .

    Melalui pembelajaran ini, saya mempelajari konsep dasar pemrograman sisi klien seperti event handling, pengaturan timer, perhitungan skor, serta penyimpanan data menggunakan local storage. Selain itu, saya juga menganalisis kebutuhan sistem yang terdapat pada soal LKS, seperti pengelolaan level permainan, riwayat permainan, dan kontrol interaksi pengguna menggunakan mouse dan keyboard. Pembelajaran ini dilakukan sebagai simulasi konsep untuk meningkatkan pemahaman teknis dan kesiapan dalam mengerjakan soal LKS tingkat provinsi.

2. Alat dan Bahan

A. Perangkat Lunak

- Sistem Operasi Linux Ubuntu
- Visual Studio Code
- JavaScript

- HTML

- CSS

- Bootstrap
- Web Browser

B. Perangkat Keras

- Laptop / PC

3. Pembahasan

3.1 Konsep Client Side Programming dalam Pengembangan Game Web

    Client-side programming kali ini dilakukan di sisi pengguna menggunakan bahasa pemrograman seperti HTML, CSS, dan JavaScript. Dalam modul LKS tingkat provinsi, seluruh logika Shooter Game dikembangkan pada sisi klien tanpa melibatkan server-side processing. Konsep ini digunakan untuk melatih pemahaman peserta terhadap manipulasi DOM, event handling, animasi, serta pengelolaan data lokal di browser.

3.2 Perancangan Struktur Dasar Shooter Game

Berikut struktur folder yang saya rancang untuk pengembangan Shooter Game kali ini, yaitu:

Penjelasan lebih lengkapnya sebagai berikut.

CLIENT_SIDE/

│ bootstrap/ -> Berisi folder CSS dan JS bootstrap. Install bootstrap5 disini

│ Sprites/ -> Berisi elemen game

│ index.css -> Mengatur tampilan dan visibilitas elemen game

│ index.html -> Tampilan Menu + Canvas Game

└ index.js -> Game Logic

SERVER_SIDE/

│ backend

└ frontend

3.3 Implementasi Tampilan Menu dengan HTML dan CSS

    File utama yang digunakan adalah index.html sebagai entry point aplikasi sesuai instruksi soal LKS. Pada file ini dibuat struktur dasar halaman menu yaitu penginputan username, pemilihan level, skin atau gun, serta target menggunakan elemen HTML5 semantic dan CSS.

A. Index.html

- Rerefensi dari soal LKS:

- Langkah:

1. Awali kode dengan HTML5 semantic dan buat link untuk mengaitkan CSS dengan bootstrap

2. Buat tag <canvas> di dalam body dengan id canvas sebagai wadah untuk menampilkan game kita

3. Buat <div> dengan id menu untuk tampilan menu game

4. Di dalam menu, kita tambahkan div untuk instruction dan logo game

5. Tambahkan isi instruksinya

6. Buat input username, level, gun, dan target

7. Buat 2 button untuk memulai permainan dan untuk membuka instruksi

8. Kaitkan dengan index.js

9. Percantik dengan bootstrap dan CSS

Berikut kode CSS untuk menu:

10. Tambahkan JavaScript pada button instruksi untuk memunculkan popup

- Hasil:

B. Index.js

    Pada tahap ini, kita akan mulai membuat logic dari Shooter Game kita agar dapat memenuhi kriteria soal LKS berikut:

• Pemain dapat langsung masuk ke permainan setelah mengisi kolom nama pengguna dan mengklik tombol “Play” di bagian bawah halaman menu
• Pemain harus memilih satu dari setiap opsi:
  - Salah satu dari 3 level (easy, medium, hard)
  - Salah satu dari 2 gun untuk digunakan
  - Salah satu dari 3 target untuk digunakan
• Saat permainan dimulai, timer akan dimulai berdasarkan level:
  - 30 detik untuk level 1
  - 20 detik untuk level 2
  - 15 detik untuk level 3
• Target muncul setiap 3 detik
• Ketika permainan dimulai, akan ada 3 target acak
• Pointer akan muncul ditengah layar dan bergerak bersama cursor / mouse
• Target menghilang setelah pemain menembak
• Pemain dapat menembak dengan sekali klik:
  - Jika tembakan meleset, timer dikurangi 5 detik
  - Jika tembakan tepat, skor ditambah 5
• Popup "Game Over" muncul ketika timer habis:
  - Muncul username dan scores
  - Muncul button save match history dan restart button
• Hasil match disimpan di local storage setelah button save match di klik
• Riwayat match dapat diurutkan berdasarkan score dan last match
• Game harus bekerja di Google Chrome

- Referensi soal LKS: 

- Langkah:

1. Buat tombol "Play" bisa di klik dan memunculkan background game

Panggil fungsi untuk memulai game

    Tambahkan variabel myBackground dan buat fungsi startGame() yang isinya untuk memunculkan komponen background serta membuat permainan berjalan. Disini, myGameArea dan fungsi start() belum terdefinisi.

    Kita buat variabel myGameArea untuk menampilkan keseluruhan permainan, fungsi start() juga akan kita tulis disini. Sederhananya, disini kita memanggil id canvas dan kita buat lebar serta tingginya menjadi sama seperti yang ada pada komponen myBackground, lalu ada interval agar permainan dapat berjalan, tak lupa kita buat juga fungsi clear dan stop untuk menghentikan interval atau permainan.

    Karena fungsi component belum terdefinisikan, kita buat fungsinya dengan parameter yang harus sama persis dengan yang kita letakkan di fungsi startGame yaitu width, height, color (dapat diganti sebagai warna maupun latar belakang), x, y, dan type (tipe text/image/background).

    Selanjutnya, kita tentukan fungsi dari masing-masing type tadi yaitu antara text, image, dengan background.

    Terakhir, kita buat fungsi untuk mengupdate permainan karena sebuah permainan selalu berjalan dan berubah setiap detiknya. Tak lupa kita gunakan fungsi clear dan juga mengupdate background.

    

    Ketika tombol play diklik, maka sekarang akan muncul background polos sebagai latar belakang dari permainan yang sedang kita buat.

2. Memunculkan username pemain dan timer berdasarkan level yang dipilih pemain

    Kita tambahkan variabel myUsername untuk menampilkan teks username, variabel myTimer untuk menampilkan teks timer, serta tambahkan variabel username dan level untuk mengambil keduanya dari id.

    Tambahkan kondisi (if else) untuk pemilihan level.

    

    Terakhir, dibagian fungsi updateGameArea, kita tambahkan logika agar ketika timer kurang dari 1, maka permainan akan berhenti. Setelah itu, untuk membuat timer memiliki format waktu yang sesuai dengan soal LKS, kita tambahkan fungsi formatTimeFromFrames agar nanti format waktunya adalah 00:00. Lalu kita buat timernya berkurang setiap detik dengan timer-- dan kita tampilkan username serta timernya.

    

    Untuk mengecek, kita akan masukkan usernamenya sebagai "Nadya" dan levelnya adalah level 1 yang berarti permainan akan berjalan selama 30 detik.

    Dapat dilihat di sebelah kiri dan kanan layar, sekarang terdapat username dan timer yang terus mengurang.

3. Menampilkan target dan gun sesuai pilihan pemain ke layar permainan

    Kita tampilkan dulu gunnya dengan menambahkan variabel gun dan target untuk mengambil dan menyimpan value yang dipilih pemain, lalu tambahkan juga variabel myGun sebagai komponen. Selain itu, kita juga harus menambahkan variabel myObstacles yang isinya array kosong sebagai target.

    

    Jangan lupa, setiap kita menambahkan komponen baru, harus kita update di fungsi updateGameArea.

    

    Hasilnya, gun akan tampil berdasarkan pilihan pemain di menu.

    Selanjutnya, kita buat agar target yang dipilih pemain dapat muncul secara random pada layar permainan.

    

    Kita tambahkan fungsi baru untuk membuat target muncul secara random namun tanpa tertutup gun milik pemain.

    Sekarang, kita buat agar target spawn 3 kali secara acak setiap interval 150 atau 3 detik.

    

    Terakhir, tambahkan perulangan untuk mengupdate setiap target dan kita tambahkan juga fungsi untuk menghitung interval.

    

    Berikut hasilnya.

4. Menampilkan pointer yang mengikuti cursor atau mouse milik pemain serta menambahkan logika menembak, menambah skor, dan mengurangi skor ketika menembak target. Untuk detail kecil, saya juga akan tambahkan gambar ledakan setelah pemain menembak target.

    

    Tambahkan variabel dan komponen baru dimana myGamePiece adalah komponen pointer dan boom adalah efek ledakan setelah pemain menembak.

    Tambahkan isClicking sebagai penanda apakah layar sedang / sudah di klik oleh pemain atau tidak.

    Kita tambahkan mouse controlnya agar dapat mengikuti pointer.

    Selanjutnya, di dalam fungsi component, tambahkan logika saat pemain menembak target di fungsi crashWith().

    Tambahkan seluruh kode berikut agar target menghilang ketika ditembak dan skor bertambah 5, serta efek ledakan setelah menembak, dan pengurangan skor apabila tidak menembak target (meleset).

    Tambahkan mouse controler juga agar berfungsi.

    

    Terakhir, kita update efek ledakan dan pointer yang telah kita buat.

    

    Ketika kita pilih target dari menu, maka target akan muncul sesuai dengan yang kita pilih di layar permainan.

5. Menampilkan perolehan skor milik pemain

    Seperti biasa, kita tambahkan lagi sebuah variabel baru dan komponen baru untuk skor dengan tipe text seperti username dan timer.

    Lalu tambahkan nilai awal skor yaitu 0 di myGameArea.

    Kita update skornya.

    

    Dengan begitu, pemain sudah dapat melihat perolehan skornya di layar permainan.

    

6. Tampilkan popup Game Over pada layar permainan ketika timer habis dimana didalamnya terdapat tombol Restart dan tombol Save Match. Juga terdapat tabel untuk menampilkan data match yang disimpan oleh pemain.

    Di index.html, tambahkan popup Game Over seperti berikut.

    Setelah itu, kita tambahkan sedikit bagian index.css nya.

    Lanjut ke index.js, kita tambahkan 4 fungsi baru, yaitu :

showGameOverPopup() untuk menampilkan popup Game Over.

    

saveScore() untuk menyimpan skor pemain ke local storage.

renderHistory() untuk memuat riwayat match serta menampilkan tabel riwayat match milik pemain.

    Ketika timer habis, permainan akan berhenti dan menampilkan popup Game Over pada layar. pemain dapat menyimpan skor, mengurutkan riwayat berdasarkan last match dan highest score, serta restart permainan.

- Menyimpan skor

- Mengurutkan riwayat

- Restart permainan (data inputan sebelumnya tersimpan)

    Melalui pengembangan Shooter Game ini, saya mempelajari penerapan konsep client-side programming menggunakan HTML, CSS, Bootstrap, dan JavaScript berdasarkan modul LKS tingkat provinsi. Pembelajaran ini mencakup perancangan antarmuka, pengelolaan logika permainan, interaksi pengguna, serta penyimpanan data di Local Storage. Pembelajaran ini tidak hanya digunakan sebagai simulasi pengerjaan soal LKS, tetapi juga sebagai sarana untuk memahami konsep pengembangan aplikasi web interaktif secara lebih mendalam sebagai bekal kompetensi di bidang pengembangan perangkat lunak.

    

4. Daftar Pustaka

Direktorat SMK. (2025). Technical meeting web technologies LKS Provinsi Jawa Tengah. Kementerian Pendidikan dan Kebudayaan Republik Indonesia.we