zawierający style, dźwięki i inne potrzebne do pracy gry pliki. Zarówno plik
zostanie automatycznie utworzony na Twoim dysku przez program rozpakowujący grę.
Kod JavaScript, który uruchamia grę ma następującą składnię:
(2)
var game=new puzzle('parentID', 'timerID', 'image', 'bkColor', gameOver, setInitParameters);
game – jest obiektem gry. Poprzez zmienną
game możesz odczytywać i zmieniać opcje gry, a także uruchamiać grę, zatrzymywać ją, itp.,
parentID – jest identyfikatorem obiektu (najczęściej typu
div), wewnątrz którego gra zostanie wyświetlona. Jeśli obiekt o podanym identyfikatorze nie istnieje, gra się nie uruchomi,
timerID – jest identyfikatorem obiektu (najczęściej typu
div), wewnątrz którego gra będzie wyświetlała czas gry. Jeśli obiekt o podanym identyfikatorze nie istnieje, gra się uruchomi, a czas nie będzie wyświetlany,
image – jest nazwą zdjęcia, które będzie podzielone na puzzle,
bkColor – jest kolorem tła (podaj wartość
transparent, jeśli kolor tła gry ma być taki sam jak kolor tła strony),
void gameOver(puzzle) – jest funkcją, która zostanie wywołana po zakończeniu gry. Można nie podać tej funkcji (należy wtedy podać wartość 0). Funkcja
gameOver() przyjmuje jeden parametr, którym jest obiekt gry, funkcja nie powinna niczego zwracać,
void setInitParameters(puzzle) – jest funkcją, która zostanie wywołana po uruchomieniu gry, ale przed jej wyświetleniem. Umożliwia zmianę parametrów gry przed jej rozpoczęciem. Funkcja przyjmuje jeden parametr, który jest obiektem reprezentującym naszą grę i nie powinna niczego zwracać. Można nie podać tej funkcji (należy wtedy podać wartość 0). W takiej sytuacji gra uruchomi się z parametrami domyślnymi. Funkcja może być zmieniana dynamicznie podczas pracy programu za pomocą funkcji
setCallInitParam().
Pełny, działający kod strony internetowej zawierający grę uruchamianą automatycznie po załadowaniu strony wygląda następująco:
(3)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, user-scalable=yes">
<link rel="shortcut icon" type="image/x-icon" href="data/games.ico">
<link rel="stylesheet" type="text/css" href="data/style.css">
<title>Puzzle - games.3n.com.pl</title>
<style>
html, body{overflow:hidden; margin: 0; padding: 0; height: 100%}
</style>
<script src="puzzle.js" defer></script>
<script>
function gameOver(p){
alert("Ułożone, grałeś: "+p.getTime()+" ms");
p.startPlay();
};
function readyToPlay(p){
p.startPlay();
};
function setInitParameters(p){
p.setNotifyReadyToPlay (readyToPlay);
p.setNxNy(3,2);
};
window.addEventListener('load', function(){
new puzzle('parentID', 'timerID', 'images/1BBW_0210.jpg', 'transparent', gameOver, setInitParameters);
});
</script>
</head>
<body>
<div id="parentID" style="width:100%; height:100%">
<div id="timerID"></div>
</div>
</body>
</html>
Powyższy kod działa w następujący sposób: po załadowaniu strony (zdarzenie
'load') – przeglądarka tworzy obiekt
puzzle. Obiekt
puzzle tworzy wewnątrz siebie wszystkie potrzebne obiekty i podłącza się do
div-a o
id=parentID.
Następnie przeglądarka zaczyna wczytywać zdjęcie (images/1BBW_0210.jpg). Po wczytaniu zdjęcia zostaje wywołana funkcja
setInitParameters() z parametrem
p, który jest obiektem reprezentującym uruchamianą właśnie grę. W funkcji
setInitParameters() następuje przypisanie funkcji powiadamiającej o nazwie
readyToPlay() oraz wykonanie funkcji
setNxNy(3,2), która ustawia liczbę puzzli w poziomie na równą 3 i w pionie na równą 2.
Po zakończeniu wykonywania funkcji
setInitParameters() program wykonuje operacje na wczytanym zdjęciu (dzielenie na puzzle i inne niezbędne obliczenia). Po ich wykonaniu zostaje wywołana (przypisana wcześniej) funkcja
readyToPlay() z parametrem
p reprezentującym cały czas naszą grę. W funkcji
readyToPlay() na obiekcie
p zostaje wykonana funkcja
startPlay(), która uruchamia grę.
Po skończonej grze zostaje wykonana funkcja
gameOver() (również z parametrem p), w której zostaje wyświetlony czas gry odczytany za pomocą funkcji
getTime() (którą wykonujemy również na obiekcie
p reprezentującym cały czas naszą grą).
Po zamknięciu okna z komunikatem ponownie wywoływana jest funkcja
startPlay() i sytuacja może być w ten sposób powtarzana aż do zamknięcia okna przeglądarki.
Powyżej omówiony kod zapisany w pliku
puzzle_1.htm można tu
przetestować.