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

Rakenna avaruuspeli osa 5: Pisteet ja elämät

journey
    title Your Game Design Journey
    section Player Feedback
      Understand scoring psychology: 3: Student
      Learn visual communication: 4: Student
      Design reward systems: 4: Student
    section Technical Implementation
      Canvas text rendering: 4: Student
      State management: 5: Student
      Event-driven updates: 5: Student
    section Game Polish
      User experience design: 5: Student
      Balance challenge and reward: 5: Student
      Create engaging gameplay: 5: Student

Ennakkokysely

Ennakkokysely

Valmis tekemään avaruuspelistäsi oikean pelin? Lisätään pisteiden kerääminen ja elämien hallinta – ydintoiminnot, jotka muuttivat varhaiset arcade-pelit, kuten Space Invaders, yksinkertaisista demonstraatioista koukuttavaksi viihteeksi. Tässä vaiheessa pelisi muuttuu todella pelattavaksi.

mindmap
  root((Game Feedback Systems))
    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

Tekstin piirtäminen ruudulle - Pelisi ääni

Näyttääksemme pisteet meidän täytyy oppia, kuinka tekstiä renderoidaan canvas-elementille. fillText()-metodi on päätyökalusi tähän – sama tekniikka, jota käytettiin klassisissa arcade-peleissä pisteiden ja tilatietojen näyttämiseen.

flowchart LR
    A["📝 Text Content"] --> B["🎨 Styling"]
    B --> C["📍 Positioning"]
    C --> D["🖼️ Canvas Render"]
    
    E["Font Family"] --> B
    F["Font Size"] --> B
    G["Color"] --> B
    H["Alignment"] --> B
    
    I["X Coordinate"] --> C
    J["Y Coordinate"] --> C
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5

Sinulla on täysi hallinta tekstin ulkoasusta:

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

✅ Sukella syvemmälle tekstin lisäämiseen canvas-elementille – saatat yllättyä, kuinka luovaksi voit olla fonttien ja tyylien kanssa!

Elämät - Enemmän kuin vain numero

Pelisuunnittelussa "elämä" edustaa pelaajan virhemarginaalia. Tämä konsepti juontaa juurensa flipperikoneista, joissa pelaajalla oli useita palloja pelattavana. Varhaisissa videopeleissä, kuten Asteroids, elämät antoivat pelaajille luvan ottaa riskejä ja oppia virheistään.

flowchart TD
    A["🎮 Player Action"] --> B{"Risk Assessment"}
    
    B --> C["High Risk, High Reward"]
    B --> D["Safe Strategy"]
    
    C --> E{"Outcome"}
    D --> F["Steady Progress"]
    
    E -->|Success| G["🏆 Big Points"]
    E -->|Failure| H["💔 Lose Life"]
    
    H --> I{"Lives Remaining?"}
    I -->|Yes| J["🔄 Try Again"]
    I -->|No| K["💀 Game Over"]
    
    J --> B
    G --> B
    F --> B
    
    style C fill:#ffebee
    style D fill:#e8f5e8
    style G fill:#e3f2fd
    style H fill:#fff3e0

Visuaalinen esitys on erittäin tärkeää – näyttämällä aluksen ikoneita pelkän "Elämät: 3" sijaan luodaan välitön visuaalinen tunnistus, aivan kuten varhaiset arcade-kaapit käyttivät ikonografiaa viestinnässä kielimuurien yli.

Pelin palkitsemisjärjestelmän rakentaminen

Nyt toteutamme keskeiset palautesysteemit, jotka pitävät pelaajat mukana:

sequenceDiagram
    participant Player
    participant GameEngine
    participant ScoreSystem
    participant LifeSystem
    participant Display
    
    Player->>GameEngine: Shoots Enemy
    GameEngine->>ScoreSystem: Award Points
    ScoreSystem->>ScoreSystem: +100 points
    ScoreSystem->>Display: Update Score
    
    Player->>GameEngine: Collides with Enemy
    GameEngine->>LifeSystem: Lose Life
    LifeSystem->>LifeSystem: -1 life
    LifeSystem->>Display: Update Lives
    
    alt Lives > 0
        LifeSystem->>Player: Continue Playing
    else Lives = 0
        LifeSystem->>GameEngine: Game Over
    end

