Skip to content

README.md

Latest commit

 

History

History
501 lines (394 loc) · 19.9 KB

README.md

File metadata and controls

501 lines (394 loc) · 19.9 KB

Ehita kosmose mäng Osa 5: Skoreerimine ja Elud

journey
    title Sinu mängudisaini teekond
    section Mängijate tagasiside
      Mõista punktisüsteemi psühholoogiat: 3: Student
      Õpi visuaalset kommunikatsiooni: 4: Student
      Kujunda tasusüsteemid: 4: Student
    section Tehniline teostus
      Canvas teksti kuvamine: 4: Student
      Oleku haldus: 5: Student
      Sündmustel põhinevad uuendused: 5: Student
    section Mängu viimistlemine
      Kasutajakogemuse disain: 5: Student
      Tasakaalusta väljakutset ja tasu: 5: Student
      Loo kaasahaarav mängukäik: 5: Student
Loading

Eel-loengu viktoriin

Eel-loengu viktoriin

Oled valmis panema oma kosmosemängu tõeliselt mänguliseks? Lisame punktisüsteemi ja elu haldamise - põhimehhaanika, mis muutis varased arcade-mängud nagu Space Invaders lihtsatest demonstratsioonidest sõltuvust tekitavaks meelelahutuseks. Siin hakkab su mäng tõeliselt mängitavaks muutuma.

mindmap
  root((Mängu tagasiside süsteemid))
    Visuaalne kommunikatsioon
      Teksti renderdamine
      Ikoonide kuvamine
      Värvide psühholoogia
      Layout'i disain
    Punktide mehhaanikad
      Punktiväärtused
      Tasude ajastus
      Edusammude jälgimine
      Saavutussüsteemid
    Eluhaldus
      Risk vs tasu
      Mängija agentuur
      Raske tasakaal
      Taastumise mehhaanikad
    Kasutajakogemus
      Kohene tagasiside
      Selge info
      Emotsionaalne vastus
      Pühendumistsüklid
    Rakendamine
      Canvas API
      Staadi haldus
      Sündmussüsteemid
      Jõudlus
Loading

Teksti joonistamine ekraanile - sinu mängu hääl

Skoori kuvamiseks peame õppima, kuidas teksti canvas'ele joonistada. fillText() meetod on sinu peamine tööriist - sama tehnika, mida kasutati klassikalistes arcade-mängudes skoori ja staatuse kuvamiseks.

flowchart LR
    A["📝 Teksti sisu"] --> B["🎨 Stiilimine"]
    B --> C["📍 Paigutus"]
    C --> D["🖼️ Lõuendi renderdamine"]
    
    E["Kiri"] --> B
    F["Fondisuurus"] --> B
    G["Värv"] --> B
    H["Joondus"] --> B
    
    I["X koordinaat"] --> C
    J["Y koordinaat"] --> C
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
Loading

Sul on täielik kontroll teksti välimuse üle:

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

✅ Süvene lähemalt teksti lisamisse canvas'ele – võid üllatuda, kui loominguline saad olla fontide ja stiilidega!

Elud - rohkem kui lihtsalt number

Mängudisainis tähistab "elu" mängija eksimisruumi. See kontseptsioon pärineb flipperimängudest, kus said mängida mitme palliga. Varastes videomängudes nagu Asteroids andsid elud mängijale loa riske võtta ja vigadest õppida.

flowchart TD
    A["🎮 Mängija tegevus"] --> B{"Riskide hindamine"}
    
    B --> C["Kõrge risk, kõrge tasu"]
    B --> D["Ohutu strateegia"]
    
    C --> E{"Tulemus"}
    D --> F["Stabiilne edenemine"]
    
    E -->|Õnnestumine| G["🏆 Suured punktid"]
    E -->|Ebaõnnestumine| H["💔 Kaota elu"]
    
    H --> I{"Elud alles?"}
    I -->|Jah| J["🔄 Proovi uuesti"]
    I -->|Ei| K["💀 Mäng läbi"]
    
    J --> B
    G --> B
    F --> B
    
    style C fill:#ffebee
    style D fill:#e8f5e8
    style G fill:#e3f2fd
    style H fill:#fff3e0
Loading

