Web-Dev-For-Beginners/translations/sl/6-space-game/5-keeping-score

Ustvari vesoljsko igro, del 5: Točkovanje in življenja

journey
    title Vaša Pot v Oblikovanju Iger
    section Povratne informacije igralcev
      Razumevanje psihologije ocenjevanja: 3: Student
      Učenje vizualne komunikacije: 4: Student
      Oblikovanje nagradnih sistemov: 4: Student
    section Tehnična implementacija
      Izrisovanje besedila na platnu: 4: Student
      Upravljanje stanja: 5: Student
      Posodobitve na podlagi dogodkov: 5: Student
    section Izboljšava igre
      Oblikovanje uporabniške izkušnje: 5: Student
      Uravnoteženje izziva in nagrade: 5: Student
      Ustvarjanje privlačne igranosti: 5: Student

Predpredavanja kviz

Predpredavanja kviz

Ste pripravljeni, da vaša vesoljska igra resnično deluje kot igra? Dodajmo točkovanje in upravljanje življenja – osnovne mehanike, ki so zgodnje arkadne igre, kot je Space Invaders, spremenile iz preprostih demonstracij v zasvojljivo zabavo. Tukaj vaša igra postane zares igralna.

mindmap
  root((Sistemi povratnih informacij v igri))
    Visual Communication
      Text Rendering
      Icon Display
      Color Psychology
      Layout Design
    Scoring Mechanics
      Point Values
      Reward Timing
      Progress Tracking
      Achievement Systems
    Life Management
      Risk vs Reward
      Player Agency
      Difficulty Balance
      Recovery Mechanics
    User Experience
      Immediate Feedback
      Clear Information
      Emotional Response
      Engagement Loops
    Implementation
      Canvas API
      State Management
      Event Systems
      Performance

Risanje besedila na zaslon - glas vaše igre

Za prikaz vaše ocene se moramo naučiti, kako upodobiti besedilo na platnu (canvas). Metoda fillText() je vaše osnovno orodje za to – ista tehnika, ki so jo uporabljale klasične arkadne igre za prikaz rezultatov in statusnih informacij.

flowchart LR
    A["📝 Besedilna vsebina"] --> B["🎨 Stiliranje"]
    B --> C["📍 Pozicioniranje"]
    C --> D["🖼️ Upodobitev na platnu"]
    
    E["Pisava"] --> B
    F["Velikost pisave"] --> B
    G["Barva"] --> B
    H["Poravnava"] --> B
    
    I["X koordinata"] --> C
    J["Y koordinata"] --> C
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5

Imate popoln nadzor nad izgledom besedila:

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

✅ Poglobite se v dodajanje besedila na platno – morda boste presenečeni, kako ustvarjalni ste lahko z izbiro pisav in slogom!

Življenja – več kot le število

V oblikovanju iger "življenje" predstavlja igralčev prostor za napake. Ta koncept sega nazaj do pinball avtomatov, kjer ste imeli več žog za igro. V zgodnjih videoigrah, kot so Asteroids, so življenja igralcem omogočala tveganje in učenje iz napak.

flowchart TD
    A["🎮 Akcija igralca"] --> B{"Ocena tveganja"}
    
    B --> C["Visoko tveganje, visoka nagrada"]
    B --> D["Varna strategija"]
    
    C --> E{"Izid"}
    D --> F["Stalen napredek"]
    
    E -->|Uspeh| G["🏆 Veliko točk"]
    E -->|Neuspeh| H["💔 Izguba življenja"]
    
    H --> I{"Preostala življenja?"}
    I -->|Da| J["🔄 Poskusi znova"]
    I -->|Ne| K["💀 Konec igre"]
    
    J --> B
    G --> B
    F --> B
    
    style C fill:#ffebee
    style D fill:#e8f5e8
    style G fill:#e3f2fd
    style H fill:#fff3e0

Vizualna predstavitev ima velik pomen – prikaz ikon ladij namesto zgolj “Življenja: 3” takoj ustvari vizualno prepoznavnost, podobno kot so zgodnji arkadni avtomati uporabljali ikonografijo za komunikacijo preko jezikovnih ovir.