• Pistejärjestelmä: Jokainen tuhottu vihollisalus antaa 100 pistettä (pyöreät numerot ovat helpompia pelaajien laskea mielessään). Pisteet näytetään vasemmassa alakulmassa.
• Elämälaskuri: Sankarisi aloittaa kolmella elämällä – standardi, jonka varhaiset arcade-pelit asettivat tasapainottamaan haastetta ja pelattavuutta. Jokainen törmäys viholliseen maksaa yhden elämän. Näytämme jäljellä olevat elämät oikeassa alakulmassa aluksen ikoneilla .

Aloitetaan rakentaminen!

Ensiksi, aseta työtilasi. Siirry tiedostoihin your-work-alikansiossa. Sinun pitäisi nähdä nämä tiedostot:

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

Testataksesi peliäsi, käynnistä kehityspalvelin your_work-kansiosta:

cd your-work
npm start

Tämä käynnistää paikallisen palvelimen osoitteessa http://localhost:5000. Avaa tämä osoite selaimessasi nähdäksesi pelisi. Testaa ohjaimia nuolinäppäimillä ja kokeile ampua vihollisia varmistaaksesi, että kaikki toimii.

flowchart TD
    A["1. Asset Loading"] --> B["2. Game Variables"]
    B --> C["3. Collision Detection"]
    C --> D["4. Hero Enhancement"]
    D --> E["5. Display Functions"]
    E --> F["6. Event Handlers"]
    
    G["Life Icon Image"] --> A
    H["Score & Lives Tracking"] --> B
    I["Hero-Enemy Intersections"] --> C
    J["Points & Life Methods"] --> D
    K["Text & Icon Rendering"] --> E
    L["Reward & Penalty Logic"] --> F
    
    F --> M["🎮 Complete Game"]
    
    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

Koodauksen aika!

1. Hanki tarvitsemasi visuaaliset resurssit. Kopioi life.png-resurssi solution/assets/-kansiosta your-work-kansioon. Lisää sitten lifeImg window.onload-funktioon:

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

2. Älä unohda lisätä lifeImg resurssilistaan:

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

3. Aseta pelimuuttujat. Lisää koodi, joka seuraa kokonaispisteitäsi (alkaen 0) ja jäljellä olevia elämiä (alkaen 3). Näytämme nämä ruudulla, jotta pelaajat tietävät aina tilanteensa.

4. Toteuta törmäysten tunnistus. Laajenna updateGameObjects()-funktiota tunnistamaan, kun viholliset törmäävät sankariisi:

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

5. Lisää elämien ja pisteiden seuranta sankarillesi.

   1. Alusta laskurit. Lisää this.cooldown = 0-kohdan alle Hero-luokassasi elämien ja pisteiden laskurit:

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

   2. Näytä nämä arvot pelaajalle. Luo funktiot, jotka piirtävät nämä arvot ruudulle:

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

   3. Liitä kaikki pelisilmukkaan. Lisää nämä funktiot window.onload-funktioon heti updateGameObjects()-kohdan jälkeen:

      drawPoints();
      drawLife();
      

🔄 Pedagoginen tarkistus

Pelisuunnittelun ymmärtäminen: Ennen seurausten toteuttamista varmista, että ymmärrät:

• ✅ Kuinka visuaalinen palaute viestii pelitilasta pelaajille
• ✅ Miksi käyttöliittymäelementtien johdonmukainen sijoittelu parantaa käytettävyyttä
• ✅ Psykologia pistearvojen ja elämänhallinnan takana
• ✅ Kuinka canvas-tekstin renderöinti eroaa HTML-tekstistä