Visuaalne esitlus on väga oluline – laevaikoonide kuvamine selle asemel, et lihtsalt öelda "Elud: 3", loob kohe visuaalse äratundmise, nagu varased arcade-aparaadid kasutasid ikoonide abil suhtlemiseks keeltest üle.

Ehita oma mängu tasustamissüsteem

Nüüd rakendame põhifunktsioonid, mis hoiavad mängijaid kaasatud:

sequenceDiagram
    participant Player
    participant GameEngine
    participant ScoreSystem
    participant LifeSystem
    participant Display
    
    Player->>GameEngine: Tulistab vaenlast
    GameEngine->>ScoreSystem: Annab punkte
    ScoreSystem->>ScoreSystem: +100 punkti
    ScoreSystem->>Display: Uuenda skoori
    
    Player->>GameEngine: Puudutab vaenlast
    GameEngine->>LifeSystem: Kaotab elu
    LifeSystem->>LifeSystem: -1 elu
    LifeSystem->>Display: Uuenda elusid
    
    alt Elud > 0
        LifeSystem->>Player: Jätka mängimist
    else Elud = 0
        LifeSystem->>GameEngine: Mäng läbi
    end
Loading
  • Skoorisüsteem: Iga hävitatud vaenlase laev annab 100 punkti (ümarad numbrid on mängijatele kergemini vaimselt arvutatavad). Skoor kuvatakse vasakus alanurgas.
  • Elude lugur: Sinu kangelane alustab kolme eluga - see on varaste arcade-mängude poolt kehtestatud standard mängimise väljakutse ja tasakaalu jaoks. Iga kokkupõrge vaenlasega maksab ühe elu. Jääke näitame paremas alanurgas laevaikoonidega elu pilt.

Hakame ehitama!

Kõigepealt seadista oma tööruum. Liigu vahekausta your-work ja peaksid nägema järgmisi faile:

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

Mängu testimiseks käivita arendusserver kaustast your_work:

cd your-work
npm start

See käivitab kohaliku serveri aadressil http://localhost:5000. Ava see oma brauseris, et oma mängu näha. Testi juhtnuppe nooleklahvidega ja proovi vaenlasi tulistada, et veenduda, et kõik töötab.

flowchart TD
    A["1. Varade laadimine"] --> B["2. Mängu muutujad"]
    B --> C["3. Kokkupõrke tuvastamine"]
    C --> D["4. Kangelase täiustamine"]
    D --> E["5. Kuvamisfunktsioonid"]
    E --> F["6. Sündmuste käsitlejad"]
    
    G["Eluikooni pilt"] --> A
    H["Punktide ja elude jälgimine"] --> B
    I["Kangelase-vaenlase lõiked"] --> C
    J["Punktide ja elude meetodid"] --> D
    K["Teksti ja ikooni joonistamine"] --> E
    L["Tasu ja karistuse loogika"] --> F
    
    F --> M["🎮 Täielik mäng"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1
    style F fill:#fce4ec
    style M fill:#e1f5fe
Loading

Aeg kodeerimiseks!

  1. Hangi vajalikud visuaalsed ressursid. Kopeeri life.png fail kaustast solution/assets/ oma your-work kausta. Seejärel lisa lifeImg oma window.onload funktsiooni:

    lifeImg = await loadTexture("assets/life.png");

  2. Ära unusta lisada lifeImg oma varade nimekirja:

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

  3. Seadista mängu muutujad. Lisa kood, mis jälgib sinu koguskoori (alustades 0-st) ja järelejäänud elusid (alustades 3). Kuvame need ekraanil, et mängijad teaksid alati oma seisukohta.

  4. Rakenda kokkupõrke tuvastus. Laienda oma updateGameObjects() funktsiooni, et tuvastada, millal vaenlased põrkuvad sinu kangelasega:

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

  5. Lisa elu ja punktide jälgimine oma Kangelasele.

    1. Algata loendurid. Pane this.cooldown = 0 alusel Hero klassis elude ja punktide initsialiseerimine:

      this.life = 3;
this.points = 0;

    2. Näita neid väärtusi mängijale. Loo funktsioonid, mis joonistavad need väärtused ekraanile:

      function drawLife() {
  // TEHA, 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);
}

    3. Ühenda kõik oma mängutsükliga. Lisa need funktsioonid window.onload funktsiooni kohe pärast updateGameObjects() kutsumist:

      drawPoints();
drawLife();

🔄 Pedagoogiline kontrollpunkt

Mängudisaini mõistmine: Enne tagajärgede rakendamist veendu:

  • ✅ Kuidas visuaalne tagasiside suhtleb mängija seisundiga
  • ✅ Miks on kasutajaliidese elementide järjepidev asetamine oluline kasutusmugavuse jaoks
  • ✅ Punktiväärtuste ja elude haldamise psühholoogia
  • ✅ Kuidas canvas teksti renderdamine erineb HTML tekstist

Kiire enesetest: Miks kasutavad arcade-mängud tavaliselt ümaraid numbreid punktide vormistamiseks?
Vastus: Ümarad numbrid on mängijatele vaimselt kergemini arvutatavad ja loovad rahuldust pakkuva psühholoogilise preemia

Kasutajakogemuse põhimõtted: Rakendad nüüd:

  • Visuaalne hierarhia: Oluline info on nähtavalt esitatud
  • Kohene tagasiside: Mängija tegevustest reaalajas värskendused
  • Kognitiivne koormus: Lihtne ja selge info esitlus
  • Emotsionaalne disain: Ikoonid ja värvid, mis loovad mängijaga sideme

  1. Rakenda mängu tagajärjed ja tasud. Lisame nüüd tagasisidesüsteemid, mis teevad mängija tegevused tähendusrikkaks:

    1. Kokkupõrked maksavad elusid. Iga kord, kui sinu kangelane põrkab vaenlasega, kaotad ühe elu.

      Lisa see meetod oma Hero klassile:

      decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}

    2. Vaenlaste tulistamine annab punkte. Iga edukas tabamus annab 100 punkti, pakkudes kohest positiivset tagasisidet täpsele tulistamisele.

      Laienda oma Hero klassi selle punktide suurendamise meetodiga:

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

      Nüüd ühenda need funktsioonid oma kokkupõrke sündmustega:

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

