Web-Dev-For-Beginners/translations/ms/6-space-game/1-introduction

Bina Permainan Angkasa Bahagian 1: Pengenalan

Kuiz Pra-Kuliah

Kuiz pra-kuliah

Pewarisan dan Komposisi dalam pembangunan permainan

Dalam pelajaran sebelum ini, tidak banyak keperluan untuk memikirkan tentang seni bina reka bentuk aplikasi yang anda bina, kerana projek-projek tersebut berskala kecil. Walau bagaimanapun, apabila aplikasi anda berkembang dari segi saiz dan skop, keputusan seni bina menjadi lebih penting. Terdapat dua pendekatan utama untuk mencipta aplikasi yang lebih besar dalam JavaScript: komposisi atau pewarisan. Kedua-duanya mempunyai kelebihan dan kekurangan, tetapi mari kita jelaskan dalam konteks permainan.

✅ Salah satu buku pengaturcaraan paling terkenal yang pernah ditulis berkaitan dengan corak reka bentuk.

Dalam permainan, anda mempunyai objek permainan iaitu objek yang wujud di skrin. Ini bermakna mereka mempunyai lokasi dalam sistem koordinat kartesian, yang dicirikan dengan mempunyai koordinat x dan y. Apabila anda membangunkan permainan, anda akan perasan bahawa semua objek permainan anda mempunyai sifat standard, yang biasa untuk setiap permainan yang anda cipta, iaitu elemen-elemen yang:

• berasaskan lokasi Kebanyakan, jika tidak semua, elemen permainan adalah berasaskan lokasi. Ini bermakna mereka mempunyai lokasi, iaitu x dan y.
• boleh bergerak Ini adalah objek yang boleh bergerak ke lokasi baru. Biasanya ini adalah wira, raksasa atau NPC (watak bukan pemain), tetapi bukan contohnya, objek statik seperti pokok.
• boleh memusnahkan diri sendiri Objek ini hanya wujud untuk tempoh masa tertentu sebelum mereka bersedia untuk dihapuskan. Biasanya ini diwakili oleh boolean mati atau dimusnahkan yang memberi isyarat kepada enjin permainan bahawa objek ini tidak perlu lagi dipaparkan.
• tempoh bertenang 'Tempoh bertenang' adalah sifat biasa di kalangan objek jangka pendek. Contoh tipikal adalah sekeping teks atau kesan grafik seperti letupan yang hanya perlu dilihat selama beberapa milisaat.

✅ Fikirkan tentang permainan seperti Pac-Man. Bolehkah anda mengenal pasti empat jenis objek yang disenaraikan di atas dalam permainan ini?

Mengekspresikan tingkah laku

Semua yang kita terangkan di atas adalah tingkah laku yang boleh dimiliki oleh objek permainan. Jadi bagaimana kita menyandikannya? Kita boleh mengekspresikan tingkah laku ini sebagai kaedah yang dikaitkan sama ada dengan kelas atau objek.

Kelas

Idea ini adalah untuk menggunakan kelas bersama dengan pewarisan untuk menambah tingkah laku tertentu kepada kelas.

✅ Pewarisan adalah konsep penting untuk difahami. Ketahui lebih lanjut di artikel MDN tentang pewarisan.

Dinyatakan melalui kod, objek permainan biasanya kelihatan seperti ini:

//set up the class GameObject
class GameObject {
  constructor(x, y, type) {
    this.x = x;
    this.y = y;
    this.type = type;
  }
}

//this class will extend the GameObject's inherent class properties
class Movable extends GameObject {
  constructor(x,y, type) {
    super(x,y, type)
  }

//this movable object can be moved on the screen
  moveTo(x, y) {
    this.x = x;
    this.y = y;
  }
}

//this is a specific class that extends the Movable class, so it can take advantage of all the properties that it inherits
class Hero extends Movable {
  constructor(x,y) {
    super(x,y, 'Hero')
  }
}

//this class, on the other hand, only inherits the GameObject properties
class Tree extends GameObject {
  constructor(x,y) {
    super(x,y, 'Tree')
  }
}

//a hero can move...
const hero = new Hero();
hero.moveTo(5,5);

//but a tree cannot
const tree = new Tree();

✅ Luangkan beberapa minit untuk membayangkan semula wira Pac-Man (contohnya Inky, Pinky atau Blinky) dan bagaimana ia akan ditulis dalam JavaScript.

Komposisi

Cara lain untuk mengendalikan pewarisan objek adalah dengan menggunakan Komposisi. Kemudian, objek mengekspresikan tingkah laku mereka seperti ini:

//create a constant gameObject
const gameObject = {
  x: 0,
  y: 0,
  type: ''
};

//...and a constant movable
const movable = {
  moveTo(x, y) {
    this.x = x;
    this.y = y;
  }
}
//then the constant movableObject is composed of the gameObject and movable constants
const movableObject = {...gameObject, ...movable};