Pikainen itsearviointi: Miksi arcade-pelit yleensä käyttävät pyöreitä numeroita pistearvoina? Vastaus: Pyöreät numerot ovat helpompia pelaajien laskea mielessään ja luovat tyydyttäviä psykologisia palkintoja

Käyttäjäkokemuksen periaatteet: Sovellat nyt:

• Visuaalinen hierarkia: Tärkeät tiedot sijoitettu näkyvästi
• Välitön palaute: Pelaajan toimien reaaliaikainen päivitys
• Kognitiivinen kuormitus: Yksinkertainen ja selkeä tiedon esitys
• Emotionaalinen suunnittelu: Ikonit ja värit, jotka luovat yhteyden pelaajaan

1. Toteuta pelin seuraukset ja palkinnot. Nyt lisätään palautesysteemit, jotka tekevät pelaajan toimista merkityksellisiä:

   1. Törmäykset maksavat elämiä. Joka kerta, kun sankarisi törmää viholliseen, menetät yhden elämän.

      Lisää tämä metodi Hero-luokkaasi:

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

   2. Vihollisten ampuminen ansaitsee pisteitä. Jokainen onnistunut osuma antaa 100 pistettä, tarjoten välitöntä positiivista palautetta tarkasta ampumisesta.

      Laajenna Hero-luokkaasi tällä lisäysmetodilla:

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

      Nyt yhdistä nämä funktiot törmäystapahtumiin:

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

✅ Kiinnostunut muista JavaScriptillä ja Canvasilla tehdyistä peleistä? Tutki lisää – saatat yllättyä siitä, mitä kaikkea on mahdollista tehdä!

Kun olet toteuttanut nämä ominaisuudet, testaa peliäsi nähdäksesi täydellisen palautesysteemin toiminnassa. Sinun pitäisi nähdä elämäikoneita oikeassa alakulmassa, pisteesi vasemmassa alakulmassa, ja huomata, kuinka törmäykset vähentävät elämiä samalla kun onnistuneet laukaukset lisäävät pisteitä.

Pelissäsi on nyt olennaiset mekaniikat, jotka tekivät varhaisista arcade-peleistä niin koukuttavia – selkeät tavoitteet, välitön palaute ja merkitykselliset seuraukset pelaajan toimille.

🔄 Pedagoginen tarkistus

Täydellinen pelisuunnittelujärjestelmä: Varmista, että hallitset pelaajapalautesysteemit:

• ✅ Kuinka pisteytysmekaniikat luovat pelaajamotiivaatioita ja sitoutumista?
• ✅ Miksi visuaalinen johdonmukaisuus on tärkeää käyttöliittymän suunnittelussa?
• ✅ Kuinka elämäsysteemi tasapainottaa haastetta ja pelaajien pysyvyyttä?
• ✅ Mikä rooli välittömällä palautteella on tyydyttävän pelattavuuden luomisessa?

Järjestelmän integrointi: Palautesysteemisi osoittaa:

• Käyttäjäkokemuksen suunnittelu: Selkeä visuaalinen viestintä ja tiedon hierarkia
• Tapahtumapohjainen arkkitehtuuri: Pelaajan toimien responsiiviset päivitykset
• Tilanhallinta: Dynaamisen pelidatan seuranta ja näyttäminen
• Canvas-osaaminen: Tekstin renderöinti ja spritejen sijoittelu
• Pelipsykologia: Pelaajamotiivaatioiden ja sitoutumisen ymmärtäminen

Ammatilliset käytännöt: Olet toteuttanut:

• MVC-arkkitehtuuri: Pelilogiikan, datan ja esityksen erottaminen
• Observer Pattern: Tapahtumapohjaiset päivitykset pelitilan muutoksille
• Komponenttisuunnittelu: Uudelleenkäytettävät funktiot renderöintiin ja logiikkaan
• Suorituskyvyn optimointi: Tehokas renderöinti pelisilmukoissa

⚡ Mitä voit tehdä seuraavan 5 minuutin aikana

