Fő tartalom

Programozás

Tantárgy/kurzus: Programozás > 4. témakör

4. lecke: Oldalnézetes játék készítése: Ugráló Hód

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?

Jelentkezz be

Rendezés:

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.