✅ Huvitab, milliseid teisi mänge on JavaScripti ja Canvas'iga tehtud? Uuri ringi - võid olla üllatunud, kui palju on võimalik!

Pärast nende funktsioonide rakendamist testi oma mängu täieliku tagasisidesüsteemi nägemiseks tegevuses. Peaksid nägema elu ikoone paremas alanurgas, oma skoori vasakus alanurgas ja jälgima, kuidas kokkupõrked vähendavad elusid, samal ajal kui edukad tabamised suurendavad skoori.

Sinu mängul on nüüd põhimehhaanika, mis muutsid varased arcade-mängud niivõrd kaasahaaravaks - selged eesmärgid, kohene tagasiside ja tähenduslikud tagajärjed mängija tegevustele.

🔄 Pedagoogiline kontrollpunkt

Täielik mängudisaini süsteem: Kontrolli oma mängijat tagasiside süsteemide valdamist:

  • ✅ Kuidas skoorimehhaanika loob mängijale motivatsiooni ja kaasatust?
  • ✅ Miks on visuaalne järjepidevus kasutajaliidese disaini jaoks oluline?
  • ✅ Kuidas elusüsteem tasakaalustab väljakutset ja mängija hoidmist?
  • ✅ Millist rolli mängib kohene tagasiside rahuldustpakkuva mängukogemuse loomisel?

Süsteemi integratsioon: Sinu tagasisidesüsteem demonstreerib:

  • Kasutajakogemuse disain: Selge visuaalne kommunikatsioon ja infohierarhia
  • Sündmustepõhine arhitektuur: Mängija tegevustele reageerivad uuendused
  • Seisundi haldus: Dünaamilise mänguinfo jälgimine ja kuvamine
  • Canvase valdamine: Teksti renderdamine ja sprite’ide positsioneerimine
  • Mängu psühholoogia: Mängija motivatsiooni ja kaasatuse mõistmine

Professionaalsed mustrid: Oled rakendanud:

  • MVC arhitektuur: Mänguloogika, andmete ja esituse eraldamine
  • Observer muster: Sündmustepõhised uuendused mänguoleku muutustele
  • Komponentide disain: Taaskasutatavad funktsioonid renderdamiseks ja loogikaks
  • Tõhususe optimeerimine: Efektiivne renderdamine mängutsüklites