• Kokeile eri fonttikokoja ja värejä pistelaskun näyttämiseen
• Muuta pistearvoja ja katso, miten se vaikuttaa pelin tuntumaan
• Lisää console.log-komentoja seuraamaan pisteiden ja elämien muutoksia
• Testaa reunatapauksia, kuten elämien loppuminen tai korkeiden pisteiden saavuttaminen

🎯 Mitä voit saavuttaa tämän tunnin aikana

• Suorita jälkitunnin kysely ja ymmärrä pelisuunnittelun psykologiaa
• Lisää äänitehosteet pisteiden keräämiseen ja elämien menettämiseen
• Toteuta korkeiden pisteiden järjestelmä käyttämällä localStoragea
• Luo eri pistearvot eri vihollistyypeille
• Lisää visuaalisia efektejä, kuten ruudun tärinä elämän menettämisen yhteydessä

📅 Viikon mittainen pelisuunnittelumatkasi

• Viimeistele koko avaruuspeli hiotuilla palautesysteemeillä
• Toteuta edistyneet pisteytysmekaniikat, kuten kombokertoimet
• Lisää saavutuksia ja avattavaa sisältöä
• Luo vaikeusasteen etenemistä ja tasapainotusjärjestelmiä
• Suunnittele käyttöliittymät valikoille ja pelin päättymisnäytöille
• Tutki muita pelejä ymmärtääksesi sitouttamismekanismeja

🌟 Kuukauden mittainen pelikehityksen mestaruus

• Rakenna kokonaisia pelejä kehittyneillä etenemisjärjestelmillä
• Opettele pelianalytiikkaa ja pelaajakäyttäytymisen mittaamista
• Osallistu avoimen lähdekoodin pelikehitysprojekteihin
• Hallitse kehittyneitä pelisuunnittelumalleja ja kaupallistamista
• Luo opetusmateriaalia pelisuunnittelusta ja käyttäjäkokemuksesta
• Rakenna portfolio, joka esittelee pelisuunnittelu- ja kehitystaitojasi

🎯 Pelisuunnittelun mestaruusaikataulu

timeline
    title Game Design & Player Feedback Learning Progression
    
    section Foundation (10 minutes)
        Visual Communication: Text rendering
                           : Icon design
                           : Layout principles
                           : Color psychology
        
    section Player Psychology (20 minutes)
        Motivation Systems: Point values
                          : Risk vs reward
                          : Progress feedback
                          : Achievement design
        
    section Technical Implementation (30 minutes)
        Canvas Mastery: Text positioning
                      : Sprite rendering
                      : State management
                      : Performance optimization
        
    section Game Balance (40 minutes)
        Difficulty Design: Life management
                         : Scoring curves
                         : Player retention
                         : Accessibility
        
    section User Experience (50 minutes)
        Interface Design: Information hierarchy
                        : Responsive feedback
                        : Emotional design
                        : Usability testing
        
    section Advanced Systems (1 week)
        Game Mechanics: Progression systems
                      : Analytics integration
                      : Monetization design
                      : Community features
        
    section Industry Skills (1 month)
        Professional Development: Team collaboration
                                : Design documentation
                                : Player research
                                : Platform optimization

🛠️ Pelisuunnittelutyökalupakin yhteenveto

Tämän oppitunnin jälkeen olet hallinnut:

• Pelaajapsykologia: Motiivien, riskien/palkkioiden ja sitoutumissilmukoiden ymmärtäminen
• Visuaalinen viestintä: Tehokas käyttöliittymäsuunnittelu tekstin, ikonien ja asettelun avulla
• Palautesysteemit: Reaaliaikainen vastaus pelaajan toimille ja pelitapahtumille
• Tilanhallinta: Dynaamisen pelidatan tehokas seuranta ja näyttäminen
• Canvas-tekstin renderöinti: Ammattimainen tekstin näyttäminen tyylillä ja sijoittelulla
• Tapahtumien integrointi: Käyttäjätoimien yhdistäminen merkityksellisiin pelin seurauksiin
• Pelitasapaino: Vaikeuskäyrien ja pelaajan etenemisjärjestelmien suunnittelu

