7.3 KiB

Raw Permalink Blame History

Membangun Game Luar Angkasa Bagian 5: Skor dan Nyawa

Kuis Pra-Pelajaran

Dalam pelajaran ini, Anda akan belajar cara menambahkan skor ke dalam game dan menghitung nyawa.

Menampilkan teks di layar

Untuk dapat menampilkan skor game di layar, Anda perlu tahu cara meletakkan teks di layar. Caranya adalah dengan menggunakan metode fillText() pada objek canvas. Anda juga dapat mengontrol aspek lain seperti font yang digunakan, warna teks, dan bahkan perataan teks (kiri, kanan, tengah). Berikut adalah kode untuk menampilkan teks di layar.

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);

✅ Baca lebih lanjut tentang cara menambahkan teks ke canvas, dan jangan ragu untuk membuatnya terlihat lebih menarik!

Nyawa, sebagai konsep dalam game

Konsep nyawa dalam game hanyalah sebuah angka. Dalam konteks game luar angkasa, biasanya diberikan sejumlah nyawa yang akan berkurang satu per satu saat kapal Anda terkena serangan. Akan lebih menarik jika Anda dapat menampilkan representasi grafis seperti kapal kecil atau hati daripada hanya angka.

Apa yang akan dibuat

Mari tambahkan hal berikut ke dalam game Anda:

Skor game: Untuk setiap kapal musuh yang dihancurkan, pemain akan mendapatkan poin. Kami menyarankan 100 poin per kapal. Skor game harus ditampilkan di bagian kiri bawah.
Nyawa: Kapal Anda memiliki tiga nyawa. Anda kehilangan satu nyawa setiap kali kapal musuh bertabrakan dengan Anda. Skor nyawa harus ditampilkan di bagian kanan bawah dan menggunakan grafik berikut .

Langkah yang disarankan

Temukan file yang telah dibuat untuk Anda di sub folder your-work. Folder tersebut harus berisi:

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
-| index.html
-| app.js
-| package.json

Mulailah proyek Anda di folder your_work dengan mengetik:

cd your-work
npm start

Perintah di atas akan memulai HTTP Server pada alamat http://localhost:5000. Buka browser dan masukkan alamat tersebut. Saat ini, Anda seharusnya dapat melihat hero dan semua musuh, dan saat Anda menekan tombol panah kiri dan kanan, hero akan bergerak dan dapat menembak musuh.

Tambahkan kode

Salin aset yang diperlukan dari folder solution/assets/ ke folder your-work; Anda akan menambahkan aset life.png. Tambahkan lifeImg ke fungsi window.onload:
```
lifeImg = await loadTexture("assets/life.png");
```

Tambahkan lifeImg ke daftar aset:

let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();

Tambahkan variabel. Tambahkan kode yang merepresentasikan total skor (0) dan nyawa yang tersisa (3), lalu tampilkan skor ini di layar.

Perluas fungsi updateGameObjects(). Perluas fungsi updateGameObjects() untuk menangani tabrakan dengan musuh:

enemies.forEach(enemy => {
    const heroRect = hero.rectFromGameObject();
    if (intersectRect(heroRect, enemy.rectFromGameObject())) {
      eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
    }
  })

Tambahkan life dan points.

Inisialisasi variabel. Di bawah this.cooldown = 0 dalam kelas Hero, tetapkan nyawa dan poin:
```
this.life = 3;
this.points = 0;
```

Gambar variabel di layar. Tampilkan nilai-nilai ini di layar:

function drawLife() {
  // TODO, 35, 27
  const START_POS = canvas.width - 180;
  for(let i=0; i < hero.life; i++ ) {
    ctx.drawImage(
      lifeImg, 
      START_POS + (45 * (i+1) ), 
      canvas.height - 37);
  }
}

function drawPoints() {
  ctx.font = "30px Arial";
  ctx.fillStyle = "red";
  ctx.textAlign = "left";
  drawText("Points: " + hero.points, 10, canvas.height-20);
}

function drawText(message, x, y) {
  ctx.fillText(message, x, y);
}

Tambahkan metode ke Game loop. Pastikan Anda menambahkan fungsi ini ke fungsi window.onload di bawah updateGameObjects():
```
drawPoints();
drawLife();
```

Terapkan aturan game. Terapkan aturan game berikut:

Untuk setiap tabrakan antara hero dan musuh, kurangi satu nyawa.

Perluas kelas Hero untuk melakukan pengurangan ini:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```

Untuk setiap laser yang mengenai musuh, tambahkan skor game sebesar 100 poin.

Perluas kelas Hero untuk melakukan penambahan ini:

  incrementPoints() {
    this.points += 100;
  }

Tambahkan fungsi ini ke Collision Event Emitters:

eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
   first.dead = true;
   second.dead = true;
   hero.incrementPoints();
})

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
   enemy.dead = true;
   hero.decrementLife();
});

✅ Lakukan sedikit penelitian untuk menemukan game lain yang dibuat menggunakan JavaScript/Canvas. Apa saja ciri-ciri umum mereka?

Pada akhir pekerjaan ini, Anda seharusnya dapat melihat kapal kecil 'nyawa' di bagian kanan bawah, poin di bagian kiri bawah, dan Anda akan melihat jumlah nyawa berkurang saat Anda bertabrakan dengan musuh serta poin bertambah saat Anda menembak musuh. Kerja bagus! Game Anda hampir selesai.

🚀 Tantangan

Kode Anda hampir selesai. Bisakah Anda membayangkan langkah berikutnya?

Kuis Pasca-Pelajaran

Kuis pasca-pelajaran

Tinjauan & Studi Mandiri

Teliti beberapa cara untuk menambah dan mengurangi skor game serta nyawa. Ada beberapa mesin game menarik seperti PlayFab. Bagaimana penggunaan salah satu dari mesin ini dapat meningkatkan game Anda?

Tugas

Buat Game dengan Skor

Penafian:
Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI Co-op Translator. Meskipun kami berupaya untuk memberikan hasil yang akurat, harap diperhatikan bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang berwenang. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa penerjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini.

7.3 KiB Raw Permalink Blame History