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

Faágak ütközése

Van már egy ugráló hódunk, és a faágakat is megjelenítettük – ezt a kettőt kell már csak valahogy összehoznunk. Szeretnénk tudni, mikor kerül a hód fedésbe a faággal, hiszen szeretnénk számon tartani a sikeres faág-elkapásokat. Ez azt jelenti, hogy meg kell vizsgálnunk, összeütközött-e a két objektum. Több helyre is írhatjuk ezt a funkcionalitást a programban, hiszen két objektumhoz is kapcsolódik – lehetne globális függvény, vagy lehetne a Stick objektum metódusa, vagy akár a Beaver objektum metódusa. Írjuk most a Beaver objektumba:
Beaver.prototype.checkForStickGrab = function(stick) {
  // ha a hód átfedésben van egy ággal, történjen valami
};
A függvényben először szükségünk lesz egy olyan feltételre, ami igaz lesz, ha a hód és az ág ütköznek, egyébként hamis. Lehetne komplex vagy szigorú, például a hód keze helyzetének alapján, de maradjunk most egy egyszerű esetnél. Mondjuk azt, hogy „ütköztek”, ha:
  • Az ág középső x helyzete a hód bal és jobb oldala között van.
  • Az ág középső y helyzete a hód feje búbja és talpa között van.
Az ágat a rect paranccsal rajzoljuk, így az x és y tulajdonságok általában a bal felső sarokpont koordinátáját jelzik. Viszont egyszerűsíthetjük az ütközés számolást azzal, hogy a módot megváltoztatjuk, így a rect első két paramétere a közepet fogja jelenteni:
rectMode(CENTER);
rect(this.x, this.y, 5, 40);
A hód képe alapértelmezetten szintén a bal felső saroktól van megrajzolva, de megtartjuk ezt a módot, mert éppen jó lesz a számolásunkhoz. Ahhoz, hogy az x pozícióra vonatkozó első feltételt vizsgáljuk, megvizsgálhatjuk azt, hogy az ág x helyzete nagyobb vagy egyenlő-e, mint a hód bal oldalának helyzete (x) és kisebb vagy egyenlő-e, mint a hód jobb oldalának helyzete (x + 40)
stick.x >= this.x && stick.x <= (this.x + 40)
Az y pozíció vizsgálatát hasonlóan végezhetjük el: vizsgáljuk meg, hogy az ág y helyzete nagyobb-e vagy egyenlő, mint a hód feje búbja (y), és kisebb vagy egyenlő, mint a hód talpa (y + 40):
stick.y >= this.y && stick.y <= (this.y + 40)
Mit kellene tennünk most, hogy már tudjuk észlelni az ütközést a hód és az ág között? Jó lenne hatékonyan eltüntetni az ágat a képernyőről és megakadályozni a további ütközést. Ennek egy egyszerű módja az, hogy az ágat letoljuk a képernyőről, megváltoztatva az y koordinátáját:
stick.y = -400;
Mindemellett szeretnénk feljegyezni, hogy hány ágat „kapott el” eddig a hód, ezért inkrementáljuk a belső ág (sticks) tulajdonságot:
this.sticks++;
Végül meg kell hívnunk ezt a metódust a megfelelő időben – mondjuk, amikor megrajzoljuk az ágakat.
    for (var i = 0; i < sticks.length; i++) {
        sticks[i].draw();
        beaver.checkForStickGrab(sticks[i]);
        sticks[i].x -= 1;
    }
És itt van az egész együtt – próbáld ki, ugrálj rá az ágakra, el fognak tűnni!

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.