Układanka

Dzisiaj zrobimy sobie prostą, lecz bardzo ciekawą układankę, podejrzałem ją bardzo dawno, była częścią zestawu gier pewnej aplikacji. Dodałem ją do programu Brain Pop Up:

Prosta i bardzo fajna gra, która uczy strategi i planowania.
To zaczynamy:

 

Rodzaj elementu Nazwa elementu Ustawienia
Form Form1 Name: Form1
Text: JigSaw
Size: 734;831
StartPosition: CenterScreen
Icon: 
TableLayoutPanel TableLayoutPanel1 Dock: Fill
Collection:
-Row1:  192
-Row2: 100%
Panel PanelTop Dock: Fill
Panel PanelBottom Dock: FIll
Panel  mainBoard Name: mainBoard
BackColor: White
Location: 111;19
Size: 465;453
Panel sampleFirst Name: sampleFirst
BackColor: White
Location: 320;25
Size: 153;142
Panel sampleSecond Name: sampleSecond
BackColor: White
Location: 494;25
Size: 153;142
Panel firstLeftTop Parent: sampleFirstName: firstLeftTop
BackColor: White
Location: 9;9
Size:67;62
Panel firstLeftBottom Parent: sampleFirst
Name: firstLeftBottom
BackColor: White
Location: 9;70
Size:67;62
Panel firstRightTop Parent: sampleFirst
Name: firstRightTop
BackColor: White
Location: 76;9
Size:67;62
Panel firstRightBottom Parent: sampleFirst
Name: firstRightBottom
BackColor: White
Location: 76;70
Size:67;62
Panel firstMiddle Parent: sampleFirst
Name: firstMiddle
BackColor: Black
Location: 69;64
Size:13;12
Panel secondLeftTop Parent: sampleSecond
Name: secondLeftTop
BackColor: White
Location: 9;9
Size: 67;62
Panel secondRightTop Parent: sampleSecond
Name: secondRightTop
BackColor: White
Location: 76; 9
Size: 67;62
Panel secondLeftBottom Parent: sampleSecond
Name: secondLeftBottom
BackColor: White
Location: 9; 70
Size: 67;62
Panel secondRightBottom Parent: sampleSecond
Name: secondRightBottom
BackColor: White
Location: 76; 70
Size: 67;62
Panel secondMiddle Parent: sampleSecond
Name: secondMiddle
BackColor: Black
Location: 69;64
Size:13;12
Panel hiddenLeftTop Name: hiddenLeftTop
Location: 665; 34
Visible: False
Panel hiddenLeftBottom Name: hiddenLeftBottom
Location: 665; 95
Visible: False
Panel hiddenRightTop Name: hiddenRightTop
Location: 703; 34
Visible: False
Panel hiddenRightBottom Name: hiddenRightBottom
Location: 703; 95
Visible: False
Label Label_points Name: Label_points
Location: 13; 14
Size: 127; 81
ForeColor: Black
Font: Arial; 15,75pt; style=Bold
Text: Punkty:
TextAlign: MiddleRight
Label Label_steps Name: Label_steps
Location: 10; 76
Size: 127; 81
ForeColor: Black
Font: Arial; 15,75pt; style=Bold
Text: Krok:
TextAlign: MiddleRight
Label points Name: points
Location: 136; 14
Size: 121; 81
ForeColor: Red
Font: Microsoft Sans Serif; 21,75pt;style=Bold
Text: 0
TextAlign: MiddleLeft
Label steps Name: steps
Location: 135; 76
Size: 121; 81
ForeColor: Black
Font: Microsoft Sans Serif; 21,75pt;style=Bold
Text: 0
TextAlign: MiddleLeft
PictureBox startPB Parent: mainBoard
Name: startPB
Location: 169; 340
Size: 330; 132
SizeMode: Zoom
Image: image

Jak będzie wyglądała nasza gra:

No to zaczynamy. Powyższa instrukcja ustawi początkowe elementy Formy, a nasz projekt będzie składał się z dwóch elementów, Formy i Jigsaw class

Po ułożeniu wszystkich elementów kod naszej formy będzie bardzo prosty:

Na pierwszym etapie naszego tutoriala będziemy generować plansze do gry, poniższy kod nie zawiera zaawansowanych elementów, jego opis znajdziecie w kodzie mimo, że jest długi zawiera zmienne potrzebne do ustawienia i obsługi elementów rozgrywki.

 

