Creating 2d board with images

Asked

Viewed 93 times

0

Hello, I am creating a board game2d with Js/html/CSS,

With the code below I can make each div’s text move across the board, but I can’t make those pieces images...

In the codepen below you can see with the current operation: https://codepen.io/luizpicolo/pen/hArIt

..Below I will put the js that I would like to modify to accept image instead of characters to be moved:

// Função para realizar as jogas
$('#container div.row div').click(function(){

   // Captura o ID da posição da peça
   var id = $(this).attr('id');

   // Captura o conteudo da seleção (Imagem peça)
   var peca = $(this).text();

   // inclui a peça seleciona no WebStoraged utilizando a   função setPosicaoPeca. Caso a peça já esteja selecionada anteriormente, a mesma e posicionada no local desejada e é limpada do webStoraged
   if (peca != ""){
      setPosicaoPeca(id, peca);
      $(this).text("");
   }
   else {
      if (getPeca()){
         $('#'+id).text(getPeca());

            // Altera o contador de movimentos
            $('#pontuacao').text(
              parseInt($('#pontuacao').text()) + 1
            );

         // funcao para limpar os dados
         limparDados();
      }
   }
})

// Função para setar a posição da peça e salvar no webstoraged
function setPosicaoPeca(id, peca) {
  localStorage.setItem("id", id);
  localStorage.setItem("peca", peca);
}

// Função para retornar o ID da peça que havia sido selecionada anteriormente
function getPosicaoID() {
  return localStorage.getItem("id");
}

// Função para o retorno da peca selecionada anteriormente
function getPeca() {
  return localStorage.getItem('peca');
}

// Função para limpar todos os dados 
function limparDados() {
  localStorage.clear();
}

// Função para validar os dados da jogada
function validarJogada(posicaoInicial, posicaFinal, peca)
{
  // Cavalo preto
  if (peca == '&#9816') 
  {
    if (!(posicaoInicial - posicaFinal) == 17)
    {
      alert("Jogada Inválida");
    }
  }
}

How could I?

  • 1

    you say, change it? var peca = $(this). text();

  • yes that’s right, have this snippet to implement: var peca = $(this). text() ...and tbm others... like this: $('#'+id). text(getPeca());

  • and in html, in each id like this: <div id="1">&#9814</div>.. want to insert an image as for example: <div id="1"><img src="imgs/user.ico" width="50px" height="50px" /></div>

  • 1

    I don’t know if the best way is going to be you manipulate the images, maybe it’s more interesting by class (since some images repeat themselves). With the image, Voce could use $(this). find('img'). attr("src"); to locate the selected image

  • In this example is with chess pieces, but I need to have the possibility to use random images of other things, or class icons as fontawesome, because I will make a feature of another segment q is not chess,

  • tried like this: var peca = $(this). find('img'). attr("src");..... $('#'+id). find('img'). attr("src"). text(getPeca());... but it didn’t work out right

  • I created a codepen at that time to be able to better exemplify and test the test with the images... https://codepen.io/anon/pen/xWJdvw

  • you could save the change in this link and send here to view?

  • on that link I added an image: https://codepen.io/anon/pen/xWJdvw

  • tried tbm $(this). find('img'); but it was not

  • hello. I still can’t.. some idea..?

  • ..I still can’t... Does anyone know how to implement the image or icone in this js/html and be moved with the click? codepen.io/Anon/pen/xWJdvw

  • Hi, I created a chat about this subject: https://chat.stackexchange.com/rooms/77708/tabularinteractivo-jquery-css-html-how-to

Show 8 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.