Kodulehe loomine, 26. kord

13.04.2022
 |  Kommentaare pole

4.2 Sisestatud tähe kontrollimine

HTML-lehel on elemendile <button> lisatud sündmuse onclick puhul funktsiooni taheproov käivitamine ==> <button type=”button” id=”nupp” class=”btn btn-primary elemendid” onclick=”taheproov();”>Proovi</button>

Selle jaoks lisame faili mangukood.js järgmise funktsiooni taheproov:

function taheproov()
{
 var taht=document.getElementById("taht").value.toLowerCase();

 if (taht.length==0)
 {
  document.getElementById("info").innerHTML="Palun sisesta täht!";
 }
 else
 {
  // siia tulevad tähe kontrollimisega seotud toimingud
 }
}

Eelnevas koodis:

  1. defineeritakse funktsiooni taheproov ==> function taheproov() { }
  2. defineeritakse lokaalne muutuja taht, millele omistatakse html-elemendi, mille identifikaator on taht (document.getElementById(“taht“)) väärtus (value), mis teisendatakse väikeseks täheks, kasutades funktsiooni toLowerCase() ==> var taht=document.getElementById(“taht“).value.toLowerCase();
  3. kontrollitakse, kas täht sisestati (kasutades funktsiooni length, et teha kindlaks muutuja taht pikkus tähemärkides):
    • kui pikkus on 0, ehk pole ühtegi märki sisestatud ==> if (taht.length==0) { }
      • muudetakse html-elemendi info sisu (innerHTML) ==> document.getElementById(“info“).innerHTML=”Palun sisesta täht!”;
    • kui täht on sisestatud ==> else { }
      • asutakse tähte analüüsima

Järgnevalt vaatame ainult seda osa, kui täht on sisestatud. Esmalt siis asume uurima, kas selline täht on juba varemalt leitud.

Ehk siis eelnevas koodis tuleb osa:

else
{
// siia tulevad tähe kontrollimisega seotud toimingud
}

asemele järgmine kood:

else
{

 if (leitud_tahed.includes(taht)) // kontrollime, kas on juba leitud
 {
  //anname kasutajale sellest teada
 }
 else if (otsitava_sona_tahed.includes(taht)) //kontrollime, kas täht sisaldub sõnas
 {
  /*lisame tähe masiivi leitud_tahed, kuvame info kasutajale ja samuti ka sõna, 
   lisaks kontrollime, kas kõik tähed on leitud*/
 }
 else if (sobimatud_tahed.includes(taht)) //kontrollime, kas täht on sobimatute tähtede nimekirjas
 {
 //anname kasutajale sellest teada
 }
 else if (sobimatud_tahed.length<8) /*kontrollime, kas sobimatute tähtede nimekirjas on veel ruumi */
 {
 // lisame tähe sobimatute tähtede hulka, kuvame selle tähe ja anname kasutajale teada
 }
 else //kui ükski eelnevatest tingimustest pole tõene, siis on mäng läbi
 {
 //lõpetame mängu
 }

}

Selles koodis siis kontrollime 5 tingimust (kasutades if-else lauseid):

  1. kas täht leidub massiivis leitud_tahed, kasudates funktsiooni includes ==> if (leitud_tahed.includes(taht))
  2. kui tingimus 1 ei ole täidetud, siis seda, kas täht leidub otsitava sõna tähtede massiivis otsitava_sona_tahed, kasutades taaskord funktsiooni includes ==> else if (otsitava_sona_tahed.includes(taht))
  3. kui tingimused 1 ja 2 ei ole täidetud, siis seda, kas täht leidub massiivis sobimatud_tahed, kasutades veelkord funktsiooni includes ==> else if (sobimatud_tahed.includes(taht)) 
  4. kui tingimused 1, 2 ja 3 ei ole täidetud, siis seda, kas masiivi sobimatud_tahed liikmete arv on alla 8, kasutades funktsioon length ==> else if (sobimatud_tahed.length<8)
  5. kui tingimused 1, 2, 3 ja 4 ei ole täidetud => else

Vaatleme nende tingimuste korral teostatavaid toiminguid nüüd üksteise järel.

Tingimus 1

if (leitud_tahed.includes(taht))
{
 document.getElementById("info").innerHTML="See täht on juba sisestatud!";
}

