Skip to content

README.md

Latest commit

 

History

History
653 lines (526 loc) · 27.3 KB

README.md

File metadata and controls

653 lines (526 loc) · 27.3 KB

Kosmose mängu loomine Osa 1: Sissejuhatus

journey
    title Sinu Mänguarenduse Teekond
    section Alus
      Õpi mängu arhitektuuri: 3: Student
      Mõista pärimist: 4: Student
      Uuri koostist: 4: Student
    section Kommunikatsioon
      Ehita pub/sub süsteem: 4: Student
      Kujunda sündmuste voog: 5: Student
      Ühenda komponendid: 5: Student
    section Rakendus
      Loo mänguobjekte: 5: Student
      Rakenda mustreid: 5: Student
      Planeeri mängu struktuur: 5: Student
Loading

Kosmose mängu animatsioon, mis näitab mängu käiku

Nii nagu NASA missioonikontroll koordineerib mitut süsteemi kosmoselennu ajal, ehitame me kosmose mängu, mis näitab, kuidas programmi erinevad osad sujuvalt koos töötada saavad. Loo midagi, mida saad ka päriselt mängida, ja samal ajal õpid olulisi programmeerimiskontseptsioone, mis kehtivad igale tarkvaraprojektile.

Uurime kahte põhilist lähenemist koodi organiseerimisel: pärimist ja kompositsiooni. Need pole pelgalt akadeemilised mõisted – need on samad mustrid, mis juhivad kõike alates videomängudest kuni pangandussüsteemideni. Rakendame ka kommunikatsioonisüsteemi nimega pub/sub, mis töötab nagu kosmoselaevade sidevõrgustikud, võimaldades komponentidel infot jagada ilma omavahelisi sõltuvusi tekitamata.

Selle sarja lõpuks saad aru, kuidas luua rakendusi, mis võivad skaleeruda ja areneda – olgu tegemist mängude, veebirakenduste või mõne muu tarkvarasüsteemiga.

mindmap
  root((Mängu arhitektuur))
    Object Organization
      Pärandamine
      Kompositsioon
      Klasside hierarhiad
      Käitumise segamine
    Communication Patterns
      Pub/Sub süsteem
      Sündmuste saatjad
      Sõnumite edastamine
      Õhuke seotus
    Game Objects
      Omadused (x, y)
      Käitumised (liigu, põrku)
      Elutsükli haldus
      Oleku haldus
    Design Patterns
      Tehase funktsioonid
      Vaataja muster
      Komponentide süsteem
      Sündmustest juhitud arhitektuur
    Scalability
      Moodulpõhine disain
      Hooldatav kood
      Testimise strateegiad
      Jõudluse optimeerimine
Loading

Eelloengu viktoriin

Eelloengu viktoriin

Pärimine ja kompositsioon mänguarenduses

Kui projektid muutuvad keerukamaks, muutub koodi organiseerimine kriitiliseks. See, mis algab lihtsa skriptina, võib muutuda raskesti hooldatavaks ilma korraliku struktuurita – nagu Apollo missioonid nõudsid tuhandete komponentide hoolikat koordineerimist.

Uurime kahte põhilist lähenemist koodi organiseerimisel: pärimist ja kompositsiooni. Igal on erinevad eelised ning mõlema mõistmine aitab valida sobiva lähenemise erinevates olukordades. Näitame neid kontseptsioone meie kosmose mängu näitel, kus kangelased, vaenlased, võimed ja teised objektid peavad tõhusalt suhtlema.

✅ Üks kuulsamaid programmeerimisraamatuid käsitleb disainimustreid.

Igas mängus on sul mänguobjektid – interaktiivsed elemendid, mis täidavad sinu mängumaailma. Kangelased, vaenlased, võimed ja visuaalsed efektid on kõik mänguobjektid. Igaüks asub ekraanil kindlatel x ja y koordinaatidel, nagu punkti kandmine koordinaatteljel.