Todelliset sovellukset: Pelisuunnittelutaitosi soveltuvat suoraan:

• Käyttöliittymäsuunnittelu: Houkuttelevien ja intuitiivisten käyttöliittymien luominen
• Tuotekehitys: Käyttäjämotiivien ja palautesilmukoiden ymmärtäminen
• Koulutusteknologia: Pelillistämisen ja oppimisen sitouttamissysteemit
• Datavisualisointi: Monimutkaisen tiedon tekeminen helposti ymmärrettäväksi ja houkuttelevaksi
• Mobiilisovelluskehitys: Pysyvyyden mekanismit ja käyttäjäkokemuksen suunnittelu
• Markkinointiteknologia: Käyttäytymisen ymmärtäminen ja konversioiden optimointi

Ammatilliset taidot: Nyt osaat:

• Suunnitella käyttäjäkokemuksia, jotka motivoivat ja sitouttavat käyttäjiä
• Toteuttaa palautesysteemejä, jotka ohjaavat käyttäjän toimintaa tehokkaasti
• Tasapainottaa haastetta ja saavutettavuutta interaktiivisissa järjestelmissä
• Luoda visuaalista viestintää, joka toimii eri käyttäjäryhmille
• Analysoida käyttäjäkäyttäytymistä ja kehittää suunnittelua

Pelikehityksen käsitteet hallussa:

• Pelaajamotiivaatio: Ymmärrys siitä, mikä ohjaa sitoutumista ja pysyvyyttä
• Visuaalinen suunnittelu: Selkeiden, houkuttelevien ja toimivien käyttöliittymien luominen
• Järjestelmäintegraatio: Useiden pelisysteemien yhdistäminen yhtenäiseksi kokemukseksi
• Suorituskyvyn optimointi: Tehokas renderöinti ja tilanhallinta
• Saavutettavuus: Suunnittelu eri taitotasoille ja pelaajien tarpeille

Seuraava taso: Olet valmis tutkimaan kehittyneitä pelisuunnittelumalleja, toteuttamaan analytiikkajärjestelmiä tai opiskelemaan pelien kaupallistamista ja pelaajien sitouttamisstrategioita!

🌟 Saavutus avattu: Olet rakentanut täydellisen pelaajapalautesysteemin ammattimaisilla pelisuunnitteluperiaatteilla!

---

GitHub Copilot Agent -haaste 🚀

Käytä Agent-tilaa suorittaaksesi seuraavan haasteen:

Kuvaus: Paranna avaruuspelin pisteytysjärjestelmää toteuttamalla korkeiden pisteiden ominaisuus pysyvällä tallennuksella ja bonuspisteiden mekaniikalla.

Tehtävä: Luo korkeiden pisteiden järjestelmä, joka tallentaa pelaajan parhaan pistemäärän localStorageen. Lisää bonuspisteitä peräkkäisistä vihollistaposta (kombosysteemi) ja toteuta eri pistearvot eri vihollistyypeille. Sisällytä visuaalinen indikaattori, kun pelaaja saavuttaa uuden korkeimman pistemäärän, ja näytä nykyinen korkein pistemäärä peliruudulla.

🚀 Haaste

Sinulla on nyt toimiva peli pisteiden ja elämien kanssa. Mieti, mitkä lisäominaisuudet voisivat parantaa pelaajakokemusta.

Jälkitunnin kysely

Jälkitunnin kysely

Kertaus & Itseopiskelu

Haluatko tutkia lisää? Tutki erilaisia lähestymistapoja pelien pisteytys- ja elämäsysteemeihin. On olemassa kiehtovia pelimoottoreita, kuten PlayFab, jotka käsittelevät pisteytyksen, tulostaulut ja pelaajien etenemisen. Kuinka tällaisen integrointi voisi viedä pelisi seuraavalle tasolle?

Tehtävä

Rakenna pisteytyspeli

---

Vastuuvapauslauseke:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua Co-op Translator. Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.