Mille selgitus on siis järgmine:

  • kui massiivis leitud_tahed sisaldub (funktsioon includes) taht ==> if (leitud_tahed.includes(taht)) { }
  • kuvatakse kasti info tekst See täht on juba sisestatud! ==> document.getElementById(“info“).innerHTML=”See täht on juba sisestatud!”;

Tingimus 2

else if (otsitava_sona_tahed.includes(taht))
{
 leitud_tahed.push(taht);
 kuvatav_tekst=otsitava_sona_tahed[0].toUpperCase();
 sona_seis=otsitava_sona_tahed[0];
 document.getElementById("info").innerHTML="Leidsid õige tähe!";
 for (k=1; k<otsitava_sona_tahed.length; k++)
 {
  if (leitud_tahed.includes(otsitava_sona_tahed[k]))
  {
   kuvatav_tekst=kuvatav_tekst+" "+otsitava_sona_tahed[k].toUpperCase(); 
   sona_seis=sona_seis+otsitava_sona_tahed[k];
   }
  else
  {
   kuvatav_tekst=kuvatav_tekst+" _";
   sona_seis=sona_seis+"_";
   }
  document.getElementById("sona").innerHTML=kuvatav_tekst;
 }
 if (otsitav_sona==sona_seis) 
 { 
  mang_labi("voit")
 }
}

Milles toimuvad siis järgmised tegevused:

  • kui masiivis otsitava_sona_tahed leidub taht ==> else if (otsitava_sona_tahed.includes(taht)) { }
  • lisatakse taht massiivile leitud_tahed, kasutades funktsiooni push ==> leitud_tahed.push(taht);
  • muutuja kuvatav_tekst algväärtuseks on massiivi otsitava_sona_tahed 1. liikme väärtus (NB! 1. liikme indeks on 0), mis on suurtäheks muudetud, kasutades funktsiooni toUpperCase ==> kuvatav_tekst=otsitava_sona_tahed[0].toUpperCase();
  • muutuja sona_seis algväärtuseks on massiivi otsitava_sona_tahed 1. liikme väärtus (NB! 1. liikme indeks on 0) ==> sona_seis=otsitava_sona_tahed[0];
  • kasutajale kuvatakse info selle kohta, et ta leidis sobiva tähe, muutes elemendi info sisu ==> document.getElementById(“info”).innerHTML=”Leidsid õige tähe!”;
  • kasutades for-tsüklit, käiakse läbi kogu sõna, alustatakse 2. elemendist (i=1), sest 1. element on juba vajalikele muutujatele omistatud ==> for (i=1; i<otsitava_sona_tahed.length; i++) { }
    • kui massiivis otsitava_sona_tahed kohal i paiknev täht leidub massiivis leitud_tahed => if (leitud_tahed.includes(otsitava_sona_tahed[i]))
      • omistatakse muutujale kuvatav_tekst selle esialgne väärtus (kuvatav_tekst), tühik (” “) ja massiivis otsitava_sona_tahed kohal i paiknev täht, mis on muudetud suurtäheks, kasutades funktsiooni toUpperCase ==> kuvatav_tekst=kuvatav_tekst+” “+otsitava_sona_tahed[i].toUpperCase();
      • omistatakse muutujale sona_seis selle esialgne väärtus (sona_seis) ja massiivis otsitava_sona_tahed kohal i paiknev täht ==> sona_seis=sona_seis+otsitava_sona_tahed[i];
    • vastasel juhul ==> else { }
      • omistatakse muutujale kuvatav_tekst selle esialgne väärtus (kuvatav_tekst) ja tühik koos allkriipuga (”  _”) ==> kuvatav_tekst=kuvatav_tekst+” _”;
      • omistatakse muutujale sona_seis selle esialgne väärtus (sona_seis) ja allkriips (“_”) ==> sona_seis=sona_seis+”_”;
    • muudetakse elemendi sona sisu, kuvades muutuja kuvatav_tekst hetkeväärtuse ==> document.getElementById(“sona“).innerHTML=kuvatav_tekst;
  • kontrollitakse, kas otsitav_sona vastab muutuja sona_seis väärtusele ==> if (otsitav_sona==sona_seis)
    • kui jah, pöördutakse funktsiooni mang_labi poole, kusjuures edastatava parameetri väärtuseks on voit ==> mang_labi(“voit”)

Funktsioon mang_labi