⚡ Mida saad teha järgmise 5 minutiga

  • Katseta erinevate fontide suuruste ja värvidega skoori kuvamisel
  • Muuda punktiarve ja vaata, kuidas see mängutunnetust mõjutab
  • Lisa console.log laused punktide ja elude muutuste jälgimiseks
  • Testi äärmuslikke juhtumeid, näiteks elude lõppemist või kõrget skoori

🎯 Mida saad selle tunni jooksul saavutada

  • Täida post-õppe viktoriin ja mõista mängudisaini psühholoogiat
  • Lisa heliefektid skoorimiseks ja elude kaotamiseks
  • Rakenda kõrge skoori süsteem localStorage kasutades
  • Loo erinevate vaenlaste tüüpide jaoks erinevad punktisummad
  • Lisa visuaalsed efektid nagu ekraani värin elu kaotamisel

📅 Sinu nädalane mängudisaini teekond

  • Viimiusta kosmosemäng täpsete tagasisidesüsteemidega
  • Rakenda edasijõudnud skoorimehhaanikaid nagu kombomultiplierid
  • Lisa saavutusi ja avatud sisu
  • Loo raskusastme progresseerumise ja tasakaalu süsteemid
  • Kujunda kasutajaliidesed menüüdele ja mängu lõppkuvadele
  • Õpi teistelt mängudelt nende kaasatusmehhanisme

🌟 Sinu kuuajaline mänguarenduse meistritase

  • Ehita täismahus mänge keerukate progresseerumise süsteemidega
  • Õpi mänguanalüütikat ja mängijate käitumise mõõtmist
  • Panusta avatud lähtekoodiga mänguarendusprojektidesse
  • Valda edasijõudnud mängudisaini mustreid ja monetiseerimist
  • Loo hariduslikku sisu mängudisaini ja kasutajakogemuse kohta
  • Koosta portfoolio, mis näitab mängudisaini ja arendusoskusi

🎯 Sinu mängudisaini meistritabel

timeline
    title Mängudisaini ja mängijate tagasiside õppimise areng
    
    section Alused (10 minutit)
        Visuaalne kommunikatsioon: Teksti kuvamine
                           : Ikooni disain
                           : Kujundusprintsiibid
                           : Värvide psühholoogia
        
    section Mängija psühholoogia (20 minutit)
        Motivatsioonisüsteemid: Punktiväärtused
                          : Risk vs tasu
                          : Edusammude tagasiside
                          : Saavutuste disain
        
    section Tehniline teostus (30 minutit)
        Kanvaasimeisterlikkus: Teksti positsioneerimine
                      : Sprite'i kuvamine
                      : Seisundi haldamine
                      : Jõudluse optimeerimine
        
    section Mängu tasakaalustamine (40 minutit)
        Raskusastme disain: Elude haldamine
                         : Punktiskoori kõverad
                         : Mängijate hoidmine
                         : Juurdepääsetavus
        
    section Kasutajakogemus (50 minutit)
        Liidese disain: Infovõimaluste hierarhia
                        : Reageeriv tagasiside
                        : Emotsionaalne disain
                        : Kasutatavuse testimine
        
    section Täiustatud süsteemid (1 nädal)
        Mängumehaanika: Arengusüsteemid
                      : Analüütika integreerimine
                      : Monetiseerimise disain
                      : Kogukonna funktsioonid
        
    section Tööstusharu oskused (1 kuu)
        Professionaalne areng: Meeskonnatöö
                                : Disainidokumentatsioon
                                : Mängijauuringud
                                : Platvormi optimeerimine
Loading

🛠️ Sinu mängudisaini tööriistakast kokkuvõte

Pärast selle õppetunni lõpetamist valdad nüüd:

  • Mängija psühholoogia: Motivatsiooni mõistmine, riskide ja tasude mehhanismid ning kaasatusening
  • Visuaalne kommunikatsioon: Tõhus UI disain teksti, ikoonide ja paigutusega
  • Tagasisidesüsteemid: Mängija tegevustele ja sündmustele reaalajas reageerimine
  • Seisundihaldus: Dünaamilise mänguandmete jälgimine ja efektiivne kuvamine
  • Canvase tekstirenderdus: Professionaalne tekst kuvamine stiili ja positsioneerimisega
  • Sündmuste integratsioon: Kasutaja tegevuste ühendamine tähenduslike mängu tagajärgedega
  • Mängu tasakaal: Väljakutsete kõverate ja mängijate progresseerumise süsteemide disain