Hoolimata visuaalsetest erinevustest jagavad need objektid sageli põhilisi käitumisi:

  • Nad eksisteerivad kuskil – Iga objekti x ja y koordinaadid ütlevad, kus mäng seda joonistab
  • Paljud suudavad liikuda – Kangelased jooksid, vaenlased jooksevad taga, kuulid lendavad üle ekraani
  • Neil on eluiga – Mõned jäävad igaveseks, teised (näiteks plahvatused) ilmuvad lühidalt ja kaovad
  • Nad reageerivad sündmustele – Kui asjad kokku põrkuvad, võimed kogutakse, terviseribad uuenevad

✅ Mõtle mängule nagu Pac-Man. Kas suudad selles mängus tuvastada ülaltoodud nelja objekti tüüpi?

classDiagram
    class GameObject {
        +x: number
        +y: number
        +type: string
        +exists_somewhere()
    }
    
    class MovableObject {
        +liiguSiia(x, y)
        +saab_liikuda()
    }
    
    class TemporaryObject {
        +eluaeg: number
        +omab_eluaega()
    }
    
    class InteractiveObject {
        +kokkupõrkel()
        +reaktsioneerib_asjadele()
    }
    
    GameObject <|-- MovableObject
    GameObject <|-- TemporaryObject
    GameObject <|-- InteractiveObject
    
    MovableObject <|-- Hero
    MovableObject <|-- Enemy
    MovableObject <|-- Bullet
    
    TemporaryObject <|-- PowerUp
    TemporaryObject <|-- Explosion
    
    InteractiveObject <|-- Collectible
    InteractiveObject <|-- Obstacle
Loading

Käitumise väljendamine koodi kaudu

Nüüd, kui mõistad, milliseid ühiseid käitumisi mänguobjektid jagavad, uurime, kuidas neid käitumisi JavaScriptis rakendada. Objektide käitumist saab väljendada meetodite kaudu, mis on seotud kas klasside või üksikute objektidega, ja valida on mitme lähenemise vahel.

Klassipõhine lähenemine

Klassid ja pärimine pakuvad struktureeritud lähenemist mänguobjektide organiseerimiseks. Nagu Carl Linnaeuse taksonoomiline klassifikatsioonisüsteem, alustad baas-klassi omadustega ning loome spetsialiseeritud klasse, mis pärivad neid põhifunktsioone ja lisavad spetsiifilised võimed.

✅ Pärimine on oluline mõiste, mida mõista. Loe rohkem MDN artiklist pärimise kohta.

Siin on, kuidas saad mänguobjekte klasside ja pärimise abil rakendada:

// Samm 1: Loo baas GameObject klass
class GameObject {
  constructor(x, y, type) {
    this.x = x;
    this.y = y;
    this.type = type;
  }
}

Võtame selle samm-sammult lahti:

  • Loome põhitempli, mida iga mänguobjekt saab kasutada
  • Konstruktor salvestab, kus objekt asub (x, y) ja mis tüüpi see on
  • See saab aluseks, millele kõik sinu mänguobjektid toetuvad
// 2. samm: Lisa liikumisvõimalus pärimise kaudu
class Movable extends GameObject {
  constructor(x, y, type) {
    super(x, y, type); // Kutsu vanema konstruktor
  }

  // Lisa võime liikuda uude positsiooni
  moveTo(x, y) {
    this.x = x;
    this.y = y;
  }
}

Ülal kandisime ellu:

  • Laiendasime GameObject klassi, et lisada liikumisfunktsionaalsus
  • Kutsusime vanema konstruktori super() abil pärandatud omaduste initsialiseerimiseks
  • Lisatasime moveTo() meetodi, mis uuendab objekti asukohta
// Samm 3: Loo spetsiifilised mänguobjektide tüübid
class Hero extends Movable {
  constructor(x, y) {
    super(x, y, 'Hero'); // Määra tüüp automaatselt
  }
}

class Tree extends GameObject {
  constructor(x, y) {
    super(x, y, 'Tree'); // Puudel pole liikumist vaja
  }
}

