12. Peliohjelmointia

Kokeile tämän sivun esimerkkejä p5.js ohjelmointiympäristössä, johon pääset tästä linkistä: https://editor.p5js.org/

Tehdään aluksi seuraava ohjelma ja ajetaan se. Lopputulos nähdään konsoli-ikkunassa.

Ohjelmalla tulostettiin a-kirjain eri tavalla. Koska tietokone ymmärtää vain kaksi tilaa: virta kulkee (=1) tai virta ei kulje (=0), niin kaikki merkit on esitettävissä binäärilukuna eli lukujen 0 ja 1 avulla. a-kirjain on siis 7-bittinen binääri-luku: 110 0001. Bitti siis tarkoittaa, joko nollaa tai ykköstä. Mutta mitä kaksi muuta lukua eli 97 ja 61 ovat?

ASCII-TAULUKKO

Alla on p5js-ohjelman tulostamat ASCII-merkit. Huomaa, että kaikki merkit eivät ole tulostuneet, koska osan merkeistä on käyttöjärjestelmä (Windows) varannut omaan käyttönsä. Etsitään sieltä a-kirjain.

Huomataan, että a-kirjainta vastaa luku 97. Mutta mitä ovat ASCII-merkit? Kun tietokone kehitettiin, niin aluksi meillä oli 7-bittinen merkistö, jossa oli ASCII-merkit 0:sta 127:ään. Siinä määritettiin jokaiselle merkille oma numero. Myös tavallisimmat painikkeet kuten Enter (Ascii 13), Esc (Ascii 27), Askelpalautin (Ascii 8), Välilyönti (Ascii 32) määriteltiin Ascii-merkkeinä. Myöhemmin Ascii-merkistöön tehtiin 8-bittinen laajennus, jolloin saatiin käyttöön 256 merkkiä. Suomessa on esimerkiksi käytössä Latin-1 laajennus, jossa on määritelty esimerkiksi ä (Ascii 228), ö (Ascii 246) ja å (Ascii 229) kirjaimet. Koska jokaista kirjainta tai painiketta vastaa kokonaisluku välillä 0…255, niin se voidaan välittää tietokoneelle 8-bittisenä binäärilukuna. Katsotaan seuraavaksi tarkemmin mitä ovat binääriluvut.

Huomio: ASCII-taulukossa on alunperin määritelty myös Backspace (Askelpalautin)= 8, Tab = 9, Enter (Rivinvaihto) = 13, Escape (Peru) = 27, Space (Välilyönti)= 32. Mutta esimerkiksi nuolinäppäimet on myöhemmin määritelty toisella tavalla. Palataan tähän myöhemmin.

8-BITTINEN BINÄÄRILUKU

Bitti tarkoittaa tilaa 0 ja 1. Kun laitamme kahdeksan bittiä peräkkäin saamme yhden tavun. kahdeksalla bitillä voimme esittää luvut 0:sta 255:een. Ajatellaan, että kaikki luvut muodostuvat 2-kantaluvun potensseista oheisen taulukon mukaisesti.

Esimerkiksi binääriluku 0110 0001 tarkoittaa, että luvut 64, 32 ja 1 on käytössä eli näiden lukujen summa on 64+32+1 = 97

Vastaavasti luku 107 on lukujen 0 + 64 + 32 + 0 + 8 + 0 + 2 + 1 -summa, joka on binäärilukuna 0110 1011. Lukua 107 vastaa ASCII-taulukossa kirjain: k eli binääriluvulla 0110 1011 voidaan kertoa tietokoneelle että tämä on kirjain k. Koska ASCII-merkkejä on rajallinen määrä, niin meidän pitää vielä ottaa käyttöön hexa-luvut, joiden avulla voimme määritellä lisää merkkejä.

HEXALUVUT

Hexa-luvussa on 16 numeroa eli nollasta viiteentoista. Koska 9 on isoin luku, jonka voi esittää vielä numerolla, niin sen jälkeen meidän täytyy käyttää kirjaimia A, B, C, D, E ja F ilmaisemaan numeroita 10, 11, 12, 13, 14 ja 15. Yksi hexa-luku vastaa neljää bitillä. Kahdella hexa-luvulla voidaan esittää 8-bittiä. Esimerkiksi binääriluku 0110 0001 voidaan esittää kahdella hexaluvulla 6 (= 0110) ja 1 (=0001) eli desimaalilukua 97 vastaa hexa-luku 61. Vastaavasti luku 107 on binäärilukuna 0 + 64 + 32 + 0 + 8 + 0 + 2 + 1 -> 0110 1011, missä luku 0110 on hexalukuna 6 ja 1011 on hexalukuna B eli yksitoista. Siis lukua 107 vastaa siis hexa-luku 6B.

Koska ASCII-merkkejä on rajallinen määrä (256), niin siksi käyttöön on otettu unicode-merkit. UTF-8 määrittelyssä on on käytössä 1-4 hexatavua. Neljällä hexa-luvulla saadaan jo 16·16·16·16 =65 536 merkkiä esitettyä. Kun palataan aikaisempaan esimerkkiin, niin ASCII-merkkiä a vastaa hexa-luku 61, joilloin a-kirjaimen unicode-merkki on \u0061. Vastaavasti ASCII-merkkiä k vastaa hexa-luku 6B, niin k-kirjaimen unicode-merkki on \u006B.

Yhteenvetona esimerkiksi k-kirjaimen voi tulostaa p5js-ohjelmassa neljällä eri tavalla: Yksittäisenä merkkinä, ASCII-merkkinä, merkkijonona tai unicode-merkkinä hexa-luvun avulla.