Tegelikud rakendused: Sinu mängudisaini oskused sobivad otse:

  • Kasutajaliidese disain: Köitvate ja intuitiivsete liideste loomine
  • Tootearendus: Kasutajamotivatsiooni ja tagasiside mehhanismide mõistmine
  • Haridustehnoloogia: Gamifikatsioon ja õppimise kaasatavuse süsteemid
  • Andmete visualiseerimine: Keeruka info kättesaadavaks ja kaasahaaravaks muutmine
  • Mobiilirakenduste arendus: Säilituse mehhanismid ja kasutajakogemuse disain
  • Turundustehnoloogia: Kasutajakäitumise ja konversiooni optimeerimise mõistmine

Omandatud professionaalsed oskused: Sa oskad nüüd:

  • Disainida kasutajakogemusi, mis motiveerivad ja kaasavad kasutajaid
  • Rakendada tagasisidesüsteeme, mis juhivad kasutajate käitumist tõhusalt
  • Tasakaalustada väljakutset ja ligipääsetavust interaktiivsetes süsteemides
  • Luuа visuaalset kommunikatsiooni, mis toimib eri kasutajarühmade seas
  • Analüüsida kasutajakäitumist ja täiustada disaini iteratiivselt

Valda mänguarenduse põhimõisteid:

  • Mängija motivatsioon: Mõista, mis juhib kaasatust ja hoidmist
  • Visuaalne disain: Loo selge, atraktiivne ja funktsionaalne liides
  • Süsteemi integratsioon: Ühenda mitu mängusüsteemi sujuvaks kogemuseks
  • Tõhususe optimeerimine: Efektiivne renderdamine ja seisundihaldus
  • Ligipääsetavus: Kujunda erinevate oskustega ja vajadustega mängijatele

Järgmine tase: Oled valmis uurima edasijõudnud mängudisaini mustreid, rakendama analüütikasüsteeme või õppima mängude monetiseerimise ja mängijate hoidmise strateegiaid!

🌟 Saavutuse saavutamine: Oled ehitanud täieliku mängija tagasisidesüsteemi professionaalsete mängudisaini põhimõtetega!

GitHub Copiloti agendi väljakutse 🚀

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

Kirjeldus: Täienda kosmose mängu skoorisüsteemi kõrgete skooride funktsiooniga, mis kasutab püsivat salvestust ja boonuspunktide mehhanisme.

Prompt: Loo kõrge skoori süsteem, mis salvestab mängija parima skoori localStorage'i. Lisa boonuspunkte järjestikuste vaenlaste tapmise eest (kombo süsteem) ja rakenda erinevaid punktiväärtusi erinevate vaenlaste tüüpidele. Näita visuaalset indikaatorit, kui mängija saavutab uue kõrge skoori, ning kuva praegust kõrget skoori mängu ekraanil.

🚀 Väljakutse

Sul on nüüd toimiv mäng skoorimise ja eludega. Mõtle, millised täiendavad funktsioonid võiksid mängijakogemust parandada.

Järgmisel viktoriinil

Järgnev viktoriin

Kordamine & iseseisev õpe

Tahad rohkem avastada? Uuri erinevaid lähenemisi skooride ja elusüsteemide loomisel. Seal on põnevaid mängumootoreid nagu PlayFab, mis haldavad skoorimist, edetabeleid ja mängijate progresseerumist. Kuidas võiks sellise süsteemi integreerimine viia sinu mängu uuele tasemele?

Kodune ülesanne

Ehita skoorimäng

Vastutühendus:
See dokument on tõlgitud kasutades tehisintellektil põhinevat tõlketeenust Co-op Translator. Kuigi püüame tagada täpsust, tuleb arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument oma algkeeles tuleks pidada autoriteetseks allikaks. Kriitilise teabe puhul on soovitatav kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või väärinterpretatsioonide eest.