code-laboratory.com jest blogiem poświęconym w całości programowaniu oraz technologiom internetowym. Znajdziesz tutaj kod, gotowy do wykorzystania w twoich projektach.

Kod źródłowy javascript do gry LabMathGame

Napisane: Grudzień 17th, 2009 | Kategoria: javascript | Tagi: , , | 1 Comment »

Jakiś czas temu opublikowałem grę, którą napisałem jako gadżet do iGoogle. Jest to gra o bardzo prostych zasadach. Trzeba po prostu szybko dodawać cyfry. Postanowiłem pokazać kod źródłowy który napisałem na potrzeby tej gry. Jest to zwykły plik HTML, który można uruchomić w przeglądarce. Do stworzenia gadżetu iGoogle potrzeba oczywiście pliku XML, ale chciałem, żeby można było od razu zobaczyć efekt skryptu w przeglądarce. Aby wiedzieć o czym poniżej piszę, należy pobrać najpierw kod źródłowy i go przeglądnąć ;-)

Zasada działania

Cały plik to mieszanina HTML, CSS oraz JavaScript’u. Pominę style i przejdę od razu do kodu. Na początku deklarowane jest kilka zmiennych globalnych:

  • level – numer rundy; jeśli podana suma cyfr zgadza się z rzeczywistą sumą to zmienna jest inkrementowana
  • countCols – liczba kolumn obszaru dodawania; domyślnie ustawiłem 5
  • countSecPerNumber – liczba milisekund przeznaczona na pokazanie kolejnej cyfry (liczba sekund wybrana na początku rozgrywki z pola select pomnożona razy 1000)
  • randed – tablica wylosowanych cyfr
  • endTime – do tej zmiennej będzie przypisana funkcja setTimeout
  • endOfLevel – zmienna przechowuje wartość logiczną mówiącą czy zakończył się czas przewidziany na pokazanie wszystkich cyfr w tabelce; jest stworzona po to, żeby uniemożliwić podanie wyniku zanim cyfry zostaną wylosowane. Wiem, że troche dyskryminuje jasnowidzów ;-)
  • levelLength – liczba milisekund, po jakiej zostanie wyświetlona ostatnia cyfra
  • infoCorrect, infoWrong, infoTime, infoRunning – tablice z komentarzami człowieczka w określonych sytuacjach

Teraz czas na funkcje:

  • startLabMathGame () – główna funkcja gry; wywoływana jest po kliknięciu na start i wywołuje inne funkcje
  • createTable () – wywoływana jest w funkcji startLabMathGame i tworzy tabele z odpowiednią ilością wierszy i kolumn wypełnioną pytajnikami
  • fillTable () – steruje czasem po jakim mają się pokazywać cyfry oraz czasem po jakim sympatyczny człowieczek poinformuje, że time is over ;-)
  • fillTd (row, col) – wywoływana cyklicznie w funkcji fillTable do wylosowania i uzupełnienia pojedynczej komórki
  • checkAnswer() – funkcja sprawdza poprawność odpowiedzi – jeśli jest dobra to inkrementuje zmienną level i gracz uzyskuje dostęp do kolejnej rundy
  • endOfTime () – funkcja wywoływana gdy skończy się czas
  • getInfo (event, correct) – wyświetla odpowiedni komentarz w zależności od sytuacji
  • switchButtons(visibility) – przełącza przycisk „start” i pole tekstowe do wpisywania wyniku, aby nie były wyświetlane naraz.
Podsumowanie

Może nie stanę się sławny po opublikowaniu tego skromnego kodu, ale może się komuś przydać do nauki lub stać się inspiracją do napisania czegoś ;-) Jeśli można było coś zrobić lepiej to proszę napisz w komentarzach. Jeszcze nie czuję się guru w JavaScript, więc jestem otwarty na podpowiedzi.


1 komentarz na “Kod źródłowy javascript do gry LabMathGame”

  1. 1 Maryam napisał(a) 16:36, Kwiecień 21st, 2012:

    pisze:Być może jesteś w mocy mnie wesprzeć: piszę blog: ocwkalziek w innej dziedzinie, jednak nie to jest materią mojego pytania: wielki szkopuł mam ze spamem i nijak nie umiem sobie z tym dać rady Zauważyłem, że Twf3j blog jest utrzymany w porządku i najwyraźniej nie masz tego problemu. Jakim sposobem to robisz? Awansem dziękuję za odzew na Twoim blogu. BTW: nadzwyczaj fajna stronka

Zostaw komentarz

  • Anti-Spam Quiz: