Projekt i częściowa implementacja gry logicznej w technologii HTML5
description
Transcript of Projekt i częściowa implementacja gry logicznej w technologii HTML5
![Page 1: Projekt i częściowa implementacja gry logicznej w technologii HTML5](https://reader036.fdocuments.net/reader036/viewer/2022082715/56815b3f550346895dc91cab/html5/thumbnails/1.jpg)
Projekt i częściowa implementacja gry logicznej w technologii HTML5
Marcin Lach nr. albumu 5399
Promotormgr inż. Zbigniew Rosiek
![Page 2: Projekt i częściowa implementacja gry logicznej w technologii HTML5](https://reader036.fdocuments.net/reader036/viewer/2022082715/56815b3f550346895dc91cab/html5/thumbnails/2.jpg)
Plan prezentacji•Cel i zakres pracy•Przedstawienie możliwości technologii
HTML5•Wymagania projektowe•Projekt systemu•Implementacja•Testowanie•Podsumowanie i wnioski
![Page 3: Projekt i częściowa implementacja gry logicznej w technologii HTML5](https://reader036.fdocuments.net/reader036/viewer/2022082715/56815b3f550346895dc91cab/html5/thumbnails/3.jpg)
Cel pracy inżynierskiej•Wskazanie możliwości oferowanych przez
HTML5 pozwalających na tworzenie gier•Wskazanie technologii pomocnych przy
tworzeniu gier•Projekt i implementacja prostej gry
logicznej
![Page 4: Projekt i częściowa implementacja gry logicznej w technologii HTML5](https://reader036.fdocuments.net/reader036/viewer/2022082715/56815b3f550346895dc91cab/html5/thumbnails/4.jpg)
Zakres pracy inżynierskiej•Przedstawienie technologii HTML5•Określenie wymagań funkcjonalnych i
pozafunkcjonalnych•Wybranie odpowiedniego środowiska do
implementacji gry•Projekt•Implementacja•Testy
![Page 5: Projekt i częściowa implementacja gry logicznej w technologii HTML5](https://reader036.fdocuments.net/reader036/viewer/2022082715/56815b3f550346895dc91cab/html5/thumbnails/5.jpg)
Możliwości HTML5•Canvas•Dźwięk i wideo•WebSocket•Magazyn sieciowy•Pracownicy sieciowi
![Page 6: Projekt i częściowa implementacja gry logicznej w technologii HTML5](https://reader036.fdocuments.net/reader036/viewer/2022082715/56815b3f550346895dc91cab/html5/thumbnails/6.jpg)
Wymagania projektowe•Przeprowadzanie rozgrywki•Zapis wyników w bazie danych•Regulacja głośności efektów i muzyki•Odczytywanie wyników z bazy danych•Spójny interfejs użytkownika •Krótki czas oczekiwania na odpowiedź
![Page 7: Projekt i częściowa implementacja gry logicznej w technologii HTML5](https://reader036.fdocuments.net/reader036/viewer/2022082715/56815b3f550346895dc91cab/html5/thumbnails/7.jpg)
Projekt•Projekt bazy danych
![Page 8: Projekt i częściowa implementacja gry logicznej w technologii HTML5](https://reader036.fdocuments.net/reader036/viewer/2022082715/56815b3f550346895dc91cab/html5/thumbnails/8.jpg)
Projekt•Projekt interfejsu
![Page 9: Projekt i częściowa implementacja gry logicznej w technologii HTML5](https://reader036.fdocuments.net/reader036/viewer/2022082715/56815b3f550346895dc91cab/html5/thumbnails/9.jpg)
Projekt•Projekt
logikirubic.mechanics = (function () { var board; //move left function moveLeft(row) { // ciało funkcji } ... //inne funkcje ... //direction-kierunek przesunięcia, //which-który wiersz/kolumna ma być przesunięta function move(direction, which, tiles) { //ciało funkcji } return { move: move }})()
![Page 10: Projekt i częściowa implementacja gry logicznej w technologii HTML5](https://reader036.fdocuments.net/reader036/viewer/2022082715/56815b3f550346895dc91cab/html5/thumbnails/10.jpg)
Implementacja
•Implementacja bazy danych
•Implementacja interfejsu
•Implementacja logiki
![Page 11: Projekt i częściowa implementacja gry logicznej w technologii HTML5](https://reader036.fdocuments.net/reader036/viewer/2022082715/56815b3f550346895dc91cab/html5/thumbnails/11.jpg)
Implementacja•Implementacja
bazy danychCREATE TABLE [dbo].[Wynik](
[ID] [int] IDENTITY(1,1) NOT NULL,[Nick] [varchar](50) NOT NULL,[Punkty] [int] NOT NULL,[Poziom] [int] NOT NULL,[CzasGry] [int] NOT NULL,[DataDodania] [datetime] NOT NULL
) ON [PRIMARY] GO ALTER TABLE [dbo].[Wynik] ADD CONSTRAINT [DF_Wynik_DataDodania] DEFAULT (getdate()) FOR [DataDodania]GO
![Page 12: Projekt i częściowa implementacja gry logicznej w technologii HTML5](https://reader036.fdocuments.net/reader036/viewer/2022082715/56815b3f550346895dc91cab/html5/thumbnails/12.jpg)
Implementacja•Implementacja interfejsu użytkownika
![Page 13: Projekt i częściowa implementacja gry logicznej w technologii HTML5](https://reader036.fdocuments.net/reader036/viewer/2022082715/56815b3f550346895dc91cab/html5/thumbnails/13.jpg)
Implementacja•Implementacja
logikirubic.base = (function () { //ukrywa aktywny ekran i pokazuje ekran 'showScreen' function toggleScreen(showScreen) { $('.screen').addClass('hidden'); rubic.screens[showScreen].run(); $('#' + showScreen).removeClass('hidden'); }; return { toggleScreen: toggleScreen }})();
rubic.screens['start-screen'] = (function () { var firstRun = true; function setup() { $('#start-screen').on('click', '.button', function () { rubic.base.toggleScreen($(this).attr('name')); }) } function run() { if (firstRun) { setup(); firstRun = false; } } return { run: run }; })()
![Page 14: Projekt i częściowa implementacja gry logicznej w technologii HTML5](https://reader036.fdocuments.net/reader036/viewer/2022082715/56815b3f550346895dc91cab/html5/thumbnails/14.jpg)
Testowanie
•Wykorzystane testy
•Wyniki testów
![Page 15: Projekt i częściowa implementacja gry logicznej w technologii HTML5](https://reader036.fdocuments.net/reader036/viewer/2022082715/56815b3f550346895dc91cab/html5/thumbnails/15.jpg)
Podsumowanie
•Zrealizowane założenia
•Zdobyta wiedza
•Napotkane trudności
![Page 16: Projekt i częściowa implementacja gry logicznej w technologii HTML5](https://reader036.fdocuments.net/reader036/viewer/2022082715/56815b3f550346895dc91cab/html5/thumbnails/16.jpg)
Koniec
DZIĘKUJĘ ZA UWAGĘ