-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (114 loc) · 4.67 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!doctype html><html><head>
<meta charset=utf8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel=stylesheet href=css.css>
<title>l'appscriptor</title>
</head><body onload=dibuixa_paraula()><main>
<h2 style=text-align:center>l'appscriptor</h2><hr>
<!--punts i errors-->
<div class=flex style=justify-content:space-between>
<div>Punts: <span id=punts>0</span></div>
<div>Errors: <span id=errors>0</span>/5</div>
</div><hr>
<!--main div-->
<div>
<div class=flex style="justify-content:center;margin:10px 0px;font-size:20px;font-style:italic">
<!--definició-->
<div id=paraula paraula="">carregant...</div>
</div>
<!--resposta-->
<div class=flex style=justify-content:center>
<input id=resposta type=text placeholder="Escriu la paraula" onkeypress="if(event.which==13)get_resposta()">
<button id=submit onclick=get_resposta()>ok</button>
</div>
<!--comptador lletres-->
<div id=container_lletres style="margin-top:5px;font-family:monospace;text-align:center">
(<span id=lletres_escrites>0</span>/<span id=lletres_totals>0</span>)
</div>
<!--pista per quan falles--><div id=pista></div>
</div><hr>
<!--footer-->
<div id=sponsors>
Col·labora:<br>
<!--fedac logo-->
<img src="img/salt.png" width="30%">
<!--link a github-->
<div><a href="//github.com/holalluis/lappscriptor/blob/master/README.md">Sobre l'appscriptor</a></div>
</div>
<!--carrega backend--><script src=app.js></script>
<!--frontend-->
<script>
//DOM
let btn_submit = document.querySelector('#submit'); //botó submit resposta
let div_errors = document.querySelector('#errors'); //comptador errors
let div_paraula = document.querySelector('#paraula'); //definició
let div_pista = document.querySelector('#pista'); //div pista per quan falles
let div_punts = document.querySelector('#punts'); //comptador punts
let div_resposta = document.querySelector('#resposta'); //input respondre
let div_container_lletres = document.querySelector('#container_lletres'); //container escrites/totals
let div_lletres_escrites = document.querySelector('#lletres_escrites'); //comptador lletres escrites
let div_lletres_totals = document.querySelector('#lletres_totals'); //comptador lletres totals
//onkeypress listener escriu nombre de lletres escrites
div_resposta.addEventListener('keyup',function(){ div_lletres_escrites.innerHTML=this.value.length; });
//agafa una paraula i dibuixa-la al frontend
function dibuixa_paraula(){
let p=get_paraula();
if(!p){
div_paraula.innerHTML="<span style='color:green'>Ja has acabat, bona feina!</span>";
div_resposta.style.display='none';
div_container_lletres.style.display='none';
btn_submit.style.display='none';
return;
}
//set input maxlength a length paraula correcta
div_resposta.setAttribute('maxlength',p[0].length);
//escriu definició i length de la paraula correcta
div_paraula.innerHTML=`"${p[1]}"`;
div_lletres_totals.innerHTML=p[0].length;
//posa la paraula correcta com a atribut del div_paraula
div_paraula.setAttribute('paraula',p[0]);
//enfoca el div_resposta
div_resposta.focus();
}
//llegeix la resposta de l'usuari i comprova si és correcte
function get_resposta(){
let r = div_resposta.value; //resposta de l'usuari
if(r=="") return; //si respon en blanc no facis res
//obtenir resposta correcta
let p = div_paraula.getAttribute('paraula');
//esborra pista anterior si n'hi ha
div_pista.innerHTML="";
//comprova solució (r==p)
if(r.toUpperCase()==p.toUpperCase()){
snd_ok.play();
punts++;
div_punts.innerHTML=punts;
div_resposta.value="";
dibuixa_paraula();
div_paraula.style.color='';
div_lletres_escrites.innerHTML="0";
}else{
snd_fail.play();
errors++;
div_paraula.style.color='red';
div_errors.innerHTML=errors;
//dibuixa pista (marca en verd les lletres correctes)
for(let i=0;i<p.length;i++){
let c_1 = p[i]; //caràcter correcte
let c_2 = r[i] || "_"; //caràcter respost, o guió baix si no existeix
if(c_1.toUpperCase()==c_2.toUpperCase()){
div_pista.innerHTML+=`<span style=color:green>${c_1}</span>`;
}else{
div_pista.innerHTML+=`<span style=color:red>${c_2}</span>`;
}
}
//game over
if(errors==6){
alert("Game Over! Torna-ho a intentar!");
window.location.reload();
}
//reselecciona text per seguir responent
div_resposta.select();
}
}
</script>