Näppäinkomennot

Tutustutaan näpääinkomentoihin.

Esimerkki, jossa ympyrää ohjataan nuolinäppäimillä, koko kasvaa Enteristä ja koko pienenee Esc:stä.

var x=300;    // Määritellään muuttuja x ja annetaan sille alkuarvo 300
var y=300;    // Määritellään muuttuja y ja annetaan sille alkuarvo 300
var d = 40;   // Määritellään muuttuja d ja annetaan sille alkuarvo 40 (=halkaisja)

function setup() {
  createCanvas(600, 600);   // Ikkunan koko on 600 x 600
  fill(255,0,0);            // Täyttöväri punainen
}

function draw() {
  background(255,255,0);          // Tyhjennä tausta ja väritä se keltaiseksi
  if (keyIsPressed==true) {       // Jos näppäin on pohjassa
   if (keyCode == UP_ARROW) {     // Jos nuoli ylös on painettu, niin 
     y--;                         // silloin vähennä laskuria y yhdellä
   }                              // Lopeta jos ehto
   if (keyCode == DOWN_ARROW) {   // Jos nuoli alas on painettu, niin
     y++;                         // silloin kasvata laskuria y yhdellä
   }                              // Lopeta jos ehto
   if (keyCode == RIGHT_ARROW) {  // Jos nuoli oikealle on painettu, niin 
     x++;                         // kasvata laskuria x yhdellä
   }                              // Lopeta jos ehto
   if (keyCode == LEFT_ARROW) {   // Jos nuoli vasemmalle on painettu, niin 
     x--;                         // vähennä laskuria x  yhdellä
   }                              // Lopeta jos ehto
    if (keyCode == ENTER) {       // Jos Enter painiketta on painettu, niin
     d++;                         // kasvata laskuria d yhdellä
   }                              // Lopeta jos ehto
    if (keyCode == BACKSPACE) {   // Jos askelpalautinta on painettu, niin 
     d--;                         // vähennä laskuria yhdellä
   }                              // Lopeta jos ehto
  }                               // Lopeta ulompi jos ehto (KeyIsPressed)
  ellipse(x,y,d,d);               // Piirrä ympyrä, jonka halkaisija on d paikkaan (x,y)
}

Ohjelma toimii myös pelkillä numeroilla.

var x=300;
var y=300;
var d = 40;
function setup() {
  createCanvas(600, 600);
  fill(255,0,0);
}

function draw() {
  background(255,255,0);
  if (keyIsPressed==true) {
   if (keyCode == 38) {
     y--;
   }
   if (keyCode == 40) {
     y++;
   }
   if (keyCode == 39) {
     x++;
   }
   if (keyCode == 37) {
     x--;
   }
    if (keyCode == 13) {
     d++;
   } 
    if (keyCode == 8) {
     d--;
   } 
  }
  ellipse(x,y,d,d);
}

Kaikki ASCII-merkit toimivat parhaiten key-komennolla. Lisäksi askelpalautin, rivinvaihto ja välilyönti toimivat myös merkkinä kun käyttää char(luku)-komentoa. Mutta ohjausrakenteissa (esimerkiksi nuolinäpääimet) yleensä kannattaa käyttää keyCode-komentoa ja ainoastaan tulostettavissa kirjaimissa (esimerkiksi: a,b,c,…) key-komentoa. Eli esimerkiksi 37 on ASCII-taulukossa %-merkki, joka on määritelty key-komennolla. Vastaavasti numero 37 on keyCode-taulukossa määritelty nuoli vasemalle. Ainoastaan numerot 8, 13 ja ja 32 toimivat sekä key, että KeyCode-komenolla. Tästä alla esimerkki.

var x=300;            // Määritellään muuttuja x ja annetaan sille alkuarvo 300
var y=300;            // Määritellään muuttuja y ja annetaan sille alkuarvo 300
var d = 40;           // Määritellään muuttuja d ja annetaan sille alkuarvo 40
function setup() {
  createCanvas(600, 600);  // Ikkunan koko on 600 x 600
  fill(255,0,0);           // Punainen täyttöväri
}

function draw() {
  background(255,255,0);      // Tyhjennä tausta ja väritä se keltaiseksi
  if (keyIsPressed==true) {   // Jos painike on pohjassa
   if (key == 'w') {          // Jos näppäin w on pohjassa, niin 
     y--;                     // silloin  vähennä laskuria y yhdellä
   }                          // Lopeta jos ehto
   if (key == 's') {          // Jos näppäin s on pohjassa, niin 
     y++;                     // silloin kasvata laskuria y yhdellä
   }                          // Lopeta jos ehto
   if (key == 'd') {          // Jos näppäin d on pohjassa, niin
     x++;                     // silloin kasvata laskuria x yhdellä
   }                          // Lopeta jos ehto
   if (key == 'a') {          // Jos näppäin a on pohjassa, niin 
     x--;                     // silloin vähennä laskuria x yhdellä
   }                          // Lopeta jos ehto
    if (key == char(13)) {    // Jos char(13) = Enter on pohjassa, niin 
     d++;                     // kasvata laskuria d yhdellä
   }                          // Lopeta jos lause
    if (key == char(8)) {     // Jos char(8) = Asekelpalautin on pohjassa, niin
     d--;                     // vähennä laskuria d yhdellä
   }                          // Lopeta jos lause
  }                           // Lopeta ulompi jos lause (KeyIsPressed)
  ellipse(x,y,d,d);           // Piirrä ympyrä, jonka halkaisija on d paikkaan (x,y)
}