Pertemuan 6 PWEB - Membuat Game Wordle

Nama : Kadek Fajar Pramartha Yasodana
NRP : 5025231185
Kelas : PWEB E

Membuat Game Wordle Dengan Fitur HTML 5, dan JS

Dalam tugas kali ini, setelah saya membuat website menu dengan fitur HTML 5 pada pertemuan 5, kali ini pada pertemuan 6 saya membuat sebuah game yang mirip dengan game Wordle. Anda bisa melihat source codenya dan link untuk bermain pada link dibawah ini. Fitur HTML 5 yang dipakai adalah element element tambahan seperti footer, main, dll.
Source Code : GitHub
Link Hosting Game : Vercel

Screenshot
Screenshot Menang


Screenshot Lose



index.html
Berisi DOM template agar memudahkan saat menambahkan element

script.js

Script ini akan mengontrol alurnya permainan dan mengontrol cara menambahkan dan mengurankan elemen. Permainan ini memungkinkan pemain untuk menebak kata yang dipilih secara acak dari daftar kata yang diambil dari file JSON eksternal. Berikut adalah penjelasan dari setiap bagian script:

  1. Deklarasi Elemen HTML: Script ini dimulai dengan mengambil referensi ke beberapa elemen HTML menggunakan document.getElementById. Elemen-elemen ini termasuk elemen utama (mainElement), elemen untuk menampilkan pesan kemenangan (winElement), kekalahan (loseElement), tombol ulang (retryElement), elemen untuk menampilkan pesan "enter a key" (enterAKeyElement), dan elemen untuk menampilkan kata yang benar (wordElement).
  2. Deklarasi Variabel: Beberapa variabel global dideklarasikan untuk menyimpan status permainan, seperti daftar kata (words), status apakah kata sudah dimuat (loadFinished), tahap permainan saat ini (currentStage), baris input saat ini (currentRow), kata yang dipilih (choosenWord), panjang kata (wordLength), dan array untuk menyimpan input pemain (inputs). Konstanta maxTries juga dideklarasikan untuk menentukan jumlah maksimal percobaan.
  3. Event Listener: Event listener ditambahkan untuk mendengarkan input dari keyboard (keydown) dan klik pada tombol ulang (retry). Fungsi handleKeyPress akan dipanggil saat ada input dari keyboard, dan fungsi retryLevel akan dipanggil saat tombol ulang diklik.
  4. Fungsi Utama: Fungsi main adalah fungsi utama yang memuat kata-kata dari file JSON dan memulai permainan dengan memanggil startGame.
  5. Memuat Kata-Kata: Fungsi loadWords menggunakan fetch untuk mengambil data dari file data.json, kemudian mengubahnya menjadi format JSON dan menyimpan daftar kata ke dalam variabel words. Jika terjadi kesalahan saat memuat kata, pesan kesalahan akan ditampilkan di konsol.
  6. Memulai Permainan: Fungsi startGame menginisialisasi ulang status permainan, memilih kata secara acak dari daftar kata, dan membuat baris input untuk setiap percobaan. Elemen-elemen untuk pesan kemenangan, kekalahan, tombol ulang, dan kata yang benar disembunyikan.
  7. Membersihkan Baris dan Input: Fungsi clear menghapus semua elemen baris dari DOM dan mengosongkan array rows. Fungsi clearInput mengosongkan array inputs.
  8. Memperbarui Elemen Input: Fungsi updateItems memperbarui elemen DOM untuk mencerminkan input pemain saat ini. Setiap karakter dalam input pemain akan ditampilkan di elemen yang sesuai.
  9. Mengirim Kata: Fungsi submitWord memeriksa apakah input pemain cocok dengan kata yang dipilih. Jika cocok, permainan berakhir dengan kemenangan. Jika tidak, permainan berlanjut ke baris berikutnya. Jika pemain telah mencapai jumlah percobaan maksimal tanpa menebak kata dengan benar, permainan berakhir dengan kekalahan.
  10. Menghilangkan Pesan "Enter a Key": Fungsi enterKeyFirst menghilangkan elemen pesan "enter a key" jika masih terlihat.
  11. Menangani Input Keyboard: Fungsi handleKeyPress menangani input dari keyboard. Jika pemain menekan huruf, huruf tersebut akan ditambahkan ke input saat ini. Jika pemain menekan Backspace, huruf terakhir akan dihapus. Jika pemain menekan Enter, kata saat ini akan dikirim untuk diperiksa.
  12. Mengulang Permainan: Fungsi retryLevel memulai ulang permainan dengan memanggil startGame.