Gradimo nagradni sistem vaše igre

Zdaj bomo izvedli osnovne povratne sisteme, ki igralce ohranjajo vključene:

sequenceDiagram
    participant Player
    participant GameEngine
    participant ScoreSystem
    participant LifeSystem
    participant Display
    
    Player->>GameEngine: Strelja sovražnika
    GameEngine->>ScoreSystem: Podeli točke
    ScoreSystem->>ScoreSystem: +100 točk
    ScoreSystem->>Display: Posodobi rezultat
    
    Player->>GameEngine: Trči v sovražnika
    GameEngine->>LifeSystem: Izgubi življenje
    LifeSystem->>LifeSystem: -1 življenje
    LifeSystem->>Display: Posodobi življenja
    
    alt Življenja > 0
        LifeSystem->>Player: Nadaljuj igranje
    else Življenja = 0
        LifeSystem->>GameEngine: Konec igre
    end

• Sistem točkovanja: Vsaka uničena sovražna ladja prinese 100 točk (zaokrožene številke so igralcem lažje za mentalni izračun). Rezultat se prikazuje v spodnjem levem kotu.
• Števec življenj: Vaš junak začne s tremi življenji – standard, ki so ga vzpostavile zgodnje arkadne igre za uravnoteženje izziva s igranjem. Vsak srečanje z nasprotnikom stane eno življenje. Preostala življenja bodo prikazana v spodnjem desnem kotu z ikonami ladij .

Začnimo!

Najprej pripravite svoje delovno okolje. Pojdite do datotek v podmapi your-work. Videli bi morali te datoteke:

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

Za testiranje igre zaženite razvojni strežnik iz mape your_work:

cd your-work
npm start

To zažene lokalni strežnik na http://localhost:5000. Odprite ta naslov v vašem brskalniku, da si ogledate igro. Testirajte kontrole s puščičnimi tipkami in poskusite streljati na sovražnike, da potrdite, da vse deluje.

flowchart TD
    A["1. Nalaganje sredstev"] --> B["2. Spremenljivke igre"]
    B --> C["3. Zaznavanje trkov"]
    C --> D["4. Izboljšava junaka"]
    D --> E["5. Prikazne funkcije"]
    E --> F["6. Obdelovalci dogodkov"]
    
    G["Slika ikone življenja"] --> A
    H["Sledenje točkam in življenjem"] --> B
    I["Presečišča junak-sovražnik"] --> C
    J["Metode točk in življenj"] --> D
    K["Risanje besedila in ikon"] --> E
    L["Logika nagrad in kazni"] --> F
    
    F --> M["🎮 Celotna igra"]
    
    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

Čas za kodiranje!

1. Pridobite vizualne elemente, ki jih boste potrebovali. Kopirajte datoteko life.png iz mape solution/assets/ v vašo mapo your-work. Nato dodajte lifeImg v funkcijo window.onload:

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

2. Ne pozabite dodati lifeImg na vaš seznam sredstev:

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

3. Nastavite spremenljivke vaše igre. Dodajte nekaj kode za sledenje skupnemu rezultatu (začetek na 0) in preostalim življenjem (začetek na 3). Te vrednosti bomo prikazali na zaslonu, da bodo igralci vedno vedeli, kako stojijo.

4. Implementirajte zaznavanje trkov. Razširite funkcijo updateGameObjects(), da zazna, ko sovražniki trčijo z vašim junakom:

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

