Основно съдържание

Програмиране

Курс: Програмиране > Раздел 4

Урок 4: Създаване на страничен скролер: Скачащият бобър

Горска околна среда

Тази игра е класически 2D "сайд-скролер": това означава, че я гледаме от едната страна, а героят се движи напред или назад през нея. Искаме нашият герой винаги да е в центъра на екрана, затова всъщност симулираме движението на героя, като движим фона около героя. Това е трик, но работи!

За начало ще нарисуваме частите, които не се движат – синьото небе и кафявата земя:

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

Сега, за да създадем плъзгането, да добавим трева като използваме изображението на трева от библиотеката с изображения. Един начин да създадем движещата се обстановка е да си представим, че платното ни е широко 3000 пиксела – това ще е широчината на нашето ниво – и да нарисуваме колкото можем да поберем блокчета с трева в тези 3000 пиксела, като всеки път ги преместваме. Това обаче не е много ефективно, а в програмирането на игри ефективността е важна. Вместо това ще поставяме и плъзгаме изображенията на трева. Ще нарисуваме толкова, колкото са ни необходими за екран от 400 пиксела, а след това, когато едно излезе от лявата страна на десния екран, ще го долепваме обратно отдясно на екрана и ще продължим да го правим завинаги.

За да направим това, ще започнем като инициализираме масив от началните позиции на блокчетата с трева:

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

След това в нашия цикъл за рисуване ще нарисуваме всяко от тях:

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

Това изглежда добре за статична сцена, но тя трябва да се движи! Така че може да извадим 1 от всяка позиция на трева всеки път, за да местим тревата наляво с 1 пиксел.

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

Сега тревата ще се движи, но накрая ще изчезне, тъй като стойностите на х стават все по-отрицателни. Не забравяй, че искаме да плъзгаме блокчетата – искаме да ги прикрепяме вдясно, когато изпаднат отляво. За да го направим, ще проверяваме дали сме извън екрана (не забравяй, че нашите изображения се рисуват от горния ляв ъгъл), и ако това е така, да задаваме на х стойност, равна на широчината на платното:

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

Като съберем всичко, получаваме бобър, който изглежда все едно се движи, докато подскача. Магия!

Добре, имаме бобър, който подскача по трева, която се движи. Но няма нищо друго, което да прави! Трябва да добавим пръчки, които да вдига и да събира.

Да помислим за пръчките и да решим как да ги програмираме:

Всяка пръчка има позиция x и y. Вероятно искаме позициите х да се намират на някакво разстояние (вероятно константа или случайно число в някакъв обхват), а позициите y да са случайни в някакъв обхват, за да може потребителят да контролира кога бобърът да скача и да се връща.
Пръчките трябва да се движат като тревата, но не трябва да подскачат. Когато една пръчка е извън екрана, тя изчезва завинаги.
На всяко ниво трябва да има някакъв брой пръчки – в някакъв момент пръчките трябва да свършат.

Има много начини, по които да програмираме пръчките, но те изглеждат доста сложни, затова нека ги моделираме като обект, както моделирахме бобъра:

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

След това, преди програмата ни да започне да се изпълнява – например след като инициализираме бобъра – ще създадем масив от 40 пръчки с константа за отстоянието и случайна стойност на y:

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

Сега можем да начертаем пръчките – подобно на начина, по който нарисувахме тревата, само без да ги връщаме отново:

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

Това е всичко за пръчките, нарисувани с този код. Опитай да ги достигнеш! Какво се случва? Нищо! Скоро ще поправим това...

Искаш ли да се присъединиш към разговора?

Вписване в профила

Сортирай по:

Все още няма публикации.

Разбираш ли английски? Натисни тук, за да видиш още дискусии в английския сайт на Кан Академия.