If you're seeing this message, it means we're having trouble loading external resources on our website.

Ha webszűrőt használsz, győződj meg róla, hogy a *.kastatic.org és a *.kasandbox.org nincsenek blokkolva.

Fő tartalom

Erdei környezet

Ez egy klasszikus kétdimenziós oldalnézetes játék: ami azt jelenti, hogy oldalról nézzük, és a karakter előre vagy hátra mozog benne. Azt akarjuk, hogy a karakterünk mindig középen legyen, úgyhogy igazából csak szimuláljuk a mozgását azáltal, hogy a hátteret mozgatjuk a karakter mögött. Ez csak egy trükk, de működik!
Először rajzoljuk meg azokat a részeket, amelyek nem fognak mozogni: a kék eget és a barna földet:
draw = function() {
    background(227, 254, 255);
    fill(130, 79, 43);
    rect(0, height*0{,}90, width, height*0{,}10);
    // ...
}
Ahhoz, hogy létrehozzuk az oldalra gördülő hatást, adjunk hozzá füvet, az image függvénykönyvtárból. Az egyik módja, hogy létrehozzuk ezt a mozgó környezetet, hogy úgy csinálunk, mintha a vásznunk 3000 pixel széles lenne, mintha ugyanennyire széles lenne a szint is, és annyi fűkockát rajzolunk, amennyi belefér a 3000 pixelbe, átmozgatva őket minden egyes alkalommal. De ez így nem túl hatékony és a programozós játékokban nagyon oda szoktunk figyelni a hatékonyságra. Ezért inkább letesszük, majd átmozgatjuk a fűkockákat. Csak annyit rajzolunk meg, amennyi elfér keresztben a 400 pixeles képernyőn, és amikor az egyik lelóg a képernyő bal oldaláról, egyből átrakjuk azt a képernyő jobb oldalára, és ezt folytatjuk a végtelenségig.
Ehhez először feltöltünk egy tömböt a fűkockák kezdőpozícióival:
var grassXs = [];
for (var i = 0; i < 25; i++) {
    grassXs.push(i*20);
}
Ezután a rajzoló ciklusunkon belül mindegyiket egyesével rajzoljuk meg.
for (var i = 0; i < grassXs.length; i++) {
   image(getImage("cute/GrassBlock"), grassXs[i], height*0{,}85, 20, 20);
}
Ez jól néz ki egy álló jelenethez, de nekünk az kell hogy mozogjon! Csak kivonunk egyet a fű helyzetéből minden alkalommal, ezzel 1 pixellel balra mozgatva őket.
for (var i = 0; i < grassXs.length; i++) {
   image(getImage("cute/GrassBlock"), grassXs[i], height*0{,}85, 20, 20);
    grassXs[i] -= 1;
}
Most a fű mozog, de előbb utóbb el fog tűnni, mivel az x értékek egyre negatívabbak lesznek. Ne feledd, azt akarjuk, hogy a fűkockák „átkígyózzanak” a vászon jobboldalára, amikor leesnek baloldalon. Ehhez ellenőrizzük, hogy eltűnt-e a fűkocka a képernyőről (ne feledd, a képeket a bal felső sarokból kezdve rajzoltuk), és ha eltűnt, átállítjuk az x értéket a vászon szélességére:
for (var i = 0; i < grassXs.length; i++) {
   image(getImage("cute/GrassBlock"), grassXs[i], height*0{,}85, 20, 20);
    grassXs[i] -= 1;
    if (grassXs[i] <= -20) {
        grassXs[i] = width;
    }
}
Összerakva az egészet, most úgy néz ki a hód, mintha mozogna is, miközben ugrik. Varázslat!
Jó, megvan a hód, aki ugrál az oldalra gördülő környezetben. De nincs a hódnak feladata! Hozzá kell adnunk a botokat, hogy a hód felugorjon és elkapja őket.
Gondolkozzunk el egy kicsit a botokon, mivel el kell döntenünk, hogyan programozzuk le őket:
  • Mindegyik botnak van x és y helyzete. Valószínűleg az x helyzeteket szeretnénk néhány felé elosztani (ha lehetséges, vagy egy állandóval, vagy egy intervallumból vett véletlenszámmal), az y helyzeteket pedig véletlenszerűen elrendezzük egy tartományban úgy, hogy a játékosnak irányítani kelljen a hód ugrását és visszaesését.
  • A botoknak látszólag ugyanúgy mozogniuk kell, mint a fűnek, de nem szabad átkígyózniuk. Ha egy bot eltűnik a képernyőről, eltűnt örökre.
  • Adott mennyiségű botnak kéne lennie szintenként – egy bizonyos pont után nem kell több bot.
Sokféleképpen programozhatjuk a botokat, de elég összetettek, úgyhogy modellezzük egy objektum alapján, ahogy a hód karaktert is modelleztük:
var Stick = function(x, y) {
    this.x = x;
    this.y = y;
};

Stick.prototype.draw = function() {
    fill(89, 71, 0);
    rect(this.x, this.y, 5, 40);
};
Ezután, mielőtt a játékunk elkezd futni, ahogy a hód előkészítése után létrehoztuk a fűkockák tömbjét, hozzunk létre egy 40 botból álló tömböt, állandó eltolással és véletlenszerű y értékekkel:
var sticks = [];
for (var i = 0; i < 40; i++) {  
    sticks.push(new Stick(i * 40 + 300, random(20, 260)));
}
Most megrajzolhatjuk a botokat ahhoz hasonlóan, ahogy a füvet rajzoltuk, csak átmozgatás nélkül:
for (var i = 0; i < sticks.length; i++) {
    sticks[i].draw();
    sticks[i].x -= 1;
}
Itt is vannak a botok, amiket ezzel a kóddal rajzoltunk! Próbálj meg felugrani értük! Mi történik? Semmi! Hamarosan kijavítjuk...

Szeretnél részt venni a beszélgetésben?

Még nincs hozzászólás.
Tudsz angolul? Kattints ide, ha meg szeretnéd nézni, milyen beszélgetések folynak a Khan Academy angol nyelvű oldalán.