5. Dodajte sledenje življenj in točk vašemu junaku.

   1. Inicializirajte števce. Pod this.cooldown = 0 v vaši Hero razredu nastavite življenja in točke:

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

   2. Pokažite te vrednosti igralcu. Ustvarite funkcije za risanje teh vrednosti na zaslon:

      function drawLife() {
        // NAREDITI, 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. Povežite vse v vašo igralno zanko. Dodajte te funkcije v funkcijo window.onload takoj za updateGameObjects():

      drawPoints();
      drawLife();
      

🔄 Pedagoški pregled

Razumevanje oblikovanja iger: Preden implementirate posledice, se prepričajte, da razumete:

• ✅ Kako vizualna povratna informacija sporoča stanje igre igralcem
• ✅ Zakaj dosledna postavitev UI elementov izboljša uporabnost
• ✅ Psihologijo za vrednostmi točk in upravljanjem življenj
• ✅ Kako se razlikuje risanje besedila na platnu v primerjavi s HTML besedilom

Hiter samopreizkus: Zakaj arkadne igre običajno uporabljajo zaokrožene številke za vrednosti točk? Odgovor: Zaokrožene številke je igralcem lažje izračunati v mislih in ustvarjajo zadovoljive psihološke nagrade

Principi uporabniške izkušnje: Zdaj uporabljate:

• Vizualna hierarhija: Pomembne informacije so izpostavljene
• Takojšnja povratna informacija: Posodobitve v realnem času glede na igralčeve akcije
• Kognitivna obremenitev: Preprosta, jasna predstavitev informacij
• Čustveni dizajn: Ikone in barve, ki vzpostavijo povezavo z igralcem

1. Implementirajte posledice in nagrade v igri. Zdaj bomo dodali povratne sisteme, ki igralčeve akcije naredijo pomembne:

   1. Trki stanejo življenja. Vsakič, ko vaš junak trči z nasprotnikom, izgubite eno življenje.

      Dodajte to metodo v vaš razred Hero:

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

   2. Streljanje sovražnikov prinaša točke. Vsak uspešen zadetek prinese 100 točk in ponuja takojšnjo pozitivno povratno informacijo za natančno streljanje.

      Razširite vaš razred Hero s to metodo za povečevanje:

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

      Zdaj povežite te funkcije z vašimi dogodki trkov:

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

✅ Zanima vas, katere druge igre so ustvarjene z JavaScriptom in Canvasom? Raziščite možnosti – morda boste presenečeni, kaj je mogoče!

Po implementaciji teh funkcij testirajte igro in si oglejte celoten sistem povratnih informacij v akciji. Videli boste ikone življenj v spodnjem desnem kotu, rezultat v spodnjem levem kotu in opazovali, kako trki zmanjšujejo življenja, uspešni zadetki pa povečujejo vaš rezultat.

Vaša igra zdaj vsebuje ključne mehanike, zaradi katerih so bile zgodnje arkadne igre tako privlačne – jasni cilji, takojšnja povratna informacija in pomembne posledice za igralčeve akcije.

🔄 Pedagoški pregled

Popoln sistem oblikovanja igre: Preverite svoje obvladovanje sistemov povratnih informacij igralcev:

• ✅ Kako mehanika točkovanja ustvarja motivacijo in angažiranost igralcev?
• ✅ Zakaj je vizualna doslednost pomembna za oblikovanje uporabniškega vmesnika?
• ✅ Kako sistem življenj uravnava izzive in zadrževanje igralcev?
• ✅ Kakšno vlogo ima takojšnja povratna informacija pri ustvarjanju zadovoljive igralske izkušnje?

Integracija sistema: Vaš sistem povratnih informacij prikazuje:

• Oblikovanje uporabniške izkušnje: Jasna vizualna komunikacija in hierarhija informacij
• Dogodkovno usmerjena arhitektura: Odzivne posodobitve glede na igralčeve akcije
• Upravljanje stanja: Sledenje in prikaz dinamičnih podatkov igre
• Obvladovanje platna (Canvas): Risanje besedila in pozicioniranje sprite-ov
• Psihologija igre: Razumevanje motivacije in angažiranosti igralcev

Profesionalni vzorci: Implementirali ste:

• MVC arhitekturo: Ločevanje logike igre, podatkov in predstavitve
• Opazovalni vzorec: Dogodkovno usmerjene posodobitve za spremembe stanja igre
• Oblikovanje komponent: Ponovno uporabne funkcije za risanje in logiko
• Optimizacijo zmogljivosti: Učinkovito risanje v igralnih zankah

⚡ Kaj lahko naredite v naslednjih 5 minutah

• Eksperimentirajte z različnimi velikostmi pisav in barvami za prikaz rezultata
• Poskusite spremeniti vrednosti točk in opazite, kako to vpliva na občutek igranja
• Dodajte stavke console.log za spremljanje sprememb točk in življenj
• Testirajte mejne primere, kot so izguba vseh življenj ali doseganje visokih rezultatov

🎯 Kaj lahko dosežete v tej uri

• Dokončajte kviz po učnem delu in razumite psihologijo oblikovanja iger
• Dodajte zvočne učinke za točkovanje in izgubo življenj
• Implementirajte sistem najboljših rezultatov z uporabo localStorage
• Ustvarite različne vrednosti točk za različne vrste sovražnikov
• Dodajte vizualne učinke, kot je tresenje zaslona ob izgubi življenja

📅 Vaša tedenska pot oblikovanja iger

• Dokončajte celotno vesoljsko igro z izpopolnjenimi povratnimi sistemi
• Implementirajte napredne mehanike točkovanja, kot so množenje combo vrednosti
• Dodajte dosežke in odklenljivo vsebino
• Ustvarite sisteme progresije težavnosti in uravnoteženja
• Oblikujte uporabniške vmesnike za menije in zaslone po koncu igre
• Študirajte druge igre za razumevanje mehanizmov angažiranosti

🌟 Vaša mesečna mojstrska pot razvoja iger

• Ustvarjajte popolne igre z sofisticiranimi sistemi napredovanja
• Naučite se analitike iger in merjenja vedenja igralcev
• Prispevajte k odprtokodnim projektom razvoja iger
• Obvladajte napredne vzorce oblikovanja iger in monetizacije
• Ustvarjajte izobraževalne vsebine o oblikovanju iger in uporabniški izkušnji
• Izdelajte portfolio, ki prikazuje spretnosti oblikovanja in razvoja iger

🎯 Časovnica vašega mojstrstva oblikovanja iger

timeline
    title Napredek učenja oblikovanja iger in povratnih informacij igralcev
    
    section Osnove (10 minut)
        Vizualno komuniciranje: Prikazovanje besedila
                           : Oblikovanje ikon
                           : Načela postavitve
                           : Psihologija barv
        
    section Psihologija igralca (20 minut)
        Motiviacijski sistemi: Vrednosti točk
                          : Tveganje proti nagradi
                          : Povratna informacija o napredku
                          : Oblikovanje dosežkov
        
    section Tehnična izvedba (30 minut)
        Mojstrstvo platna: Pozicioniranje besedila
                      : Prikazovanje sprite-ov
                      : Upravljanje stanj
                      : Optimizacija zmogljivosti
        
    section Ravnotežje igre (40 minut)
        Oblikovanje težavnosti: Upravljanje življenja
                         : Krivulje točkovanja
                         : Zadrževanje igralcev
                         : Dostopnost
        
    section Uporniška izkušnja (50 minut)
        Oblikovanje vmesnika: Hierarhija informacij
                        : Odzivna povratna informacija
                        : Čustveno oblikovanje
                        : Testiranje uporabnosti
        
    section Napredni sistemi (1 teden)
        Mehanike iger: Sistemi napredovanja
                      : Integracija analitike
                      : Oblikovanje monetizacije
                      : Funkcije skupnosti
        
    section Industrijske veščine (1 mesec)
        Poklicni razvoj: Sodelovanje ekipe
                                : Dokumentacija oblikovanja
                                : Raziskave igralcev
                                : Optimizacija platforme

🛠️ Povzetek vašega orodjarna za oblikovanje iger

Po tem, ko ste končali lekcijo, ste obvladali:

• Igralčevo psihologijo: Razumevanje motivacije, tveganja/nagrade in angažiranosti
• Vizualno komunikacijo: Učinkovit dizajn UI s pomočjo besedila, ikon in postavitve
• Sisteme povratnih informacij: Odziv v realnem času na igralčeve akcije in dogodke igre
• Upravljanje stanja: Učinkovito sledenje in prikazovanje dinamičnih podatkov igre
• Risanje besedila na platno: Profesionalni prikaz besedila s slogom in pozicioniranjem
• Integracijo dogodkov: Povezovanje uporabniških dejanj z pomembnimi posledicami v igri
• Uravnoteženje igre: Oblikovanje krivulj težavnosti in sistemov napredovanja igralcev

Uporaba v resničnem svetu: Vaše spretnosti oblikovanja iger se neposredno uporabljajo za:

• Oblikovanje uporabniških vmesnikov: Ustvarjanje privlačnih in intuitivnih vmesnikov
• Razvoj izdelkov: Razumevanje motivacije uporabnikov in povratnih zank
• Izobraževalno tehnologijo: Gamifikacija in sistem angažiranosti za učenje
• Vizualizacijo podatkov: Dostopna in privlačna predstavitev kompleksnih informacij
• Razvoj mobilnih aplikacij: Mehanike zadržanja uporabnikov in dizajn izkušnje
• Marketinško tehnologijo: Razumevanje vedenja uporabnikov in optimizacijo konverzij

Pridobljene profesionalne spretnosti: Zdaj lahko:

• Oblikujete uporabniške izkušnje, ki motivirajo in angažirajo uporabnike
• Implementirate sisteme povratnih informacij, ki učinkovito usmerjajo vedenje uporabnikov
• Uravnotežite izziv in dostopnost v interaktivnih sistemih
• Ustvarjate vizualno komunikacijo, ki deluje med različnimi skupinami uporabnikov
• Analizirate vedenje uporabnikov in ponavljate izboljšave dizajna

Obvladani koncepti razvoja iger:

• Motivacija igralcev: Razumevanje, kaj spodbuja angažiranost in zadržanje igralcev
• Vizualni dizajn: Ustvarjanje jasnih, privlačnih in funkcionalnih vmesnikov
• Integracija sistemov: Povezovanje mnogih sistemov igre za skladno izkušnjo
• Optimizacija zmogljivosti: Učinkovito risanje in upravljanje stanja
• Dostopnost: Oblikovanje za različne ravni spretnosti in potrebe igralcev

Naslednja stopnja: Pripravljeni ste raziskovati napredne vzorce oblikovanja iger, implementirati analitične sisteme ali študirati monetizacijo in strategije zadrževanja igralcev!

🌟 Dosežek odklenjen: Ustvarili ste popoln sistem povratnih informacij igralcev z profesionalnimi načeli oblikovanja iger!

---

GitHub Copilot Agent izziv 🚀

Uporabite način Agenta za dokončanje naslednjega izziva:

Opis: Izboljšajte sistem točkovanja vesoljske igre z implementacijo sistema najboljših rezultatov s trajnim shranjevanjem in bonus točkovanjem.

Navodilo: Ustvarite sistem najboljših rezultatov, ki shrani najboljši rezultat igralca v localStorage. Dodajte bonus točke za zaporedne uničene sovražnike (combo sistem) in implementirajte različne vrednosti točk za različne vrste sovražnikov. Vključite vizualni indikator, ko igralec doseže nov najboljši rezultat, in prikažite trenutni najboljši rezultat na zaslonu igre.

🚀 Izziv

Zdaj imate funkcionalno igro s točkovanjem in življenji. Razmislite, katere dodatne funkcije bi lahko izboljšale igralno izkušnjo.

Kvizi po predavanju

Po-predavanja kviz

Pregled in samostojno učenje

Želite raziskati več? Raziščite različne pristope k sistemom točkovanja in življenj v igrah. Obstajajo fascinantni igralni motorji, kot je PlayFab, ki upravljajo točkovanje, lestvice in napredovanje igralcev. Kako bi integracija nečesa takšnega lahko popeljala vašo igro na višjo raven?

Naloga

Ustvari igro s točkovanjem

---

Opozorilo: Ta dokument je bil preveden z uporabo storitve za avtomatski prevod Co-op Translator. Čeprav si prizadevamo za natančnost, vas opozarjamo, da avtomatizirani prevodi lahko vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku velja za avtoritativni vir. Za pomembne informacije priporočamo strokovni človeški prevod. Ne odgovarjamo za morebitna nesporazume ali napačne razlage, ki nastanejo zaradi uporabe tega prevoda.