// Samm 4: Kasuta oma mänguobjekte
const hero = new Hero(0, 0);
hero.moveTo(5, 5); // Kangelane saab liikuda!

const tree = new Tree(10, 15);
// tree.moveTo() tekitaks vea - puud ei saa liikuda

Nende kontseptsioonide mõistmine:

  • Loodab spetsialiseeritud objektitüüpe, mis pärivad sobivad käitumised
  • Näitab, kuidas pärimine võimaldab valida, milliseid funktsioone kaasata
  • Kuvab, et kangelased võivad liikuda, samas puuduvad puudel see võimekus
  • Illustreerib, kuidas klassihierarhia takistab sobimatuid toiminguid

✅ Võta mõni minut ja kujuta ette Pac-Man kangelast (näiteks Inky, Pinky või Blinky) ja kuidas seda JavaScriptis kirjutada.

Kompositsioonilähenemine

Kompositsioon järgib modulaarset disainifilosoofiat, sarnaselt inseneridele, kes kujundavad kosmoselaevu vahetatavate komponentidega. Läbi vanema klassi pärimise asemel kombineerid spetsiifilisi käitumisi, et luua objekt, millel on täpselt vajalikud funktsioonid. See lähenemine pakub paindlikkust ilma jäikade hierarhiliste piiranguteta.

// 1. samm: Loo baas käitumise objektid
const gameObject = {
  x: 0,
  y: 0,
  type: ''
};

const movable = {
  moveTo(x, y) {
    this.x = x;
    this.y = y;
  }
};

See kood teeb järgmist:

  • Defineerib baasmänguobjekti positsiooni ja tüübi omadustega
  • Loo eraldi movable käitumisobjekti liikumisfunktsiooniga
  • Eraldab vastutused hoides positsiooniandmed ja liikumisloogika sõltumatuna
// Samm 2: Koosta objekte, kombineerides käitumisi
const movableObject = { ...gameObject, ...movable };

// Samm 3: Loo erinevate objektitüüpide jaoks tehasefunktsioonid
function createHero(x, y) {
  return {
    ...movableObject,
    x,
    y,
    type: 'Hero'
  };
}

function createStatic(x, y, type) {
  return {
    ...gameObject,
    x,
    y,
    type
  };
}

Ülal tegime järgmist:

  • Kombineerisime baasiomadused ja liikumiskäitumise leviku süntaksi abil
  • Loomis tehasefunktsioonid, mis tagastavad kohandatud objekte
  • Võimaldas paindliku objektide loomise ilma jäikade klassihierarhiateta
  • Lubas objektidel omada täpselt vajalikke käitumisi
// Samm 4: Loo ja kasuta oma kombineeritud objekte
const hero = createHero(10, 10);
hero.moveTo(5, 5); // Töötas suurepäraselt!

const tree = createStatic(0, 0, 'Tree');
// tree.moveTo() on määratlemata - liikumiskäitumist ei loodud

Olulised punktid:

  • Komponib objekte, segades käitumisi pärimise asemel
  • Pakub suuremat paindlikkust kui jäigad pärimishierarhiad
  • Lubab objektidel olla täpselt vajalikud omadused
  • Kasutab kaasaegset JavaScripti leviku süntaksit puhtaks objektide kombineerimiseks

**Which Pattern Should You Choose?**

**Which Pattern Should You Choose?**

