Level 8
Pertemuan 6

DOM untuk HUD, Score, Health Bar, dan Game Interface

Menggunakan DOM untuk menampilkan game state di layar.

Score: 120 Health: 80 Level: 2

Tujuan Pembelajaran

Menggunakan getElementById dan querySelector.
Mengubah textContent dan innerHTML.
Membuat HUD dan mengupdate score display.

DOM untuk Game Interface

DOM menghubungkan data JavaScript dengan elemen HTML yang dilihat pemain.

game state
>
JavaScript
>
HTML HUD

Select Element 

              
                const scoreText = document.getElementById("score"); const healthText = document.querySelector(".health"); scoreText.textContent = "Score: 0"; healthText.textContent = "Health: 100";

HUD di HTML 

              
                <div class="hud"> <p id="score">Score: 0</p> <p class="health">Health: 100</p> </div>

Update Score Display 

              
                let score = 0; const scoreText = document.getElementById("score"); function collectCoin() { score += 10; scoreText.textContent = `Score: ${score}`; }

Activity

  1. Buat HUD HTML untuk score dan health.
  2. Select elemen dengan getElementById/querySelector.
  3. Update score saat game berjalan.
  4. Ubah health display saat player terkena damage.

Mini Quiz

Property untuk mengubah teks elemen adalah...

Output Pertemuan

Working game HUD display.