Tworzenie gry na Androida za pomocą JavaScript #2 | Rysowanie obiektów gry

Zaktualizowaliśmy ten tekst dla Ciebie!
Data aktualizacji: 16.12.2024
Autor aktualizacji: Mateusz Machnio

Kilka lat temu, kiedy Android przejął prowadzenie na rynku mobilnym, postanowiłem stworzyć grę i stać się milionerem, jak „tysiące” innych twórców gier mobilnych.

—

Clearing canvas

Czyszczenie płótna

W HTML5 scena musi być rysowana od nowa za każdym razem. Czyszczenie płótna to podstawowa operacja, która ma również wpływ na wydajność.

clear () {

        let {ctx, width, height} = this;

        ctx.fillStyle = '#94c0e6';

        ctx.fillRect(0, 0, width, height);

 }

Metoda clear jest wywoływana w metodzie draw, tuż przed narysowaniem wszystkich obiektów gry. W naszym przypadku będzie używana do rysowania pięknego, czystego nieba! fillRect(0, 0, width, height); to wszystko, czego potrzebujemy do tego celu. Jednak jeśli nie potrzebujemy nieba, istnieją inne opcje czyszczenia płótna. Metoda clearRect powinna być nieco szybsza. Istnieje także mały trik: resetowanie szerokości płótna działa, a w niektórych przeglądarkach ma lepszą wydajność niż czyszczenie go przez rysowanie prostokątów.

Rysowanie na płótnie

Każda gra musi mieć rozgrywkę. Środowisko Flappy Bird składa się z przeszkód, których gracz próbuje unikać. Aby narysować przeszkody, możemy użyć prostych, kolorowych prostokątów. Musimy również dodać trochę losowości, aby wygenerować przestrzeń pomiędzy górną a dolną częścią przeszkody. Tworzymy nowy plik obstacle.js z klasą Obstacle. Będziemy używać metody reset, aby generować nową przeszkodę za każdym razem, gdy nasz FlappyBird ją przeleci, a przeszkoda osiągnie koniec ekranu i zniknie w tle.

reset () {

   let {config} = this;

   let space = this.getRandomInt (config.obstacle.minSpace, config.obstacle.maxSpace);

   this.x = config.width + config.width / 2;

   this.top = this.getRandomInt (0, config.height - space);

   this.bottom = this.top + space;

}

Przestrzeń dla przeszkody jest wygenerowana. Teraz narysujmy ją na płótnie. Metoda rect(x, y, width, height)rysuje prostokąt wypełniony kolorem ustawionym przez parametr fillStyle.

reset () {

   let {config} = this;

   let space = this.getRandomInt (config.obstacle.minSpace, config.obstacle.maxSpace);

   this.x = config.width + config.width / 2;

   this.top = this.getRandomInt (0, config.height - space);

   this.bottom = this.top + space;

}

Teraz możemy stworzyć metodę update z parametrem modifier (ile czasu minęło od ostatniego renderowania), aby przesuwać przeszkodę przez ekran. Każde wywołanie renderowania również wywoła metodę update. Przesuwamy przeszkodę o deltę określoną w obiekcie config, ograniczoną przez parametr modifier. Dzięki temu rozgrywka będzie regularna, niezależnie od liczby klatek na sekundę (FPS).

update (modifier) {

        let {x, width, config} = this;

        this.x = x - (this.config.obstacle.speed / modifier);

        if (this.x + width < 0) {

            this.reset();

        }

  }

Kolejnym krokiem jest stworzenie obiektów Obstacle w klasie Game. Dobrze będzie mieć osobną metodę do tego celu. Dla naszych potrzeb wystarczą trzy przeszkody. Na początku powinny być one umieszczone w różnych miejscach. Pierwsza zaczyna od połowy szerokości ekranu, druga na końcu ekranu, a ostatnia w połowie za ekranem.

createGameElements () {

        let {config, ctx} = this;

 

        //obstacles

        let o1 = new Obstacle(config, ctx);

        let o2 = new Obstacle(config, ctx);

        let o3 = new Obstacle(config, ctx);

 

        o1.setPosition(config.width / 2);

        o2.setPosition(config.width);

        o3.setPosition(config.width + config.width / 2);

 

        this.obstacles = [o1, o2, o3];

   }

Rezultat jest widoczny poniżej. Przeszkody poruszają się z prawej strony ekranu na lewą. Gdy pierwsza z nich osiągnie lewą krawędź ekranu i zniknie za nią, metoda reset wygeneruje jej nowe „wygląd” i przeszkoda zostanie umieszczona na końcu (szerokość ekranu i pół szerokości ekranu).