Comments

Post a Comment

Popular posts from this blog

Pertemuan 13 OOP - Abstraksi & Simulasi Fox & Rabit

Image
Nama : Kadek Fajar Pramartha Yasodana NRP : 5025231185 Kelas : PBO A Abstraksi & Simulasi Fox & Rabit 1. Tuliskan implementasi dari program kecil Abstract Class Makhluk hidup yang diwariskan kepada manusia, hewan, dan tumbuhan Source Code :  GitHub Pada soal nomor ini, kita hanya perlu membuat sebuah abstract class makhluk hidup dengan beberapa metode abstrak juga. Setelah itu kita inherit classnya menjadi beberapa subclass Manusia, Hewan, dan Tumbuhan. Terdapat beberapa class seperti MakhlukHidup.java public abstract class MakhlukHidup { protected String name ; public MakhlukHidup (String name) { this . name = name ; } public abstract void doSomething () ; public abstract void grow () ; public abstract void breathe () ; } Class ini merupakan class yang sebagai template sebuah class makhluk hidup. dengan beberapa method yang harus di override oleh subclassnya yaitu doSomething, grow, dan breathe Manusia.java public class Manusia extends M...
Read more

Pertemuan 11 PWEB - Membuat Website CRUD PHP MySQL

Image
Nama : Kadek Fajar Pramartha Yasodana NRP : 5025231185 Kelas : PWEB E Membuat Website CRUD Pendaftaran Siswa PHP MySQL Untuk membuat website CRUD ini saya menggunakan php, mysql, dan beberapa tools lain yang memudahkan development seperti tailwindcss dan Docker. Docker nantinya akan digunakan untuk deployment agar hasil yang didapatkan sudah pasti. Untuk runner dari php saya menggunakan nginx dan php-fpm agar lebih standard. Source Code :  GitHub Untuk folder project terdapat beberapa folder dan file folder root : Untuk menyimpan shell code dan config lainnya folder Dockerfile : Untuk menyimpan file Docker folder public : Untuk menyimpan file php yang nantinya akan dilakukan request. nginx.conf : Config dari nginx yang akan digunakan untuk menjalankan website deploy.sh : Script untuk melakukan deploy menggunakan docker. Hasil index.php form-daftar.php list-siswa.php Melakukan Input form-update.php & Melakukan Edit id:12 Jl.Mulyosari -> jl.Denpasar Melakukan Delete id:12 API ...
Read more

Pertemuan 11 PBO - Studi Kasus Network Project (Inheritance)

Image
Nama : Kadek Fajar Pramartha Yasodana NRP : 5025231185 Kelas : PBO A Inheritance Pada kali ini saya akan melakukan modifikasi dari template latihan soal yang diberikan dengan mengikuti kriteria kriteria modifikasi dari latihan. Dalam project ini terdapat juga factory yang akan digunakan untuk membuat post yang diinginkan user menggunakan generic method. Source Code :  GitHub User import java.util.HashMap ; import java.util.HashSet ; import java.util.Set ; import java.util.UUID ; public class User { private Network network ; private String username ; private UUID id ; private HashSet<UUID> postReference ; private HashSet<UUID> commentReference ; private HashSet<UUID> followersReference ; public User () { postReference = new HashSet<>() ; } public void set (Network network , UUID id , String username) { this . id = id ; this . network = network ; this . username = username ; po...
Read more