Środowisko leśne

Ta gra to typowy dwuwymiarowy "side-scroller": oznacza to, że patrzymy na grę od boku, a postać porusza się tylko do przodu lub do tyłu po świecie gry. Chcemy, aby nasza postać była zawsze w centrum ekranu, lecz tak na prawdę symulujemy poruszanie się postaci poprzez przemieszczanie tła za bohaterem. To podstęp, ale działa!

Zacznijmy od narysowania elementów, które nie posiadają widocznego ruchu : niebieskiego nieba i brązowej powierzchni:

draw = function() {
    background(227, 254, 255);
    fill(130, 79, 43);
    rect(0, height*0.90, width, height*0.10);
    // ...
}

Teraz, aby stworzyć efekt przewijania, dodajmy trawę, używając obrazku trawy z biblioteki obrazów. Jednym ze sposobów, aby stworzyć przemieszczające się otoczenie jest udawanie, że nasze płótno ma 3000 pikseli szerokości(taki szeroki byłby nasz poziom) i narysować tyle trawy, ile zdołamy zmieścić w tych 3000 pikselach przesuwając je za każdym razem. Jednak nie jest to zbyt wydajna metoda, a przy programowaniu gier należy bardzo dbać o efektywność. Zamiast tego, będziemy dynamicznie rysować obrazki trawy. Po prostu narysujemy tyle, ile zmieści się na 400 pikselach ekranu, a następnie gdy jeden z nich wyjdzie poza lewą stronę prawej krawędzi ekranu, dodamy go z powrotem do prawej części ekranu. Powtarzamy tą akcję w nieskończoność.

Aby to zrobić, zacznijmy od inicjalizacji tablicy początkowych lokacji dla bloków trawy:

var grassXs = [];
for (var i = 0; i < 25; i++) {
  grassXs.push(i*20);
}

Teraz, w naszej pętli rysującej, narysujmy każdy z nich:

for (var i = 0; i < grassXs.length; i++) {
  image(getImage("cute/GrassBlock"), grassXs[i], height*0.85, 20, 20);
}

Wygląda to dobrze na statycznej scenie, teraz sprawmy, aby się poruszały! Możemy odjąć jeden od pozycji każdej trawy za każdym razem, przesuwając je w lewo o 1 piksel.

for (var i = 0; i < grassXs.length; i++) {
  image(getImage("cute/GrassBlock"), grassXs[i], height*0.85, 20, 20);
  grassXs[i] -= 1;
}

Teraz trawa będzie się ruszać, ale w końcu zniknie, gdy wartości x staną się ujemne. Pamiętaj, że chcemy dodawać je z powrotem po prawej stronie płótna gdy tylko znikną po lewej stronie. By to zrobić, sprawdzimy czy faktycznie grafika wyszła poza obraz (pamiętaj, że nasze obrazki rysowane są od górnego lewego rogu) i ustawiamy wartość x równą szerokości płótna, jeśli wyszła:

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

Po złączeniu tego w całość, mamy teraz bobra który wygląda, jakby się przemieszczał gdy skacze. Magia!

Dobra, mamy bobra skaczącego po przesuwającym się otoczeniu. Ale nasz bóbr nie ma nic do zrobienia! Musimy dodać patyki, które będzie mógł zbierać.

Pomyślmy chwilę o tej kwestii, gdyż musimy zdecydować jak ją zaprogramować:

Każdy patyk ma pozycję x i y. Prawdopodobnie chcemy, aby wartości x były różne o pewną wartość (stała lub losowaną z zadanego przedziału), oraz chcemy, aby wartość y była losowa w pewnym przedziale, tak aby gracz musiał kontrolować wysokość bobra w celu zebrania patyków.
Patyki powinny mieć podobny widok przemieszczania się jak trawa, ale nie powinny wracać na ekran po zniknięciu po lewej stronie. Gdy zniknie, przepada na zawsze.
Na każdy poziom powinna przypadać określona liczba patyków - w pewnym momencie powinny przestać się pojawiać.

Istnieje wiele sposobów, na które możemy zaprogramować nasze patyki, ale wydają się one raczej skomplikowane, więc zamodelujmy je za pomocą obiektu, tak jak to zrobiliśmy w przypadku naszej postaci bobra:

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

Zanim gra się zacznie, po zainicjowaniu naszego bobra, stwórzmy tablicę 40 patyków, ze stałym odstępem między wartościami x i losowym y:

var sticks = [];
for (var i = 0; i < 40; i++) {
  sticks.push(new Stick(i * 40 + 300, random(20, 260)));
}

Teraz możemy narysować patyki - analogicznie do tego, jak narysowaliśmy trawę, tylko bez zawijania w przypadku zniknięcia po lewej stronie ekranu:

for (var i = 0; i < sticks.length; i++) {
  sticks[i].draw();
  sticks[i].x -= 1;
}

Oto i efekt, z patykami narysowanymi za pomocą tego kodu. Spróbuj je zebrać! Jaki jest efekt? Nic się nie stało! Naprawimy to wkrótce...

Chcesz dołączyć do dyskusji?

Zaloguj się

Sortuj według

Na razie brak głosów w dyskusji

Rozumiesz angielski? Kliknij tutaj, aby zobaczyć więcej dyskusji na angielskiej wersji strony Khan Academy.