function mang_labi(seis)
{
 if (seis=="voit")
 {
  document.getElementById("info").innerHTML="Sa arvasid sõna ära!";
 }
 else
 {
  document.getElementById("info").innerHTML="Sa kaotasid!";
  document.getElementById("pilt").innerHTML="<img src='pilt10.jpg' id='pildisisu'>";
  var audio = new Audio('labi.mp3'); 
  audio.play();
 }
 document.getElementById("andmed_sisse").innerHTML='<a href="" class="btn btn-primary elemendid">Alusta otsast peale!</a>'; 
}

Funktsioonil mang_labi on üks parameeter seis ==> mang_labi(seis)

mille väärtus saadakse funktsioonist taheproov:

  1. kui mäng õnnestus, siis mang_labi(“voit”)
  2. kui mäng ebaõnnestus, siis mang_labi(“kaotus”)

Funktsioonis mang_labi tehakse järgnevat:

  1. kui parameetri seis väärtuseks on voit ==> if (seis==”voit”) { } 
    • kuvatakse kasutajale info, et ta arvas sõna ära ==> document.getElementById(“info“).innerHTML=”Sa arvasid sõna ära!”
  2. vastasel korral ==> else { }
    • kuvatakse kasutajale info selle kohta, et ta kaotas mängu ==> document.getElementById(“info“).innerHTML=”Sa kaotasid!”;
    • kuvatakse viimane pilt ==> document.getElementById(“pilt“).innerHTML==”<img src=’pilt10.jpg’ id=’pildisisu’>”;
    • mängitakse ette audiofail labi.mp3
  3. asendatakse kasti andmed_sisse (mis seni sisaldas sisendkasti tähe sisestamiseks ja nuppu) lingiga (<a> </a>), klassidega btn, btn-primary ja elemendid, mis laeb lehe uuesti (href=””) ==> document.getElementById(“andmed_sisse”).innerHTML='<a href=”” class=”btn btn-primary elemendid”>Alusta otsast peale!</a>’;

Tingimuse 3

else if (sobimatud_tahed.includes(taht))
{
  document.getElementById("info").innerHTML="See täht on juba sisestatud!";
}

Mille selgitus on siis järgmine:

  • kui massiivis sobimatud_tahed sisaldub (funktsioon includes) taht ==> if (sobimatud_tahed.includes(taht)) { }
  • kuvatakse kasti info tekst See täht on juba sisestatud! ==> document.getElementById(“info“).innerHTML=”See täht on juba sisestatud!”;

Tingimus 4

else if (sobimatud_tahed.length<8)
{
 sobimatud_tahed.push(taht);
 document.getElementById("tahed").innerHTML=document.getElementById("tahed").innerHTML+" "+taht.toUpperCase();
 document.getElementById("info").innerHTML="Seda tähte ei ole sõnas!";
 jrknr=sobimatud_tahed.length+1;
 document.getElementById("pilt").innerHTML="<img src='pilt"+jrknr+".jpg' id='pildisisu'>";
}

Selles osas toimuvad järgmised tegevused:

  • kui massiivi sobimatud_tahed liikmete arv on alla 8 ==> else if (sobimatud_tahed.length<8)
  • lisatakse massiivi sobimatud_tahed muutuja taht, kasutades funktsiooni push ==> sobimatud_tahed.push(taht);
  • lisatakse elemendi tahed sisule elemendi tahed senine sisu, tühik (” “) ja muutaja taht väärtus, mis on muudetud suurtäheks, kasutades funktsiooni toUpperCase ==> document.getElementById(“tahed”).innerHTML=document.getElementById(“tahed”).innerHTML+” “+taht.toUpperCase();
  • kuvatakse kasti info tekst Seda tähte ei ole sõnas! ==> document.getElementById(“info“).innerHTML=”Seda tähte ei ole sõnas!”;
  • tekitame endale abimuutuja jrknr, et saada teada, mitmenda pildi peame kuvama, kasutades selle massiivi sobimatud_tahed ja selle pikkust, funktsiooni length abil, liites sellele 1 ==> jrknr=sobimatud_tahed.length+1;
  • muudetakse elemendi pilt sisu, vastavalt jrknr’ile, liites saadud numbri failinimele pilt+jrknr+.jpg, mille tulemusena on failinimi pilt1.jpg, pilt2.jpg jne => document.getElementById(“pilt”).innerHTML=”<img src=‘pilt”+jrknr+”.jpg’ id=’pildisisu’>”;

Tingimus 5

else
{
 mang_labi("kaotus")
}

Kui ükski eelnevast tingimusest 1, 2, 3 ja 4 ei ole täidetud ==> else

