Strona główna » Po Godzinach » Gry » Tabliczka mnożenia - kod źródłowy
2x2
 

Tabliczka mnożenia - kod źródłowy

https://mattomatti.com/g06d
· Gra · Kod źródłowy ·

Wstęp

Niniejszy artykuł ma na celu wytłumaczenie w jaki sposób została napisana Tabliczka mnożenia. Każda linijka ma dołączony komentarz, który wyjaśnia, dlaczego dana linijka została wypisana w ten sposób. Ponadto wśród informacji zawarte są informacje na sposób w jaki można dany projekt ulepszyć / dostosować.

Implementacja

Ułożenie na stronie

Przede wszystkim najpierw trzeba ustalić gdzie na stronie będzie wyświetlana gra oraz z jakich pól będzie można skorzystać w celu wyświetlenia pytania lub statystyk. W tym przypadku są to dwa obiekty typu DIV:

  1. <div id="_game"></div>
  2. <div id="_statistics"></div>

(1.) Pole _game służy do wyświetlania pytania, a (2.) pole _statistics do wyświetlenia statystyk związanych z aktualną rozgrywką.

Kod JavaScript

Kod sterujący grą wymaga zadeklarowania kilku zmiennych, które pozwolą na zliczania różnego rodzaju informacji na temat rozgrywki:

  1. var MAX = 9;
  2. var MAXODP = 20;
  3. var wynik = 0;
  4. var a = 0;
  5. var b = 0;
  6. var odp_popr = 0;
  7. var odp_bledne = 0;
  8. var odp = 0;
  9. var czasod = 0;

Zmienne mają następujące zastosowanie: (1.) MAX - określa górny zakres losowania wybranego czynnika iloczynu, (2.) MAXODP - określa ile pytań zostanie zadanych, (3.) wynik - przechowuje wynik mnożenia dwóch wylosowanych liczb, (4. - 5.) wylosowane liczby a i b. Do tego w trakcie rozgrywki zliczane będą: (6.) odpowiedzi poprawne i (7.) błędne oraz (8.) ile pytań już zostało zadanych. Do statystyk na koniec potrzebna jest jeszcze zmienna, która (9.) zapamięta czas rozpoczęcia sprawdzianu.

Przed rozpoczęciem gry zmienne mogą mieć inne wartości niż domyślne tj. po rozgrywce, dlatego potrzebna jest funkcja prepareGame(), która wyzeruje wszystkie liczniki, a potem odświeży wygląd ekranu.

  1. function prepareGame(val, val2) {
  2.  MAX = val;
  3.  MAXODP = val2;
  4.  var d = new Date();
  5.  czasod = d.getTime();
  6.  odp_popr = 0;
  7.  odp_bledne = 0;
  8.  odp = 0;
  9.  a = 0;
  10.  refreshAnswer();
  11. }

(1.) Funkcja prepareGame() przyjmuje dwa argumenty: val i val2, które kolejno oznaczają zakres losowanych liczb oraz ile pytań ma być zadanych. (2. - 3.) Dane te są zachowane następnie w odpowiednich zmiennych. Zaletą takiego rozwiązania jest fakt, że nie trzeba modyfikować tych zmiennych w innych miejscach kodu co mogłoby mieć nieoczekiwane skutki. W przypadku restartu gry wystarczy przygotować grę z już dostępnymi wartościami MAX i MAXODP. Choć wtedy ponowne przypisywanie jak np. MAX = MAX jest zbędne to takie ułożenie kodu pozwala na mniejszą pomyłkę podczas modyfikowanie innych zmiennych. (9.) Bardzo ważną częścią kodu jest ustalenie wartości a na 0. Program w ten sposób wykrywa, że test jeszcze się nie rozpoczął. (10.) Wywołana jest funkcja odświeżająca wyświetlane zapytanie (zostanie wyjaśniona niżej).

Funkcji wyświetlające czytelna dla użytkownika informacje są dwie: refreshAnswer() odpowiada za odświeżenie wyświetlanego równania, a refreshStats() statystyk.

  1. function refreshAnswer(){
  2.  document.getElementById("_game").innerHTML = (a == 0) ? ".. x .. = .." : a + " x " + b + "= " + (wynik == 0 ? "?" : wynik);
  3. }
  4. function refreshStats(){
  5.  document.getElementById("_statistics").innerHTML = (a != 0) ? "Odpowiedzi poprawnych " + odp_popr + ", błędnych " + odp_bledne : "";
  6. }

