Coding Fun Html Tutorial – Criar Jogo da Velha com JavaScript e HTML+CSS – Parte 2/3

Tutorial – Criar Jogo da Velha com JavaScript e HTML+CSS – Parte 2/3





Esse é o segundo vídeo de uma série de três, onde eu ensino a criar um jogo da velha, usando JavScript e HTML+CSS .

Quer aprender desenvolvimento web fullstack?

Tags: , , , , , , , , , , , , ,

5 thoughts on “Tutorial – Criar Jogo da Velha com JavaScript e HTML+CSS – Parte 2/3”

  1. Bruno Santos says:

    a função atualizaMostrador está a dar-me bem, mas está a haver algum problema com a função inicializaEspacos. ela pura e simplesmente não faz nada. podes ajudar? está tal e qual o que meteste no video, mas não funciona.

    const player1 = "X";

    const player2 = "O";

    var playTime = player1;

    var gameOver = false;

    atualizaMostrador();

    inicializarEspacos();

    function atualizaMostrador(){

    if (gameOver == true){ return; }

    if (playTime == player1){

    var player = document.querySelectorAll("div#mostrador img")[0];

    player.setAttribute("src", "cruz.png");

    }

    else{

    var player = document.querySelectorAll("div#mostrador img")[0];

    player.setAttribute("src", "bola.png");

    }

    }

    function inicializarEspacos(){

    var espacos = document.getElementsByClassName("espaco");

    for(var i=0; i<espacos.length; i++){

    espacos[i].addEventListener("click", jogar() );

    }

    }

    function jogar() {

    if(gameOver){return;}

    if(this.getElementsByTagName("img").length == 0){

    if(playTime == player1){

    this.innerHTML = "<img src='cruz.png'>";

    this.setAttribute("jogada", player1);

    playTime = player2;

    }

    else{

    this.innerHTML = "<img src='bola.png'>";

    this.setAttribute("jogada", player1);

    playTime = player1;

    }

    }

    }

    }

  2. As imagens não querem aparecer nos quadros, alguém pode me ajudar?

    <script type="text/javascript">

    const player1 = "X";

    const player2 = "0";

    var playTime = player1;

    var gameOver = false;

    atualizaMostrador();

    inicializarEspacos();

    function atualizaMostrador(){

    if (gameOver){

    return;

    }

    if (playTime == player1){

    var player = document.querySelectorAll("div#mostrador img")[0];

    player.setAttribute("src", "imgs/pericles.png");

    } else{

    var player = document.querySelectorAll("div#mostrador img")[0];

    player.setAttribute("src", "imgs/sanduiche.png");

    }

    }

    function inicializarEspacos(){

    var espacos = document.getElementsByClassName("espaco");

    for (var i = 0; i < espacos.length; i++) {

    espacos[i].addEventListener("click", function(){

    if (gameOver){

    return;

    }

    if(this.getElementsByClassName("img").length == 0){

    if (playTime == player1){

    this.innerHTML = "<img scr='imgs/pericles.png'>";

    this.setAttribute("jogada", player1);

    playTime = player2;

    } else{

    this.innerHTML = "<img scr='imgs/sanduiche.png'>";

    this.setAttribute("jogada", player2);

    playTime = player1;

    }

    atualizaMostrador();

    }

    })

    }

    }

    </script>

  3. o meu da erro n acontece nada se eu clicar e ainda some a imagem do x ou bolinha

  4. como faço para fazer uma função para jogar com o pc

  5. pois o pq ta dando errado :
    const player1 = "X";
    const player2 = "O";
    var playerTime = player1;
    var gameOver = false;

    atualizarOmostrador();
    inicializarEspacos();

    function atualizarOmostrador(){

    if(gameOver){
    return;
    }

    if(playerTime == player1 ){
    var player = document.querySelectorAll("div#mostrador img")[0];
    player.setAttribute("src","imagens/x.png");
    }else{
    var player = document.querySelectorAll("div#mostrador img")[0];
    player.setAttribute("src","imagens/o.png");
    }
    }

    function inicializarEspacos(){

    var espacos = document.getElementsByClassName("espaco");
    for (var i = 0; i < espacos.length; i++) {
    espacos[i].addEventListener("click",function(){
    if(gameOver){
    return;
    }

    if(this.getElementsByTagName("img").length == 0){
    if(playerTime = player1){
    this.innerHTML = "<img src='imagens/x.png'>";
    this.setAttribute("jogada",player1);
    playerTime = player2;
    }
    else{
    this.innerHTML = "<img src='imagens/o.png'>";
    this.setAttribute("jogada",player2);
    playerTime = player1;
    }
    atualizarOmostrador();
    }

    })
    }
    }

Leave a Reply

Your email address will not be published. Required fields are marked *