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 == '♘')
{
if (!(posicaoInicial - posicaFinal) == 17)
{
alert("Jogada Inválida");
}
}
}
How could I?
you say, change it? var peca = $(this). text();
– aa_sp
yes that’s right, have this snippet to implement: var peca = $(this). text() ...and tbm others... like this: $('#'+id). text(getPeca());
– Neo
and in html, in each id like this: <div id="1">♖</div>.. want to insert an image as for example: <div id="1"><img src="imgs/user.ico" width="50px" height="50px" /></div>
– Neo
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
– aa_sp
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,
– Neo
tried like this: var peca = $(this). find('img'). attr("src");..... $('#'+id). find('img'). attr("src"). text(getPeca());... but it didn’t work out right
– Neo
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
– Neo
you could save the change in this link and send here to view?
– Neo
on that link I added an image: https://codepen.io/anon/pen/xWJdvw
– Neo
tried tbm $(this). find('img'); but it was not
– Neo
hello. I still can’t.. some idea..?
– Neo
..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
– Neo
Hi, I created a chat about this subject: https://chat.stackexchange.com/rooms/77708/tabularinteractivo-jquery-css-html-how-to
– Neo