pöördutakse funktsiooni mang_labi poole, edastava parameetri väärtus on kaotus ==> mang_labi(“kaotus”)

Täiendavad toimingud funktsiooni taheproov lõpus

document.getElementById("taht").value="";
document.getElementById("taht").focus();
document.getElementById("taht").select();

Funktsiooni taheproov lõpus:

  1. puhastatakse sisendkast taht ==> document.getElementById(“taht“).value=””;
  2. aktiveeritakse sisendkast, kuhu saab tähe, mille identifikaator on taht, sisestada:
    • klaviatuuri kasutamise korral, kasutades funktsiooni focus ==> document.getElementById(“taht“).focus();
    • puuteekraani korral, kasutades funktsiooni select ==> document.getElementById(“taht“).select();

Kokkuvõtvalt on JavaScript’i faili sisu siis selline:

var otsitav_sona="lumelaualaager";
var otsitava_sona_tahed=otsitav_sona.split("");
var leitud_tahed=[];
leitud_tahed.push("l");
leitud_tahed.push("r");
var sobimatud_tahed=[];

function algseis()
{
 document.getElementById("sona").innerHTML="L _ _ _ L _ _ _ L _ _ _ _ R";
 document.getElementById("info").innerHTML="Hakka aga mänguga pihta";
 document.getElementById("tahed").innerHTML="";
 document.getElementById("pilt").innerHTML="<img src='pilt1.jpg' id='pildisisu'>";
 document.getElementById("taht").focus();
 document.getElementById("taht").select();
}

function taheproov()
{
var taht=document.getElementById("taht").value.toLowerCase();

if (taht.length==0)
{
 document.getElementById("info").innerHTML="Palun sisesta täht!";
}
else
{
 if (leitud_tahed.includes(taht))
 {
  document.getElementById("info").innerHTML="See täht on juba sisestatud!";
 }
 else if (otsitava_sona_tahed.includes(taht))
 {
  leitud_tahed.push(taht);
  kuvatav_tekst=otsitava_sona_tahed[0].toUpperCase();
  sona_seis=otsitava_sona_tahed[0];
  document.getElementById("info").innerHTML="Leidsid õige tähe!";
  for (i=1; i<otsitava_sona_tahed.length; i++)
  {
   if (leitud_tahed.includes(otsitava_sona_tahed[i]))
   {
    kuvatav_tekst=kuvatav_tekst+" "+otsitava_sona_tahed[i].toUpperCase(); 
    sona_seis=sona_seis+otsitava_sona_tahed[i];
   }
   else
   {
    kuvatav_tekst=kuvatav_tekst+" _";
    sona_seis=sona_seis+"_";
    }
   document.getElementById("sona").innerHTML=kuvatav_tekst;
  }
  if (otsitav_sona==sona_seis)
  {
   mang_labi("voit")
  }
 }
 else if (sobimatud_tahed.includes(taht))
 {
  document.getElementById("info").innerHTML="See täht on juba sisestatud!";
 }
 else if (sobimatud_tahed.length<8)
 {
  sobimatud_tahed.push(taht);
  document.getElementById("tahed").innerHTML=document.getElementById("tahed").innerHTML+" "+taht.toUpperCase();
  document.getElementById("info").innerHTML="Seda tähte ei ole sõnas!";
  jrknr=sobimatud_tahed.length+1;
  document.getElementById("pilt").innerHTML="<img src='pilt"+jrknr+".jpg' id='pildisisu'>"; 
  }
 else
 {
  mang_labi("kaotus")
  }
 }
document.getElementById("taht").value="";
document.getElementById("taht").focus();
document.getElementById("taht").select();
}

function mang_labi(seis)
{
if (seis=="voit")
{
 document.getElementById("info").innerHTML="Sa arvasid sõna ära!";
}
else
{
 document.getElementById("info").innerHTML="Sa kaotasid!";
 document.getElementById("pilt").innerHTML="<img src='pilt10.jpg' id='pildisisu'>";
 var audio = new Audio('labi.mp3');
 audio.play();
}
document.getElementById("andmed_sisse").innerHTML='<a href="" class="btn btn-primary elemendid">Alusta otsast peale!</a>'; 
}

Klaviatuuri vajutamise jälgimine

Funktsiooni algseis lisada järgmine kord:

var input = document.getElementById("taht");
input.addEventListener("keydown", function (e) {
  if (e.key === "Enter") { 
  //alert(this.value);
  taheproov();
  }
 });