Pierwszy element jest konstruktorem, który zainicjuje nasz projekt. Po uruchomieniu nasza plansza nie będzie jeszcze wyglądała okazale, ale spokojnie, będziemy powoli dodawać do niej funkcjonalność.

Zajmiemy się wszystkimi tymi elementami z osobna. Najpierw musimy się zastanowić ile możliwości ustawienia naszego wzoru mamy, jeśli nasz wzór tworzymy z trzech elementów wtedy mamy tylko cztery możliwości jego ułożenia:

Innych możliwości nie ma a zmniejszenie ilości wypełnionych kwadratów, czyli wprowadzenie dodatkowych wzorów zepsułoby przyjemność gry i ułatwiłoby znacząco rozgrywkę. Nasz wybór określimy za pomocą metody:

Mówi on nam, że wybiera losowo element od zera do 3. Następnie tworzymy listę kolorów, które następnie będziemy wybierać losowo. Aby podnieść poziom trudności, warto dodać nowe kolory, trudniej jest połączyć sześć czy siedem kolorów niż cztery. Ma to również znaczenie, gdy mamy dużą planszę, więcej kolorów komplikuje grę.

Efekt będzie następujący:

Zajmiemy się teraz kolejnym elementem naszej gry, czyli widmem naszych wzorów. Plan jest prosty, dla ułatwienia rozgrywki wprowadzimy element, który będzie wizualizował nam nasze wzory na planszy. Nasz obiekt będziemy, ustawia za pomocą koordynatów czarnego punktu:

Bierzemy koordynaty czarnego punktu, w tym wypadku (0,0) i dodajemy, a to do pierwszej wartości, a to do drugiej i ostatecznie do obu, sprawdzając wszystkie opcje na około. Nasza logika sprawdzi, czy ułożenie elementu jest możliwe, jeśli tak to wyświetli je na podstawie wzoru:

Co zasługuje tutaj na uwagę to pobieranie koordynatów czarnego elementu. Jak pamiętacie, do każdego elementu dodaliśmy koordynaty w liście „blackPointsPanelsList”:

Przeszukujemy naszą listę paneli i w momencie zgodności nazw elementów pobieramy koordynaty.

Używając:

Wybiera on nam kliknięty element. Możemy rozpatrywać wskazany obiekt Panel i wszystkie jego elementy. Efekt będzie imponujący:

Jak już możemy podglądać elementy, przyszedł czas na ich ułożenie.

zamarkujmy sobie pewne elementy naszego kodu:

da nam to możliwość podejrzenia naszej zmiany w praktyce:

Sercem naszej aplikacji będzie właśnie metoda „blackPoints_Click” to ona wszystkim zarządza i pociąga za sznurki. Mogłoby się wydawać, że Timer odgrywa tu ważną rolę, lecz tak nie jest. Timer jest elementem dodatkowym, który ma na celu wytworzenie efektu pojawienia się, kolory powinny płynnie zwiększać swój odcień. Warto zaznaczyć w tym miejscu, że lista „occupiedFields” jest wykorzystywana w wymienionej wyżej operacji i nie odgrywa ważnej roli w całym procesie.

sprawdzimy teraz, czy nasza gra się już zakończyła:

w połączeniu z poprzednim elementem sprawdzimy wszystkie czarne punkty i możliwość ułożenia wzoru. Sprawdzamy wszystkie elementy, po kolei dopasowując i sprawdzając kolor pól.

 

Przesuńmy teraz nasze wzory w lewo:

to da nam możliwość układania różnych wzorów na planszy:

Ostatnim elementem naszej układanki będzie zerowanie jednakowych elementów i przypisywanie punktów. Jak będziemy sprawdzać nasze elementy? Otóż dostęp do ułożonego wzory będziemy mieli swobodny dlatego dla każdego ułożonego elementu, jeśli nie będzie miał on koloru tła, będziemy sprawdzać element pod nim, nad nim, z lewej strony i prawej.

tak wygląda kod który to sprawdzi:

Nasza gra jest już gotowa:

Wisienką na torcie będzie ramka naszych elementów wzoru:

Nasz wzór otrzyma stylową ramkę:

Wygląda na to, że już skończyliśmy naszą grę, pełen kod pobrać można z mojego GitHuba: https://github.com/VisualMonsters/JigSaw

lub dla nie lubiących Gita można pobrać zipa:  Jigsaw

Permalink do tego artykułu: https://visualmonsters.cba.pl/ukladanka/

Dodaj komentarz

Twój adres email nie będzie publikowany.