6
respostas

Como resetar meu javascript

Fala ai pessoal, tudo tranquilo?

Bom, sei que pode parecer uma duvida boba, mas vamos lá! Eu comecei o curso da Alura tem pouco tempo, foquei no front-end mas quero ser fullstack e gosto muito de Design apesar de não saber nada. Bom, matei o curso de HTML/CSS e estou terminando o javascript. Mas como sou teimoso, além do projeto do curso eu tento fazer um projeto que me agrade que além de querer praticar fora do escopo do curso (Pensar fora da caixa).

Bem, es que comecei meu projeto de fazer um jogo da velha pois bateu um vento na cabeça que isso poderia me ajudar a desenvolver o Javascript. Enfim, fiz tudo, porém quero que meu botão de reset funcione para que volte ao modo inicial. Não tenho a menor ideia de como fazer isso, se alguém puder me ajudar :)

Como falei, sou iniciante então qualquer feedback com relação ao código bem como aparência do projeto será bem valida.

Projeto do jogo da velha no codePen

Obs: Uso o codePen pois me ajuda a gravar muito dos códigos para eles ficarem na minha cabeça. Não sei se é o melhor.

6 respostas

Se eu entendi corretamente o seu código, ao iniciar o jogo e clicar nos quadrados, ele vai adicionar uma div em cada box, e essa div, que é criada dinamicamente, tem uma classe que pode ser "x" ou "o"

Considerando isso, o botão de reset teria que eliminar as divs que tenham estas classes. Algo como:

$(".x").remove();
$(".o").remove();
player = 1;

Outra coisa que teria que fazer, seria desfazer as marcações de classe "hashtag" e voltar para a marcação original (hashtagOff), além de reativar a programação do botão start.

Oi Pedro,

No seu caso você precisa "limpar" as caixas que foram clicadas, e habilitar novamente o clique nas caixas(chamando a função fillBox):

function reset() {
    var xboxes = document.querySelectorAll(".x-box");
    var oboxes = document.querySelectorAll(".o-box");

    xboxes.forEach(function(e,i) {
        e.innerHTML = "";
    });

    oboxes.forEach(function(e,i) {
        e.innerHTML = "";
    });

    fillBox();
}

Sempre que uma caixinha é clicada, seu código adiciona uma div interna com classe x ou com classe o. Daí para limpar, basta remover essa div que foi adicionada.

Bons estudos!

Daniel Bins,

Muito obrigado pela solução, funcionou.

Rodrigo Ferreira,

Então, era isso mesmo que eu queria, full javascript puro, mas eu so nao entendi uma coisa:

xboxes.forEach(function(e,i){e.innerHTML = ""});

forEach é para pegar cada um dos elementos, porém o que é esse e e i do function(e,i), poderia me explicar melhor? Entendi que voce está pegando as box dos X e O e as limpando, mas queria entender bem o que é o e e o i.

Obrigado pelas respostas galera.

Oi Pedro,

Isso mesmo, o foreach percorre todos os elementos do array, e executa a function para cada um deles.

O parametro e representa o elemento atual do loop, e o outro parametro(que nem precisava pois é opcional) é a posição do elemento no array.

Entendi perfeitamente, Rodrigo, muito obrigado,

Bom, terminei finalmente o código e a sua ajudou acelerou bastante o desenvolvimento e o aprendizado, muito obrigado.

https://codepen.io/pedrobslisboa/full/zWBgYg/

Ta aí o projeto final.

Oi Pedro,

Que bom que deu certo. Da hora o projeto :)

Parabéns e continue com os estudos!

Abs!