Click and dblclick in javascript

Navigation
0

I'm new to JS and I'm learning, and I'm doing a game of the old one in which the first click is for the player1 to place the "x", and two clicks for the player2 to place the "o", how serious the best way to do because I can not add an "onclick" or "ondblclick" tag, I was trying to addEventListener by picking up the class, but I could not make it functional.

I'm using a table to create the board: current js code updated. 

function testejogada(){
alert("funcionou");

}

function testejogada1(){
alert("funcionou1");
}

document.addEventListener('DOMContentLoaded', function(){
var classe = document.querySelector(".espaco");
classe.addEventListener('dblclick', function(){ testejogada()

});

classe.addEventListener('click', function(){ testejogada1()

});
});
<table align="center">
  <tr>
    <td><img class="espaco" src="img/default.png" id="casa1-1" /></td>
    <td><img class="espaco" src="img/default.png" id="casa1-2" /></td>
    <td><img class="espaco" src="img/default.png" id="casa1-3" /></td>
  </tr>

  <tr>
    <td><img class="espaco" src="img/default.png" id="casa2-1" /></td>
    <td><img class="espaco" src="img/default.png" id="casa2-2" /></td>
    <td><img class="espaco" src="img/default.png" id="casa2-3" /></td>
  </tr>

  <tr>
    <td><img class="espaco" src="img/default.png" id="casa3-1" /></td>
    <td><img class="espaco" src="img/default.png" id="casa3-2" /></td>
    <td><img class="espaco" src="img/default.png" id="casa3-3" /></td>
  </tr>

  <tr>
    <td colspan="3" id="ganhador"></td>
  </tr>
</table>
    
asked by anonymous 09.04.2018 / 20:24

3 answers

0

You can do this by switching the onclick and ondblclick attributes as players play.

I created a class jogado to disable clicks on the houses that have already been marked (I put a red sample background).

Example: 

var jogador1 = true;
var jogador2 = false;
var jogador_vez = 1;

function alteraJogador(){

   var casas = document.body.querySelectorAll(".espaco");
   
   for(var x=0; x<casas.length; x++){

      casas[x].setAttribute("onclick", jogador1 ? "joga(this)" : "");
      casas[x].setAttribute("ondblclick", jogador1 ? "": "joga(this)");
      
      // aqui eu removo os atributos onde tem classe "jogado"
      // para não aceitar mais cliques
      if(casas[x].classList.contains("jogado")){
         casas[x].removeAttribute("onclick");
         casas[x].removeAttribute("ondblclick");
      }
   }
   
}

function joga(casa){
   jogador1 = !jogador1;
   jogador2 = !jogador2;

   casa.classList.add("jogado");
   
   alteraJogador();

   if(jogador_vez == 1){
      // faz algo quando o jogador 1 jogar
      console.log("Jogador 1 jogou.");
   }else{
      // faz algo quando o jogador 2 jogar
      console.log("Jogador 2 jogou.");
   }

   jogador_vez = jogador1 ? 1 : 2;
   
   console.log("Vez do jogador "+jogador_vez+" jogar");
}

document.addEventListener("DOMContentLoaded", alteraJogador );
.jogado{
   background: red;
}
<table align="center">
<tr>
   <td><img class="espaco" src="img/default.png"  id="casa1-1"/></td>
   <td><img class="espaco" src="img/default.png"  id="casa1-2"/></td>
   <td><img class="espaco" src="img/default.png"  id="casa1-3"/></td>
</tr>

<tr>
   <td><img class="espaco" src="img/default.png"  id="casa2-1"/></td>
   <td><img class="espaco" src="img/default.png"  id="casa2-2"/></td>
   <td><img class="espaco" src="img/default.png"  id="casa2-3"/></td>
</tr>

<tr>
   <td><img class="espaco" src="img/default.png"  id="casa3-1"/></td>
   <td><img class="espaco" src="img/default.png"  id="casa3-2"/></td>
   <td><img class="espaco" src="img/default.png"  id="casa3-3"/></td>
</tr>

<tr >
   <td colspan="3" id="ganhador"></td>
</tr>		
</table>
    
09.04.2018 / 21:54
0

Well I suppose what you need to do is a bit more complex than that, so I used the jquery library that can be downloaded here

What happens you will not be able to put a dclick and an onclick on the same element whenever a dclclick will be called onclick so I created a function with a timer to recognize the number of clicks 

$(document).ready(function(){
    function testejogada(){
        alert("funcionou");

    }

    function testejogada1(){
        alert("funcionou1");
    }
var classe = $(".espaco");
console.log(classe)

$.each(classe, function(k,v){
var DELAY = 700, clicks = 0, timer = null;



    $(this).on("click", function(e){

        clicks++;  //conta os clicks

        if(clicks === 1) {

            timer = setTimeout(function() {

                testejogada();  //execeuta o click unico action    
                clicks = 0;             //apos executado zera o timer

            }, DELAY);

        } else {

            clearTimeout(timer);    //previne o click unico action
            testejogada1();         //executa  o  dbclick 
            clicks = 0;             //apos fazer a ação reseta o timer
        }

    })
    .on("dblclick", function(e){
        e.preventDefault();  //cancela   o double click default do navegador
    });

});
})

You can see example working here

    
09.04.2018 / 21:41
0

My suggestion is to use only the click event, and make the change between cruz and circulo . 

var game = [ 
  [null, null, null], 
  [null, null, null], 
  [null, null, null], 
]

var squares = document.querySelectorAll(".square");
var onSquareCircle = function (event) {
  var hasCircle = this.classList.contains("circle");
  this.classList.toggle("circle", !hasCircle)
  this.classList.toggle("cross", hasCircle)
  
  var x = parseInt(this.dataset.x)
  var y = parseInt(this.dataset.y)
  game[x][y] = hasCircle ? 1 : 0
};

[].forEach.call(squares, function (square) {
  square.addEventListener("click", onSquareCircle);
})
.square {
  height: 64px;
  width: 64px;
  border: 1px solid black;
  border-radius: 5px;
  background-size: calc(100% - 5px);
  background-position: center;
  background-repeat: no-repeat;
}

.cross {
  background-image: url('https://image.flaticon.com/icons/svg/128/128397.svg')
}

.circle {
  background-image: url('https://image.flaticon.com/icons/svg/64/64299.svg')
}
<table>
  <tbody>
    <tr>
      <td data-x="0" data-y="0" class="square"></td>
      <td data-x="0" data-y="1" class="square"></td>
      <td data-x="0" data-y="2" class="square"></td>
    </tr>
    <tr>
      <td data-x="1" data-y="0" class="square"></td>
      <td data-x="1" data-y="1" class="square"></td>
      <td data-x="1" data-y="2" class="square"></td>
    </tr>
    <tr>
      <td data-x="2" data-y="0" class="square"></td>
      <td data-x="2" data-y="1" class="square"></td>
      <td data-x="2" data-y="2" class="square"></td>
    </tr>
  </tbody>
</table>
    
09.04.2018 / 22:05
Doubt with Jquery Error trying to get property of non-object from Laravel