History

Lee Stott 2daab5271b Update Quiz Link		3 weeks ago
..
solution	🌐 Update translations via Co-op Translator	3 weeks ago
your-work	🌐 Update translations via Co-op Translator	3 weeks ago
README.md	Update Quiz Link	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	3 weeks ago

README.md

Bina Permainan Angkasa Bahagian 5: Skor dan Nyawa

Kuiz Pra-Kuliah

Kuiz pra-kuliah

Dalam pelajaran ini, anda akan belajar cara menambah skor dalam permainan dan mengira nyawa.

Paparkan teks di skrin

Untuk memaparkan skor permainan di skrin, anda perlu tahu cara meletakkan teks di skrin. Jawapannya adalah dengan menggunakan kaedah fillText() pada objek kanvas. Anda juga boleh mengawal aspek lain seperti jenis fon yang digunakan, warna teks, dan penjajaran (kiri, kanan, tengah). Di bawah adalah kod untuk memaparkan teks di skrin.

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

✅ Baca lebih lanjut tentang cara menambah teks ke kanvas, dan jangan ragu untuk menjadikannya lebih menarik!

Nyawa, sebagai konsep permainan

Konsep nyawa dalam permainan hanyalah satu nombor. Dalam konteks permainan angkasa, adalah biasa untuk menetapkan beberapa nyawa yang akan berkurang satu demi satu apabila kapal anda mengalami kerosakan. Adalah lebih menarik jika anda boleh memaparkan representasi grafik seperti kapal kecil atau hati berbanding hanya nombor.

Apa yang perlu dibina

Mari tambahkan perkara berikut ke dalam permainan anda:

Skor permainan: Untuk setiap kapal musuh yang dimusnahkan, wira anda sepatutnya mendapat mata, kami mencadangkan 100 mata untuk setiap kapal. Skor permainan perlu dipaparkan di bahagian bawah kiri.
Nyawa: Kapal anda mempunyai tiga nyawa. Anda akan kehilangan satu nyawa setiap kali kapal musuh bertembung dengan anda. Skor nyawa perlu dipaparkan di bahagian bawah kanan dan menggunakan grafik berikut .

Langkah yang disyorkan

Cari fail-fail yang telah disediakan untuk anda dalam sub folder your-work. Ia sepatutnya mengandungi perkara berikut:

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

Mulakan projek anda dalam folder your_work dengan menaip:

cd your-work
npm start

Arahan di atas akan memulakan HTTP Server pada alamat http://localhost:5000. Buka pelayar dan masukkan alamat tersebut, buat masa ini ia sepatutnya memaparkan wira dan semua musuh, dan apabila anda menekan anak panah kiri dan kanan, wira akan bergerak dan boleh menembak musuh.

Tambah kod

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

Tambahkan lifeImg ke senarai aset:

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

Tambah pembolehubah. Tambahkan kod yang mewakili jumlah skor anda (0) dan nyawa yang tinggal (3), paparkan skor ini di skrin.

Kembangkan fungsi updateGameObjects(). Kembangkan fungsi updateGameObjects() untuk mengendalikan perlanggaran musuh:

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

Tambah life dan points.

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

Paparkan pembolehubah di skrin. Paparkan nilai-nilai ini di skrin:

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);
}

Tambah kaedah ke Gelung Permainan. Pastikan anda menambah fungsi-fungsi ini ke fungsi window.onload di bawah updateGameObjects():
```
drawPoints();
drawLife();
```

Laksanakan peraturan permainan. Laksanakan peraturan permainan berikut:

Untuk setiap perlanggaran wira dan musuh, tolak satu nyawa.

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

Untuk setiap laser yang mengenai musuh, tambahkan 100 mata ke skor permainan.

Kembangkan kelas Hero untuk melaksanakan penambahan ini:

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

Tambahkan fungsi-fungsi ini ke Collision Event Emitters anda:

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 penyelidikan untuk mengetahui permainan lain yang dicipta menggunakan JavaScript/Canvas. Apakah ciri-ciri umum mereka?

Pada akhir kerja ini, anda sepatutnya dapat melihat kapal kecil 'nyawa' di bahagian bawah kanan, mata di bahagian bawah kiri, dan anda akan melihat jumlah nyawa berkurang apabila anda bertembung dengan musuh dan mata bertambah apabila anda menembak musuh. Syabas! Permainan anda hampir siap.

🚀 Cabaran

Kod anda hampir siap. Bolehkah anda membayangkan langkah seterusnya?

Kuiz Pasca-Kuliah

Kuiz pasca-kuliah

Ulasan & Kajian Kendiri

Selidik beberapa cara untuk menambah dan mengurangkan skor permainan dan nyawa. Terdapat beberapa enjin permainan menarik seperti PlayFab. Bagaimana penggunaan salah satu daripadanya dapat meningkatkan permainan anda?

Tugasan

Bina Permainan Skor

Penafian:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI Co-op Translator. Walaupun kami berusaha untuk memastikan ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat yang kritikal, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.