(1.) W przypadku odświeżania pytania (2.) zmieniana jest zawartość pola _game. W przypadku, gdy gra się nie zaczęła tj. a = 0 to wyświetlany zostaje tekst domyślny. W przeciwnym wypadku wyświetlane jest zapytanie oraz aktualnie wpisana liczba. Jeśli gracz nie wpisał nic to można wypisać znak zapytania. (4.) Z kolei przy odświeżaniu statystyk: (5.) jeśli rozgrywka trwa czyli a jest różne od 0 to wyświetlane są odpowiednie statystyki.

Pozostały jeszcze do napisania funkcje, które wczytają od użytkownika co wpisał oraz losowanie pytania. W przypadku funkcji, która będzie reagowała na to co naciśnie gracz kod wygląda następująco:

  1. function check(event){
  2.  var _key = (window.Event) ? event.which : event.keyCode;
  3.  if(a == 0){
  4.   var d = new Date();
  5.   czasod = d.getTime();
  6.   odp_popr = 0;
  7.   odp_bledne = 0;
  8.   odp = 0;
  9.   nextQuestion();
  10.  } else
  11.  if(_key >= 48 && _key <= 57){
  12.   wynik *= 10;
  13.   wynik += _key - 48;
  14.   if(wynik > a*b){
  15.    wynik = _key - 48;
  16.    odp_bledne++;
  17.    refreshStats();
  18.   }
  19.   refreshAnswer();
  20.   if(wynik == a*b){
  21.    refreshStats();
  22.    odp_popr++;
  23.    odp++;
  24.    nextQuestion();
  25.   }
  26.  }
  27. }

(2.) Pobranie wciśniętego klawisza. (3.) Jeśli gra się jeszcze nie rozpoczęła to: (4. - 8.) ustal wartości zmiennych i (9.) zadaj pytanie. (10.) Jeśli jednak gra trwa to (11. - 12.) dopisz wciśniętą cyfrę na koniec wpisanej liczby. (13.) Jeśli wpisany wynik jest większy od iloczynu to (14.) ustal wpisaną liczbę na wpisaną cyfrę, (15.) zwiększ błędne odpowiedzi i (16.) odśwież statystyki. (18.) Niezależnie od klawisza odśwież główne pole. (19.) Jeśli liczba została odgadnięta to (20.) odśwież statystyki, (21.) zwiększ liczbę poprawnych odpowiedzi, (22.) zwiększ ile pytań zostało zadanych i (23.) zadaj kolejne pytanie.

Do wyjaśnienia na koniec została funkcja losująca pytanie nextQuestion():

  1. function nextQuestion(){
  2.  if(odp == MAXODP){
  3.   a = 0;
  4.   var d = new Date();
  5.   document.getElementById("_statistics").innerHTML = "Skuteczność " + (Math.round((odp / (odp_popr + odp_bledne))*10000))/100 + "% (błędnych odpowiedzi "+odp_bledne+")<br>średni czas odpowiedzi " + (d.getTime() - czasod)/(1000*odp) + " s";
  6.   prepareGame(MAX, MAXODP);
  7.  } else {
  8.   a = Math.round(Math.random() * MAX + 1);
  9.   b = Math.round(Math.random() * MAX + 1);
  10.   wynik = 0;
  11.   refreshAnswer();
  12.  }
  13. }

(2.) Jeśli gracz udzielił tyle odpowiedzi ile maksymalnie powinno być pytań to: (3.) ustal, że gra nie trwa, (4.) pobierz aktualny czas i (5.) wypisz podsumowanie, a następnie (6.) przygotuj planszę pod kolejny test. (7.) Jednak jeśli wciąż są pytania do zadania to (8. - 9.) wylosuj liczby a i b, (10.) zresetuj wpisany wynik przez gracza i (11.) odśwież pytanie.

Zmiana ustawień gry

Ilość pytań oraz poziom można dostosowywać przy pomocy funkcji prepareGame(). W celu zrestartowania gry należy wywołać prepareGame(MAX,MAXODP). W celu zmiany liczby pytań do zadania wywołać prepareGame(MAX,k), gdzie za k można podłożyć dowolną liczbę lub można zmienić zakres liczb a i b wywołując prepareGame(k,MAXODP)

Stylizacja

Odpowiednie linijki kodu odpowiadają stylu (2. - 6.) pola pytania, (7. - 9.) pola statystyk oraz (10. - 19.) guzików na stronie.

  1. <style>
  2. #_game{
  3.  font-weight:700;
  4.  font-size:120px
  5. }
  6. #_statistics{
  7.  font-size:30px
  8. }
  9. .btn{
  10.  padding:4px;
  11.  line-height:36px;
  12.  border: 1px solid black;
  13.  border-radius:8px;
  14.  text-decoration:none
  15. }
  16. .btn:hover{
  17.  color:black
  18. }
  19. </style>