Status: Em Construção
Forked from Luiz Picolo's Pen Tabuleiro de Xadrez.
A Pen by Gean Pereira on CodePen.
<div id="containerFull"> | |
<div id="container"> | |
<div class="row line-1"> | |
<div id="1">♖</div> | |
<div id="2">♘</div> | |
<div id="3">♗</div> | |
<div id="4">♛</div> | |
<div id="5">♔</div> | |
<div id="6">♝</div> | |
<div id="7">♘</div> | |
<div id="8">♜</div> | |
</div> | |
<div class="row line-2"> | |
<div id="9">♟</div> | |
<div id="10">♙</div> | |
<div id="11">♟</div> | |
<div id="12">♙</div> | |
<div id="13">♟</div> | |
<div id="14">♙</div> | |
<div id="15">♟</div> | |
<div id="16">♙</div> | |
</div> | |
<div class="row line-1"> | |
<div id="17"></div> | |
<div id="18"></div> | |
<div id="19"></div> | |
<div id="20"></div> | |
<div id="21"></div> | |
<div id="22"></div> | |
<div id="23"></div> | |
<div id="24"></div> | |
</div> | |
<div class="row line-2"> | |
<div id="25"></div> | |
<div id="26"></div> | |
<div id="27"></div> | |
<div id="28"></div> | |
<div id="29"></div> | |
<div id="30"></div> | |
<div id="31"></div> | |
<div id="32"></div> | |
</div> | |
<div class="row line-1"> | |
<div id="33"></div> | |
<div id="34"></div> | |
<div id="35"></div> | |
<div id="36"></div> | |
<div id="37"></div> | |
<div id="38"></div> | |
<div id="39"></div> | |
<div id="40"></div> | |
</div> | |
<div class="row line-2"> | |
<div id="41"></div> | |
<div id="42"></div> | |
<div id="43"></div> | |
<div id="44"></div> | |
<div id="45"></div> | |
<div id="46"></div> | |
<div id="47"></div> | |
<div id="48"></div> | |
</div> | |
<div class="row line-1"> | |
<div id="49">♙</div> | |
<div id="50">♟</div> | |
<div id="51">♙</div> | |
<div id="52">♟</div> | |
<div id="53">♙</div> | |
<div id="54">♟</div> | |
<div id="55">♙</div> | |
<div id="56">♟</div> | |
</div> | |
<div class="row line-2"> | |
<div id="57">♜</div> | |
<div id="58">♘</div> | |
<div id="59">♗</div> | |
<div id="60">♕</div> | |
<div id="61">♔</div> | |
<div id="62">♗</div> | |
<div id="63">♘</div> | |
<div id="64">♖</div> | |
</div> | |
</div> | |
<div id="pontuacao">0</div> | |
<div class="mensagem"> | |
Clique nas peças e comece seu jogo | |
</div> | |
</div> |
// 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"); | |
} | |
} | |
} |
*, *::before, *::after{ | |
box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
-o-box-sizing: border-box; | |
} | |
#containerFull { | |
width: 780px; | |
margin: 0 auto; | |
} | |
#container { | |
border: 3px solid #000; | |
width: 566px; | |
height: 563px; | |
border-radius: 5px; | |
cursor: pointer; | |
float: left; | |
} | |
.row { | |
clear: both; | |
} | |
.row div { | |
font-size: 3em; | |
float: left; | |
width: 70px; | |
height: 70px; | |
border-left: 1.5px solid #000; | |
border-bottom: 1.5px solid #000; | |
text-align: center; | |
} | |
.row div:first-child { | |
border-left: 0; | |
} | |
.line-1 div:nth-child(2n+1) { | |
background: #000; | |
color: #FFF | |
} | |
.line-2 div:nth-child(2n) { | |
background: #000; | |
color: #FFF | |
} | |
#pontuacao { | |
border: 1px solid #000; | |
width: 200px; | |
height: 50px; | |
float:left; | |
padding: 6px; | |
font-size: 30px; | |
text-align: right; | |
margin-left: 5px; | |
border-radius: 5px; | |
} | |
.mensagem { | |
text-align: center; | |
} |
Status: Em Construção
Forked from Luiz Picolo's Pen Tabuleiro de Xadrez.
A Pen by Gean Pereira on CodePen.