Kodulehe loomine, 24. kord – Õppematerjalid

Mängu loomine

1. etapp – mängu põhistruktuuri paikapanemine

Selleks, et mängu luua, on meil vaja esmalt paika panna, missuguseid asju, meil mängu jaoks vaja on:

1. HTML-elemendid:

otsitava sõna kast
piltide kast (kuhu kuvame mängu käigu)
sisestatud tähtede kast (kuhu kuvame tähed, mis sõnasse ei sobi)
info selle kohta, kas täht sobis või mitte või on seesugune täht juba sisestatud
kast, millesse saab tähe sisestada
nupp tähe sisestamiseks, alternatiivina võimalus kasutada ainult klaviatuuri
lisaks peidetud kastid:
- leitud tähtede jaoks
- sobimatute tähtede jaoks

2. JavaScripti funktsioonid:

ettevalmistused mängu alglaadimiseks:
- otsitav sõna;
- otsitava sõna tähtedeks jagamine;
- otsitava sõna juba olemasolevad tähed
- sobimatute tähtede massiivi tekitamine
lehe alglaadimiseks
- kuvatakse otsitav sõna
- seatakse fookus kastile, kuhu tähe saab sisestada
sisestatud tähe kontrollimiseks:
- kontroll, kas on sisestatud vähemalt 1 täht
  - kui ei ole, siis palutakse kasutajal täht sisestada
  - kui on, siis analüüsitakse sisestatud tähte:
    - kontrollitakse, kas täht on juba eelnevalt leitud:
      - kui on eelnevalt leitud, siis antakse selle kohta infot
      - kui ei ole eelnevat leitud, siis uuritakse, kas on antud sõnas:
        
        kui jah, siis:
        
        lisatakse leitud tähtede hulka
        
        kontrollitakse, kas kogu sõna on leitud:
        
        kui jah, siis kuvatakse info selle kohta
        
        kui ei, siis uuritakse, kas on eelnevate sobimatute tähtede hulgas:
        
        kui jah, siis kuvatakse selline teade
        
        kui ei, siis kontrollitakse, mitu sobimatut tähte on:
        
        kui nende arv jääb alla 9, siis lisatakse sobimatute tähtede hulka
        
        kui on 9, siis loetakse mäng lõppenuks!

3. CSS elemendid:

HTML-elementide kujundamiseks

2. etapp – HTML-lehe loomine

Lisame uue html-lehe, nt nimega mang.html:

<!DOCTYPE html>
<html>
 <head>
  <title>Meie mäng</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="mangukujundus.css">
  <script src="mangukood.js"></script>
 </head>
 <body>
 <!-- siia tulevad meie mängu elemendid -->
 </body>
</html>

Nagu eelnevast näha:

on meie mängu pealkiri Meie mäng – märgendite <title> ja </title> vahel
kasutame utf-8 kodeeringut – <meta charset=”utf-8″>
kasutame ekraanisuurusele kohanduvat kujundust – <meta name=”viewport” content=”width=device-width, initial-scale=1″>
kasutame BootStrap 5 (vt vastavad lingid välistele kujundusfailidele ja JavaScript’i ning jQuery koodidele)
kasutame eraldi kujundusfaili mangukujundus.css – <link rel=”stylesheet” type=”text/css” href=”mangukujundus.css”>
kasutame eraldi JavaScript’i faili mangukood.js – <script src=”mangukood.js”></script>

Et meil meelest ära ei läheks, tuleb meil koheselt tekitada 2 uut faili (NB! failid asuvad meie koodiga samas kataloogis):

mangukujundus.css – kujunduse jaoks
mangukood.js – JavaScript’i koodi jaoks

3. etapp – HTML elementide lisamine

HTML-lehe loomise järel lisame sisuelemendid, mida meil vaja on (ehk siis, senised elemendid <body> ja </body> ning nende vahele jääva osa):