```mermaid
quadrantChart
    title Code Organization Patterns
    x-axis Simple --> Complex
    y-axis Rigid --> Flexible
    quadrant-1 Advanced Composition
    quadrant-2 Hybrid Approaches
    quadrant-3 Basic Inheritance
    quadrant-4 Modern Composition
    
    Class Inheritance: [0.3, 0.2]
    Interface Implementation: [0.6, 0.4]
    Mixin Patterns: [0.7, 0.7]
    Pure Composition: [0.8, 0.9]
    Factory Functions: [0.5, 0.8]
    Prototype Chain: [0.4, 0.3]

💡 Näpunäide: Mõlemal mustril on oma koht moodsa JavaScripti arenduses. Klassid sobivad hästi selgete hierarhiate jaoks, kompositsioon tõuseb esile maksimaalse paindlikkuse puhul.

Millal kumbagi kasutada:

  • Vali pärimine kui sul on selged "on-üks-..." suhted (näiteks kangelane on-üks liigutatav objekt)
  • Kasuta kompositsiooni, kui vajad "omab-" suhteid (näiteks kangelane omab liikumisvõimet)
  • Arvesta oma meeskonna eelistustega ja projekti nõuetega
  • Pea meeles, et võid sama rakenduse sees mõlemat lähenemist kombineerida

🔄 Pedagoogiline seisak

Objektide organiseerimise arusaam: Enne kommunikatsioonimustrite juurde liikumist veendu, et oskad:

  • ✅ Selgitada erinevust pärimise ja kompositsiooni vahel
  • ✅ Tuvastada, millal kasutada klasse versus tehasefunktsioone
  • ✅ Mõista, kuidas pärimisel töötab super() märksõna
  • ✅ Tunda ära iga lähenemise eeliseid mänguarenduses

Kiire enese test: Kuidas looksid lendava vaenlase, kes nii liigub kui lendab?

  • Pärimise lähenemine: class FlyingEnemy extends Movable
  • Kompositsiooni lähenemine: { ...movable, ...flyable, ...gameObject }

Tegelik maailm: Need mustrid on kõikjal:

  • React komponendid: Props (kompositsioon) vs klassipärimine
  • Mängumootorid: Entiteedi-komponendi süsteemid kasutavad kompositsiooni
  • Mobiilirakendused: UI raamistikud kasutavad sageli pärimishierarhiaid

Kommunikatsioonimustrid: Pub/Sub süsteem

Kui rakendused muutuvad keerukaks, muutub komponentidevaheline kommunikatsioon keerukaks hallata. Avaldamise- tellimise muster (pub/sub) lahendab selle probleemi, kasutades sama põhimõtet nagu raadiolainete levitus – üks saatja võib jõuda mitme vastuvõtjani ilma, et ta teaks kes kuulavad.

Mõtle, mis juhtub, kui kangelane saab vigastuse: terviseriba uuendatakse, mängitakse heliefekte, ilmub visuaalne tagasiside. Pub/sub võimaldab kangelasel avaldada "vigastuse saamine" sõnumit. Iga süsteem, mis peab reageerima, saab sellisele sõnumile tellida ja vastavalt tegutseda.

✅ Pub/Sub tähendab 'publish-subscribe' ehk avalda-telli

flowchart TD
    A[Sankari Saab Kahju] --> B[Avalda: HERO_DAMAGED]
    B --> C[Sündmuste Süsteem]
    
    C --> D[Tervise Riba Tellija]
    C --> E[Helisüsteemi Tellija]
    C --> F[Visuaalefektide Tellija]
    C --> G[Saalime Süsteemi Tellija]
    
    D --> H[Uuenda Tervise Kuvamist]
    E --> I[Mängi Kahju Heli]
    F --> J[Näita Punast Vilkumist]
    G --> K[Kontrolli Ellujäämise Saavutusi]
    
    style A fill:#ffebee
    style B fill:#e1f5fe
    style C fill:#e8f5e8
    style H fill:#fff3e0
    style I fill:#fff3e0
    style J fill:#fff3e0
    style K fill:#fff3e0
Loading

Pub/Sub arhitektuuri mõistmine

Pub/sub muster hoiab sinu rakenduse eri osad lahtiselt seotud, mis tähendab, et need võivad töötada koos ilma otseste sõltuvusteta. See lahutus teeb su koodi paremini hooldatavaks, testitavaks ja paindlikuks muutuste osas.

Olulised osalejad pub/sub-is:

  • Sõnumid – Lihtsad tekstisildid nagu 'PLAYER_SCORED', mis kirjeldavad, mis juhtus (pluss lisainfo)
  • Avaldajad – Objektid, kes hüüavad "Midagi juhtus!" kõigile, kes kuulavad
  • Tellijad – Objektid, kes ütlevad "Mind huvitab see sündmus" ja reageerivad, kui see toimub
  • Sündmuste süsteem – Vahepealne, mis tagab, et sõnumid jõuavad õigete kuulajateni

Sündmuste süsteemi loomine

Teeme lihtsa, kuid võimsa sündmuste süsteemi, mis demonstreerib neid kontseptsioone:

// Samm 1: Loo EventEmitter klass
class EventEmitter {
  constructor() {
    this.listeners = {}; // Säilita kõik sündmuste kuulajad
  }
  
  // Registreeri kuulaja konkreetse sõnumitüübi jaoks
  on(message, listener) {
    if (!this.listeners[message]) {
      this.listeners[message] = [];
    }
    this.listeners[message].push(listener);
  }
  
  // Saada sõnum kõigile registreeritud kuulajatele
  emit(message, payload = null) {
    if (this.listeners[message]) {
      this.listeners[message].forEach(listener => {
        listener(message, payload);
      });
    }
  }
}

Eraldame siin toimuvat:

  • Loodud keskne sündmuste haldussüsteem lihtsa klassi abil
  • Hoiab kuulajaid objektis, mis on korraldatud sõnumitüübi järgi
  • Registreerib uusi kuulajaid on() meetodi kaudu
  • Saadab sõnumeid kõikidele huvitatud kuulajatele emit() abil
  • Toetab valikulisi andmepakette asjakohase info edastamiseks

Kõike koos: praktiline näide

Vaatame seda toimimas! Loome lihtsa liikumissüsteemi, mis näitab, kui puhas ja paindlik pub/sub võib olla:

// Samm 1: Määratle oma sõnumitüübid
const Messages = {
  HERO_MOVE_LEFT: 'HERO_MOVE_LEFT',
  HERO_MOVE_RIGHT: 'HERO_MOVE_RIGHT',
  ENEMY_SPOTTED: 'ENEMY_SPOTTED'
};

// Samm 2: Loo oma sündmuste süsteem ja mänguobjektid
const eventEmitter = new EventEmitter();
const hero = createHero(0, 0);

See kood teeb järgmist:

  • Defineerib konstantide objekti, et vältida kirjavigu sõnuminimedes
  • Loo sündmuste emitteri instantsi kogu kommunikatsiooni haldamiseks
  • Alustab kangelase objektiga stardiasukohas
// Samm 3: Seadistage sündmuste kuulajad (tellijad)
eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
  hero.moveTo(hero.x - 5, hero.y);
  console.log(`Hero moved to position: ${hero.x}, ${hero.y}`);
});

eventEmitter.on(Messages.HERO_MOVE_RIGHT, () => {
  hero.moveTo(hero.x + 5, hero.y);
  console.log(`Hero moved to position: ${hero.x}, ${hero.y}`);
});

Ülal tegime järgmist:

  • Registreerisime sündmuste kuulajad, mis reageerivad liikumissõnumitele
  • Uuendasime kangelase positsiooni liikumissuuna põhjal
  • Lisatasime konsoolilogimise, et jälgida kangelase positsiooni muutusi
  • Eraldasime liikumisloogika sisendi käsitlemisest
// Samm 4: Ühenda klaviatuuri sisend sündmustega (väljastajad)
window.addEventListener('keydown', (event) => {
  switch(event.key) {
    case 'ArrowLeft':
      eventEmitter.emit(Messages.HERO_MOVE_LEFT);
      break;
    case 'ArrowRight':
      eventEmitter.emit(Messages.HERO_MOVE_RIGHT);
      break;
  }
});

Mõistame järgmisi kontseptsioone:

  • Ühendab klaviatuurisisendi mängusündmustega ilma tugeva sidumiseta
  • Võimaldab sisendsüsteemil mänguobjektidega kaudselt suhelda
  • Lubab mitmel süsteemil sama klaviatuurisündmusele reageerida
  • Lihtsustab klahvikomplektide muutmist või uute sisendimeetodite lisamist
sequenceDiagram
    participant User
    participant Keyboard
    participant EventEmitter
    participant Hero
    participant SoundSystem
    participant Camera
    
    User->>Keyboard: Vajutab ArrowLeft
    Keyboard->>EventEmitter: emit('HERO_MOVE_LEFT')
    EventEmitter->>Hero: Liigu vasakule 5 pikslit
    EventEmitter->>SoundSystem: Mängi sammude heli
    EventEmitter->>Camera: Jälgi kangelast
    
    Hero->>Hero: Uuenda asukohta
    SoundSystem->>SoundSystem: Mängi heli
    Camera->>Camera: Kohanda vaateakent
Loading

💡 Näpunäide: Selle mustri ilu on paindlikkus! Saad lihtsalt lisada heliefekte, ekraani värinat või osakeste efekte – lisa ainult uusi sündmuste kuulajaid, ilma et peaks olemasolevat klaviatuuri või liikumise koodi muutma.

Miks see lähenemine on suurepärane:

  • Uute funktsioonide lisamine on ülilihtne – lihtsalt kuula sind huvitavaid sündmusi
  • Mitmed asjad saavad samale sündmusele reageerida ilma segamise riskita
  • Testimine muutub märksa lihtsamaks, sest iga osa töötab iseseisvalt
  • Kui midagi katki läheb, tead täpselt, kust otsida

Miks pub/sub tõhusalt skaleerub

Pub/sub muster hoiab lihtsuse alles, kui rakendused muutuvad keerukaks. Olgu tegemist kümnete vaenlastega, dünaamilise kasutajaliidese värskendustega või helisüsteemidega – muster käitleb kasvavat ulatust ilma arhitektuurilisi muudatusi tegemata. Uued funktsioonid integreeruvad olemasolevasse sündmuste süsteemi, mõjutamata senist funktsionaalsust.

⚠️ Levinud viga: Ära loo liiga palju erisõnumi tüüpe varakult. Alusta üldistest kategooriatest ja täpsusta neid vastavalt mängu vajadustele.

Parimad praktikad:

  • Grupi seotud sõnumid loogilistesse kategooriatesse
  • Kasuta kirjelduvaid nimesid, mis selgelt näitavad, mis juhtus
  • Hoidke sõnumi andmepaketid lihtsad ja keskendunud
  • Dokumenteerige oma sõnumitüübid meeskonnatöö jaoks

🔄 Pedagoogiline seisak

Sündmustepõhise arhitektuuri mõistmine: Kontrolli oma arusaamist kogu süsteemist:

  • ✅ Kuidas pub/sub muster takistab tugevat sidumist komponentide vahel?
  • ✅ Miks on ürituspõhise arhitektuuriga lihtsam uusi funktsioone lisada?
  • ✅ Millist rolli mängib EventEmitter kommunikatsioonis?
  • ✅ Kuidas sõnumikonstandid aitavad vältida vigu ja parandavad hooldatavust?

Disain väljakutse: Kuidas lahendaksid järgmised mängustsenaariumid pub/sub abil?

  1. Vaenlane sureb: Uuenda skoori, mängi heli, genereeri võime, eemalda ekraanilt
  2. Tase lõpetatud: Peata muusika, näita kasutajaliidest, salvesta edenemine, laadi järgmine tase
  3. Võime korjatud: Paranda võimed, uuenda kasutajaliidest, mängi efekti, alusta taimerit

Professionaalne seos: See muster on olemas:

  • Eesliidese raamistikud: React/Vue sündmusesüsteemid
  • Tagatöö teenused: Mikroteenuste kommunikatsioon
  • Mängumootorid: Unity sündmuste süsteem
  • Mobiiliarendus: iOS/Android teatamissüsteemid

GitHub Copilot Agendi väljakutse 🚀

Kasuta agendi režiimi, et täita järgmine väljakutse:

Kirjeldus: Loo lihtne mänguobjektide süsteem, kasutades nii pärimist kui pub/sub mustrit. Rakenda põhimäng, kus erinevad objektid saavad sündmuste kaudu omavahel suhelda ilma, et tunneksid otseselt üksteist.

Päring: Loo JavaScripti mängusüsteem järgmiste nõuetega: 1) Loo baas GameObject klass, millel on x, y koordinaadid ja tüübiväli. 2) Loo Hero klass, mis pärib GameObjecti ja saab liikuda. 3) Loo Enemy klass, mis pärib GameObjecti ja suudab kangelast taga ajada. 4) Rakenda EventEmitter klass pub/sub mustri jaoks. 5) Sea sündmuste kuulajad nii, et kui kangelane liigub, saavad lähistel olevad vaenlased sündmuse 'HERO_MOVED' ning uuendavad oma asukohta liikudes kangelas poole. Lisa konsoolilogid, mis näitavad objektidevahelist suhtlust.

Loe rohkem agendi režiim kohta siin.

🚀 Väljakutse

Kaaluge, kuidas pub-sub muster saab täiustada mängu arhitektuuri. Määrake, millised komponendid peaksid sündmusi genereerima ja kuidas süsteem peaks neile reageerima. Mõelge välja mängukontseptsioon ja kaardistage selle komponentidevahelised suhtlemismustrid.

Loengu järeltest

Loengu järeltest

Ülevaade ja iseõpe

Õppige Pub/Sub kohta rohkem, lugedes sellest.

⚡ Mida saate teha järgmise 5 minutiga

  • Avage mõni HTML5 mäng veebis ja uurige selle koodi DevToolsi abil
  • Looge lihtne HTML5 Canvas element ja joonistage põhiline kuju
  • Katsetage setInterval kasutamist lihtsa animatsiooniloopi loomiseks
  • Uurige Canvas API dokumentatsiooni ja proovige mõnda joonistamismeetodit

🎯 Mida saate selle tunni jooksul saavutada

  • Täitke loengu järgne test ja mõistke mänguarenduse kontseptsioone
  • Määrake oma mänguprojekti struktuur HTML-, CSS- ja JavaScripti failidega
  • Looge põhjalik mängutsükkel, mis uuendab ja renderdab pidevalt
  • Joonistage oma esimesed mängusprite'id canvasele
  • Tehke lihtne varade laadimine piltide ja helide jaoks

📅 Teie nädala pikkune mänguloomisülesanne

  • Valmis täielik kosmose-mäng kõigi planeeritud funktsioonidega
  • Lisage lihvitud graafika, heliefektid ja sujuvad animatsioonid
  • Rakendage mängu olekud (alguskuva, mäng, mängu lõpp)
  • Looge skoorisüsteem ja mängija edenemise jälgimine
  • Muutke mäng reageerivaks ja ligipääsetavaks erinevates seadmetes
  • Jagage oma mängu veebis ja koguge tagasisidet mängijatelt

🌟 Teie kuu pikkune mänguarendus

  • Arendage mitu mänge, uurides erinevaid žanre ja mehhaanikat
  • Õppige mänguarendusraamistikku, näiteks Phaser või Three.js
  • Andke panus avatud lähtekoodiga mänguarendusprojektidesse
  • Valmistuge õppima edasijõudnud mänguprogrammeerimise mustreid ja optimeerimist
  • Looge portfoolio, mis demonstreerib teie mänguarenduse oskusi
  • Mentorige teisi, kes on huvitatud mänguarendusest ja interaktiivsest meediast

🎯 Teie mänguarendusmeistrivõistluste ajakava

timeline
    title Mängu arhitektuuri õppimise areng
    
    section Objektimustrid (20 minutit)
        Koodi organiseerimine: Klassipärand
                             : Kompositsioonimustrid
                             : Tegurfunktsioonid
                             : Käitumise segamine
        
    section Kommunikatsioonisüsteemid (25 minutit)
        Sündmuste arhitektuur: Pub/Sub rakendus
                            : Sõnumite kujundus
                            : Sündmuse käivitajad
                            : Laisk sidumine
        
    section Mängu objekti disain (30 minutit)
        Entiteedisüsteemid: Omaduste haldus
                          : Käitumise kompositsioon
                          : Oleku haldus
                          : Elutsükli haldus
        
    section Arhitektuuri mustrid (35 minutit)
        Süsteemi disain: Komponendi süsteemid
                       : Observer muster
                       : Käskude muster
                       : Oleku masinad
        
    section Arendatud kontseptsioonid (45 minutit)
        Skaalautuv arhitektuur: Jõudluse optimeerimine
                               : Mälu haldus
                               : Mooduldisain
                               : Testimise strateegiad
        
    section Mängumootori kontseptsioonid (1 nädal)
        Professionaalne areng: Stseenide graafikud
                             : Ressursside haldus
                             : Renderdamise torujuhtmed
                             : Füüsika integreerimine
        
    section Raamistiku valdamine (2 nädalat)
        Moodne mänguarendus: React mängumustrid
                           : Canvas optimeerimine
                           : WebGL põhialused
                           : PWA mängud
        
    section Tööpraktikad (1 kuu)
        Professionaalsed oskused: Meeskonnatöö
                              : Koodi ülevaatused
                              : Mängudisaini mustrid
                              : Jõudluse profilimine
Loading

🛠️ Teie mängu arhitektuuri tööriistakasti kokkuvõte

Pärast selle õppetunni lõpetamist on teil:

  • Disainimustri valdamine: Pärimise ja kompositsiooni kompromisside mõistmine
  • Sündmustepõhine arhitektuur: Pub/sub rakendamine skaleeritava suhtluse jaoks
  • Objekti-orienteeritud disain: Klasside hierarhiad ja käitumise kompositsioon
  • Moodne JavaScript: Tegutsemisfunktsioonid, spreadi süntaks ja ES6+ mustrid
  • Skaleeritav arhitektuur: Lahtise sidumise ja mooduldisaini põhimõtted
  • Mänguarenduse alus: Entiteedi süsteemid ja komponendi mustrid
  • Professionaalsed mustrid: Töö tööstusharu-koodi organiseerimise lähenemised

Tegeliku maailma rakendused: Need mustrid kehtivad otse:

  • Eesliideseraamistikud: React/Vue komponendi arhitektuur ja olekute haldamine
  • Tagaplaaniteenused: Mikroteenuste suhtlus ja sündmustepõhised süsteemid
  • Mobiiliarendus: iOS/Android rakenduste arhitektuur ja teavitussüsteemid
  • Mängumootorid: Unity, Unreal ja veebipõhine mänguarendus
  • Ettevõttesüsteemid: Sündmuste allikad ja hajutatud süsteemide disain
  • API disain: RESTful teenused ja reaalajas suhtlus

Omandatud professionaalsed oskused: Te oskate nüüd:

  • Disainida skaleeritavaid tarkvaraarhitektuure kasutades tõestatud mustreid
  • Rakendada sündmustepõhiseid süsteeme keerukate interaktsioonide haldamiseks
  • Valida sobiva koodi organiseerimise strateegia erinevate stsenaariumite jaoks
  • Siluda ja hooldada lahtise sidumisega süsteeme tõhusalt
  • Suhelda tehnilisi otsuseid tööstusharu standardite terminoloogiaga

Järgmine tase: Olete valmis neid mustreid rakendama pärismängus, uurima arenenumat mänguarendust või kasutama neid arhitektuurikontsepte veebirakendustes!

🌟 Saavutuse avamine: Olete valdanud fundamentaalsed tarkvaraarhitektuuri mustrid, mis jõustavad kõike alates lihtsatest mängudest kuni keerukate ettevõttesüsteemideni!

Kodune ülesanne

Mock up a game

Loaandmine:
See dokument on tõlgitud kasutades tehisintellekti tõlke teenust Co-op Translator. Kuigi me püüame tagada täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument oma emakeeles tuleks lugeda autoriteetseks allikaks. Olulise info puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti mõistmiste eest.