Piszemy grę w kulki

Uruchomienie projektu

Po skończonej konfiguracji środowiska, sprawdźmy czy wszystko działa poprawnie. Wpisz komendy:

yarn run build:watch

oraz

yarn start

Skrypt build:watch uruchamia nam transpilacje kodu na żywo ( flaga –watch) , natomiast yarn start uruchamia naszą aplikacje w electron.js.

Ekran powitalny

Kontroler dla widoków

Na początek możemy stworzyć kontroler do serwowania widoków. Może nazywanie tego kontrolerem jest zbyt na wyrost ale spójrzmy na poniższy kod.

const setView = (view) => {
    const root = document.getElementById('root');
    root.innerHTML = '';
    root.appendChild(view());
}

export {setView};

Tworzę funkcję która przyjmuję za argument widok, następnie kontroler podpina ten widok pod element root w HTML.
Pozwoli nam to serwować użytkownikowi sceny np. ekran powitalny, planszę oraz ekran wyniku.
Jak widzisz funkcja setView() czyści element a dopiero później wstawia nasz widok.
Chcemy mieć pewność że po przełączeniu sceny znikną poprzednie widoki.

Pierwszy widok

Następnie tworzymy ekran powitalny. Na samym początku tworzę prostego div’a dodaje do niego klase „welcome” którą później będe stylować.

Dodajmy jeszcze jakąś wiadomość powitalną i guzik który przekieruje nas do kolejnego widoku.

import button from './../components/button';
import {setView} from './../controllers/viewController'
import gameView from './gameView';

const startView = () =>{   
    const view = document.createElement('div');
    view.className = 'welcome';
    view.innerHTML = '


<h1> Gra w kulki </h1>



';
    view.appendChild(button('startGame', 'start', 'btn btn__prime', setView, gameView));

    return view;
}

export default startView;

Czas teraz połączyć widok i kontroler.  W pliku app.js importuje powyższe moduły i wywołuje kontroler przekazując mu widok.

import { setView } from './controllers/viewController';
import startView from './views/startView';

setView(startView);

Dodajmy do tego style i uzyskamy wówczas coś takiego:

 

Tworzymy plansze

Czas na wykonanie planszy. W tym celu stworzymy klasy takie jak: Board, Tile oraz Ball. Ułatwi nam to tworzenie widoku oraz jego obsługę.

Będziemy chcieli uzyskać poniższy widok planszy.

Na screenie widzicie obecną strukturę projektu w src/ znajdziemy katalogi takie jak:

• controllers – będą obsługiwać logikę aplikacji i obsługiwać warstwę widoku.
• components – elementy „pomocnicze” które będą wstrzykiwane do widoków lub też bardziej rozbudowane klasy które pomogą w tworzeniu gry.
• views – widoki, ekrany które będą serwowane użytkownikowi.

Ekran gry

Kod pisałem na zmianę w różnych plikach więc najlepiej jak pokaże Wam efekt finalny. Jeśli chodzi o pisanie najlepiej budowac małe funkcjonalności i testować je na bieżąco.  Poniżej kod gameView.js:

 

import Board from './../components/Board';
import Color from './../components/Colors';

function gameView(){
    const view = document.createElement('div');
    view.className = 'gamePanel';

    const board = new Board(12);
    const colors = new Color();

    board.boardGenerate(12).then((tiles)=>{
        view.appendChild(tiles);
        board.randomBallGenerate(12, colors);
    })

    return view;
}

export default gameView;

Oczywiście nie jest to jeszcze finalny widok planszy.
W tym poście opisze tylko generowanie początkowej planszy wraz z losowaniem kulek. Tak jak poprzednio tworzymy element widoku (linia 5) następnie nadajemy klasę (później oscylujemy to i dodamy flex-box by cała plansza ładnie się środkowała).  Tworzymy obiekt planszy do konstruktora podajemy wielkość planszy.

 

 

 

CDN…