<body onload="algseis();">
 <div class="container-fluid">
  <div class="row">
   <div>
    <div id="sona" class="elemendid">Siia tuleb otsitav sõna</div>
   </div>
  </div>
  <div class="row">
   <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
    <div id="pilt">Siia tuleb pilt</div>
   </div>
   <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
    <div id="tahed" class="elemendid">Siia tulevad tähed, mida sõnas ei ole!</div>
   </div>
  </div>
  <div class="row">
   <div>
    <div id="info" class="elemendid">Siia tuleb info selle kohta, kas täht sobis või mitte</div>
   </div>
  </div>
  <div class="row">
   <div id="andmed_sisse">
    Täht:
    <input id="taht" class="elemendid" type="text" maxlength="1">
    <button type="button" id="nupp" class="btn btn-primary elemendid" onclick="taheproov();">Proovi</button>
   </div> 
  </div>
</body>

Eelneva selgitus on järgmine:

elemendile body on sündmuse onload puhul aktiveeriv funktsioon algseis (seda kasutatakse lehe alglaadimiseks) ==> onload=”algseis();”
seejärel tekitame konteineri (<div class=”container-fluid”> ja </div>), kuhu lisame oma mängu elemendid neljas reas (<div class=”row”> ja </div>):
1. reas otsitav sõna, identifikaatoriga sona ==> <div id=”sona” class=”elemendid”>Siia tuleb otsitav sõna</div>
2. reas on 2 veergu, välja arvatud väga väikestel ekraanidel (<div class=”col-lg-6 col-md-6 col-sm-6 col-xs-12″> ja </div>):
  1. veerus pilt, kasti identifikaator on pilt ==> <div id=”pilt”>Siia tuleb pilt</div>
  2. veerus need sisetatud tähed, mida sõnas ei leitud, identifikaatoriga tahed ja klassiga elemendid ==> <div id=”tahed” class=”elemendid”>Siia tulevad tähed, mida sõnas ei ole!</div>
3. reas info selle kohta, missugune on mängu areng, kasti abil, mille identifikaator on info ja millel on klass elemendid ==> <div id=”info” class=”elemendid”>Siia tuleb info selle kohta, kas täht sobis või mitte</div>:
  - kas täht on juba sisestatud
  - kas tähte ei leitud
  - kas kõik tähed on leitud
  - kas mäng on läbi
4. tähe sisestamise elemendid, kast identifikaatoriga andmed_sisse (<div id=”andmed_sisse”> ja </div>):
  - tekst “Täht”
  - sisendkast tähe lisamiseks, identifikaatoriga taht ja klassiga elemendid (NB! maksimaalse pikkusega 1 tähemärk – maxlength=”1″) ==> <input id=”taht” class=”elemendid” type=”text” maxlength=”1″>
  - nupp info edastamiseks, identifikaatoriga nupp ja klasside btn, btn-primary ja elemendid, mille vajutamisel, onclick sündmuse puhul, aktiveeritakse funktsioon taheproov(); ==> <button type=”button” id=”nupp” class=”btn btn-primary elemendid” onclick=”taheproov();”>Proovi</button>

Eeltoodu tulemusena, on HTML-lehe sisu järgmine:

<!DOCTYPE html>
<html>
 <head>
  <title>Meie mäng</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="mangukujundus.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="mangukood.js"></script>
 </head>
 <body onload="algseis();">
  <div class="container-fluid">
   <div class="row">
    <div id="sona" class="elemendid">Siia tuleb otsitav sõna</div>
   </div>
   <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
     <div id="pilt">Siia tuleb pilt</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
     <div id="tahed" class="elemendid">Siia tulevad tähed, mida sõnas ei ole!</div>
    </div>
   </div>
   <div class="row">
      <div id="info" class="elemendid">Siia tuleb info selle kohta, kas täht sobis või mitte</div>
   </div>
   <div class="row">
    <div id="andmed_sisse">
     Täht:
     <input id="taht" class="elemendid" type="text" maxlength="1">
     <button type="button" id="nupp" class="btn btn-primary elemendid" onclick="taheproov();">Proovi</button>
    </div> 
  </div>
</body>
</html>

Õppematerjalid

Mängu loomine

1. etapp – mängu põhistruktuuri paikapanemine

2. etapp – HTML-lehe loomine

3. etapp – HTML elementide lisamine

Rubriigid