Dzi­siaj stwo­rzę pierw­szą wer­sję plan­szy do mojej gry. Spró­bujmy wykre­ować obszar 16x16, gene­ro­wany na pod­sta­wie tablicy z infor­ma­cjami o poszcze­gól­nych polach. Po wyge­ne­ro­wa­niu mapy pozo­sta­nie ona cał­ko­wi­cie sta­tyczna więc licze­nie fps pozo­sta­wię do kolej­nego arty­kułu. Dzi­siaj zaj­mijmy się stwo­rze­niem głów­nej klasy oraz kilku metod ini­cja­li­zu­ją­cych naszą planszę.

Przede wszyst­kim potrze­bu­jemy obiektu canvas o roz­mia­rach 512x512px(16x16 pól o roz­mia­rach 32x32px).

<canvas id="gameBoard" width="512" height="512"></canvas>

Do wyge­ne­ro­wa­nia mapy potrze­bu­jemy rów­nież kilku tek­stur. Tym­cza­sowo posia­dam jedy­nie trawę, wodę, cegłę oraz lód.

Trawę usta­wi­łem jako tło ele­mentu canvas bez­po­śred­nio w pliku CSS. Spró­bujmy stwo­rzyć główną klasę o nazwie GameBoard.

var GameBoard = {
    ctx: null,
    TEXTURE_ID: {ICE: 1, BRICK: 2, WATER: 3}, 
    textures: [null, 'images/ice.png', 'images/brick.png', 'images/water.png'],
 
    board:[
        [1,1,1,1,1,1,2,2,2,2,1,1,1,1,1,1],
        [1,1,1,2,2,2,2,2,2,2,2,2,2,1,1,1],
        [1,1,2,2,2,2,2,2,2,2,2,2,2,2,1,1],
        [1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1],
        [1,2,2,1,1,2,2,2,2,2,2,1,1,2,2,1],
        [2,2,2,1,3,2,2,2,2,2,2,1,3,2,2,2],
        [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
        [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
        [2,2,2,2,2,2,2,1,1,2,2,2,2,2,2,2],
        [0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0],
        [0,2,2,2,1,2,2,2,2,2,2,1,2,2,2,0],
        [0,2,2,2,2,1,1,1,1,1,1,2,2,2,2,0],
        [0,0,2,2,2,2,2,2,2,2,2,2,2,2,0,0],
        [0,0,0,2,2,2,2,2,2,2,2,2,2,0,0,0],
        [0,0,0,0,0,0,2,2,2,2,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],
 
    drawBoard: function() {
        for(var y=0; y<16; y++)
        {
            for(var x=0; x<16; x++)
            {
                if(this.board[y][x]>0)
                {
                    this.ctx.save();
                    this.ctx.fillStyle = this.textures[this.board[y][x]];
                    this.ctx.fillRect(x*32,y*32,32,32);
                    this.ctx.restore();
                }
            }
        }
    },
 
    preloadTextures: function(i){
        var img = new Image();
        img.src = this.textures[i];
        img.onload = function() {
 
            GameBoard.textures[i] = GameBoard.ctx.createPattern(img, 'repeat');
            if(GameBoard.textures[i+1])
                GameBoard.preloadTextures(i+1);
            else
                GameBoard.drawBoard();
        }
    },
 
    init: function (){
        this.canvas = document.getElementById('gameBoard');
        if (this.canvas.getContext)
        {
            this.ctx = this.canvas.getContext("2d");
            this.preloadTextures(1);
        }
    }
};

Pierw­sze pole naszego obiektu — ctx(context) to kon­tekst obiektu canvas. Po przez niego odwo­łu­jemy do wszyst­kich metod rysu­ją­cych. Następny obiekt — TEXTURE_ID — jest niczym innym jak zbio­rem stałych(troszkę to przy­po­mina enum znane z c++). W tym przy­kła­dzie nie jest on w ogóle uży­wany jed­nak w przy­szło­ści wygod­niej­sze będzie odwo­ły­wa­nie się za pomocą nazw. Kolejne pole — textu­res — to tablica adre­sów do naszych tek­stur. Zauważ, że indeksy w tej tablicy odpo­wia­dają war­to­ściom sta­łych w TEXTURE_ID( TEXTURE_ID.ICE = 1 oraz textures[1] = ‚images/ice.png’). Przy­ją­łem, że tek­stura zerowa to po pro­stu tek­stura pusta(pełna prze­zro­czy­stość). Na końcu wid­nieje tablica board zawie­ra­jąca infor­ma­cje o każ­dym polu. Liczba od 0 do 3 okre­śla rodzaj tekstury.

init()

Metoda ta wyła­puje kon­tekst naszego pola canvas zapi­suje go do pola ctx oraz wywo­łuje metodę preloadTextures(1). Roz­pocz­niemy łado­wa­nie tek­stur roz­po­czy­na­jąc od tej o iden­ty­fi­ka­to­rze jedynki(zero jest zare­zer­wo­wane dla tek­stury pustej).

pre­lo­ad­Te­xtu­res()

Jako para­metr metoda ta przyj­muje iden­ty­fi­ka­tor tekstury(jej indeks w tablicy textu­res). Naj­pierw two­rzymy pusty obraz, a następ­nie usta­lamy jego adres. Po zała­do­wa­niu pliku z gra­fiką gene­ru­jemy nowy wzór za pomocą ctx.createPattern() oraz nad­pi­su­jemy nim adres prze­cho­wy­wany w tablicy textu­res. Następ­nie spraw­dzamy czy tek­stura o iden­ty­fi­ka­to­rze o jeden więk­szym ist­nieje. Jeśli tak ładu­jemy ją. Jeśli nie wyświe­tlamy mapę

draw­Bo­ard()

Ta metoda rysuje pole po polu prze­cho­dząc przez wszyst­kie ele­menty z tablicy board. Sądzę, że kod jest oczywisty.

Efekt dzia­ła­nia skryptu:

Co następ­nym razem?

Umie­ścimy na plan­szy naszą postać oraz zapro­gra­mu­jemy metody odpo­wie­dzialne za wyła­py­wa­nie zda­rzeń kla­wia­tury. Moż­liwe sta­nie się płynne poru­sza­nie po mapie.