//then create a function to create a new Hero who inherits the movableObject properties
function createHero(x, y) {
  return {
    ...movableObject,
    x,
    y,
    type: 'Hero'
  }
}
//...and a static object that inherits only the gameObject properties
function createStatic(x, y, type) {
  return {
    ...gameObject
    x,
    y,
    type
  }
}
//create the hero and move it
const hero = createHero(10,10);
hero.moveTo(5,5);
//and create a static tree which only stands around
const tree = createStatic(0,0, 'Tree'); 

Corak mana yang patut saya gunakan?

Terserah kepada anda corak mana yang anda pilih. JavaScript menyokong kedua-dua paradigma ini.

--

Satu lagi corak yang biasa dalam pembangunan permainan menangani masalah mengurus pengalaman pengguna permainan dan prestasi.

Corak Pub/sub

✅ Pub/Sub bermaksud 'publish-subscribe'

Corak ini menangani idea bahawa bahagian-bahagian aplikasi anda yang berbeza tidak sepatutnya saling mengetahui antara satu sama lain. Kenapa begitu? Ia menjadikan lebih mudah untuk melihat apa yang sedang berlaku secara umum jika pelbagai bahagian dipisahkan. Ia juga memudahkan untuk tiba-tiba mengubah tingkah laku jika perlu. Bagaimana kita mencapainya? Kita melakukannya dengan menetapkan beberapa konsep:

• mesej: Mesej biasanya adalah rentetan teks yang disertai dengan muatan pilihan (sekeping data yang menjelaskan tentang apa mesej itu). Mesej tipikal dalam permainan boleh menjadi KEY_PRESSED_ENTER.
• penerbit: Elemen ini menerbitkan mesej dan menghantarnya kepada semua pelanggan.
• pelanggan: Elemen ini mendengar mesej tertentu dan melaksanakan beberapa tugas sebagai hasil menerima mesej ini, seperti menembak laser.

Pelaksanaannya agak kecil dari segi saiz tetapi ia adalah corak yang sangat berkuasa. Berikut adalah cara ia boleh dilaksanakan:

//set up an EventEmitter class that contains listeners
class EventEmitter {
  constructor() {
    this.listeners = {};
  }
//when a message is received, let the listener to handle its payload
  on(message, listener) {
    if (!this.listeners[message]) {
      this.listeners[message] = [];
    }
    this.listeners[message].push(listener);
  }
//when a message is sent, send it to a listener with some payload
  emit(message, payload = null) {
    if (this.listeners[message]) {
      this.listeners[message].forEach(l => l(message, payload))
    }
  }
}

Untuk menggunakan kod di atas, kita boleh mencipta pelaksanaan yang sangat kecil:

//set up a message structure
const Messages = {
  HERO_MOVE_LEFT: 'HERO_MOVE_LEFT'
};
//invoke the eventEmitter you set up above
const eventEmitter = new EventEmitter();
//set up a hero
const hero = createHero(0,0);
//let the eventEmitter know to watch for messages pertaining to the hero moving left, and act on it
eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
  hero.move(5,0);
});

//set up the window to listen for the keyup event, specifically if the left arrow is hit, emit a message to move the hero left
window.addEventListener('keyup', (evt) => {
  if (evt.key === 'ArrowLeft') {
    eventEmitter.emit(Messages.HERO_MOVE_LEFT)
  }
});

Di atas, kita menghubungkan acara papan kekunci, ArrowLeft dan menghantar mesej HERO_MOVE_LEFT. Kita mendengar mesej itu dan menggerakkan hero sebagai hasilnya. Kekuatan corak ini adalah bahawa pendengar acara dan hero tidak saling mengetahui. Anda boleh memetakan semula ArrowLeft kepada kekunci A. Selain itu, adalah mungkin untuk melakukan sesuatu yang sama sekali berbeza pada ArrowLeft dengan membuat beberapa suntingan pada fungsi on eventEmitter:

eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
  hero.move(5,0);
});

Apabila perkara menjadi lebih rumit apabila permainan anda berkembang, corak ini kekal sama dari segi kerumitan dan kod anda kekal bersih. Sangat disarankan untuk mengamalkan corak ini.

---

🚀 Cabaran

Fikirkan bagaimana corak pub-sub boleh meningkatkan permainan. Bahagian mana yang patut mengeluarkan acara, dan bagaimana permainan patut bertindak balas terhadapnya? Inilah peluang anda untuk menjadi kreatif, memikirkan permainan baru dan bagaimana bahagian-bahagiannya mungkin berkelakuan.

Kuiz Pasca-Kuliah

Kuiz pasca-kuliah

Ulasan & Kajian Kendiri

Ketahui lebih lanjut tentang Pub/Sub dengan membacanya.

Tugasan

Reka bentuk permainan

---

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.