Tenho um botão em HTML que recarrega a página (refresh) usando o location.reload()
.
Como é um jogo, eu queria mostrar a pontuação quando o jogador finalizasse, mas toda vez que o botão é clicado, a variável volta a valer 0.
Já tentei resolver usando o sessionStorage()
, mas retornou undefined
.
Aqui uma versão bem simplificada do código:
let A = ['Anuência', 'Ascensão', 'Animosidade', 'Alteridade', 'Ambiguidade']
let B = ['Benevolência', 'Bastardo', 'Bagunceiro', 'Bidimensional', 'Borboleta']
let C = ['Carrosel', 'Cavaleiro', 'Cangaçeiro', 'Cachimbada', 'Cachimônia']
let D = ['Desimpedido', 'Deslumbramento', 'Desentumecer', 'Desincorporar', 'Desigualdade']
let E = ['Escorregadio', 'Escoteirismo', 'Esdrúxulo', 'Esgravatar', 'Estoquista']
let F = ['Fasmídeo', 'Fechamento', 'Fidalguia', 'Farroupilha', 'Frenagem']
let G = ['Girândola', 'Germanismo', 'Giroscópio', 'Gradação', 'Gracejar']
let H = ['Homologar', 'Homófona', 'Homogêneo', 'Hondurenho', 'Honorário']
let I = ['Ilustríssimo', 'Imprudência', 'Impressionísmo', 'Incandescência', 'Insuperável']
let J = ['Jinjibirra', 'Juveníssimo', 'Jornadear', 'Jinriquixá', 'Jurisconssulto']
let titulo = document.querySelector('h2#titulo')
let palavras = document.querySelector('p#palavras')
let numero = parseInt(Math.random() * 9 + 1)
let pontuacao = 0
function numAleatorio() {
letraAleatoria(numero)
}
function letraAleatoria(n) {
switch (n) {
case 1:
titulo.innerHTML = 'Letra A foi escolhida!'
palavras.innerHTML = `Organize as palavras: <br> <strong> Anuência, Ascensão, Animosidade, Alteridade, Ambiguidade </strong> em ordem alfabética.`
break;
case 2:
titulo.innerHTML = 'Letra B foi escolhida!'
palavras.innerHTML = `Organize as palavras: <br> <strong> Benevolência, Bastardo, Bagunceiro, Bidimensional, Borboleta </strong> em ordem alfabética!`
break;
case 3:
titulo.innerHTML = 'Letra C foi escolhida!'
palavras.innerHTML = `Organize as palavras: <br> <strong> Carrosel, Cavaleiro, Cangaçeiro, Cachimbada, Cachimônia </strong> em ordem alfabética!`
break;
case 4:
titulo.innerHTML = 'Letra D foi escolhida!'
palavras.innerHTML = `Organize as palavras: <br> <strong> Desimpedido, Deslumbramento, Desentumecer, Desincorporar, Desigualdade </strong> em ordem alfabética!`
break;
case 5:
titulo.innerHTML = 'Letra E foi escolhida!'
palavras.innerHTML = `Organize as palavras: <br> <strong> Escorregadio, Escoteirismo, Esdrúxulo, Esgravatar, Estoquista </strong> em ordem alfabética!`
break;
case 6:
titulo.innerHTML = 'Letra F foi escolhida!'
palavras.innerHTML = `Organize as palavras: <br> <strong> Fasmídeo, Fechamento, Fidalguia, Farroupilha, Frenagem </strong> em ordem alfabética!`
break;
case 7:
titulo.innerHTML = 'Letra G foi escolhida!'
palavras.innerHTML = `Organize as palavras: <br> <strong> Girândola, Germanismo, Giroscópio, Gradação, Gracejar </strong> em ordem alfabética!`
break;
case 8:
titulo.innerHTML = 'Letra H foi escolhida!'
palavras.innerHTML = `Organize as palavras: <br> <strong> Homologar, Homófona, Homogêneo, Hondurenho, Honorário </strong> em ordem alfabética!`
break;
case 9:
titulo.innerHTML = 'Letra I foi escolhida!'
palavras.innerHTML = `Organize as palavras: <br> <strong> Ilustríssimo, Imprudência, Impressionísmo, Incandescência, Insuperável </strong> em ordem alfabética!`
break;
case 10:
titulo.innerHTML = 'Letra J foi escolhida!'
palavras.innerHTML = `Organize as palavras: <br> <strong> Jinjibirra, Juveníssimo, Jornadear, Jinriquixá, Jurisconssulto </strong> em ordem alfabética!`
break;
}
}
function verificar() {
let num = numero
let p1 = document.getElementById('p1').value
let p2 = document.getElementById('p2').value
let p3 = document.getElementById('p3').value
let p4 = document.getElementById('p4').value
let p5 = document.getElementById('p5').value
switch (num) {
case 1:
A.sort()
if (p1 == A[0] && p2 == A[1] && p3 == A[2] && p4 == A[3] && p5 == A[4]) {
window.alert('acertou')
pontuacao++
} else {
window.alert('errou')
}
break;
case 2:
B.sort()
if (p1 == B[0] && p2 == B[1] && p3 == B[2] && p4 == B[3] && p5 == B[4]) {
window.alert('acertou')
pontuacao++
} else {
window.alert('errou')
}
break;
case 3:
C.sort()
if (p1 == C[0] && p2 == C[1] && p3 == C[2] && p4 == C[3] && p5 == C[4]) {
window.alert('acertou')
pontuacao++
} else {
window.alert('errou')
}
break;
case 4:
D.sort()
if (p1 == D[0] && p2 == D[1] && p3 == D[2] && p4 == D[3] && p5 == D[4]) {
window.alert('acertou')
pontuacao++
} else {
window.alert('errou')
}
break;
case 5:
E.sort()
if (p1 == E[0] && p2 == E[1] && p3 == E[2] && p4 == E[3] && p5 == E[4]) {
window.alert('acertou')
pontuacao++
} else {
window.alert('errou')
}
break;
case 6:
F.sort()
if (p1 == F[0] && p2 == F[1] && p3 == F[2] && p4 == F[3] && p5 == F[4]) {
window.alert('acertou')
pontuacao++
} else {
window.alert('errou')
}
break;
case 7:
G.sort()
if (p1 == G[0] && p2 == G[1] && p3 == G[2] && p4 == G[3] && p5 == G[4]) {
window.alert('acertou')
pontuacao++
} else {
window.alert('errou')
}
break;
case 8:
H.sort()
if (p1 == H[0] && p2 == H[1] && p3 == H[2] && p4 == H[3] && p5 == H[4]) {
window.alert('acertou')
pontuacao++
} else {
window.alert('errou')
}
break;
case 9:
I.sort()
if (p1 == I[0] && p2 == I[1] && p3 == I[2] && p4 == I[3] && p5 == I[4]) {
window.alert('acertou')
pontuacao++
} else {
window.alert('errou')
}
break;
case 10:
J.sort()
if (p1 == J[0] && p2 == J[1] && p3 == J[2] && p4 == J[3] && p5 == J[4]) {
window.alert('acertou')
pontuacao++
} else {
window.alert('errou')
}
break;
}
}
function continuar() {
location.reload()
}
function finalizar() {
let secao2 = document.getElementById('usupal')
secao2.style.display = 'none'
titulo.innerHTML = 'O jogo acabou.'
palavras.innerHTML = 'Pontuação:' + pontuacao
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Organize as palavras em ordem alfabética!</title>
</head>
<body onload="numAleatorio()">
<header>
<h1>Organizador de A até Z!</h1>
</header>
<main>
<section>
<h2 id="titulo"></h2>
<p id="palavras"></p>
</section>
<section id="usupal">
<input type="text" id="p1"><input type="text" id="p2"><input type="text" id="p3"><input type="text" id="p4"><input type="text" id="p5">
<input type="button" value="Verificar" onclick="verificar()">
</section>
<p id="res"></p>
<input type="button" value="Continuar" onclick="continuar()"> <input type="button" value="Finalizar" onclick="finalizar()">
</main>
</body>
<script src="codigo.js"></script>
</html>