Tabuleiro de Xadrez

index.html

<div id="containerFull">
<div id="container">
<div class="row line-1">
  <div id="1">&#9814</div>
  <div id="2">&#9816</div>
  <div id="3">&#9815</div>
  <div id="4">&#9819</div>
  <div id="5">&#9812</div>
  <div id="6">&#9821</div>
  <div id="7">&#9816</div>
  <div id="8">&#9820</div>
</div>
<div class="row line-2">
  <div id="9">&#9823</div>
  <div id="10">&#9817</div>
  <div id="11">&#9823</div>
  <div id="12">&#9817</div>
  <div id="13">&#9823</div>
  <div id="14">&#9817</div>
  <div id="15">&#9823</div>
  <div id="16">&#9817</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">&#9817</div>
  <div id="50">&#9823</div>
  <div id="51">&#9817</div>
  <div id="52">&#9823</div>
  <div id="53">&#9817</div>
  <div id="54">&#9823</div>
  <div id="55">&#9817</div>
  <div id="56">&#9823</div>
</div>
<div class="row line-2">
  <div id="57">&#9820</div>
  <div id="58">&#9816</div>
  <div id="59">&#9815</div>
  <div id="60">&#9813</div>
  <div id="61">&#9812</div>
  <div id="62">&#9815</div>
  <div id="63">&#9816</div>
  <div id="64">&#9814</div>
</div>
</div>
<div id="pontuacao">0</div>
<div class="mensagem">
  Clique nas peças e comece seu jogo
</div>
</div>

script.js

// 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");
    }
  }
}

style.css

*, *::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;
}

Tabuleiro-de-Xadrez.markdown

Tabuleiro de Xadrez

Status: Em Construção

Forked from Luiz Picolo's Pen Tabuleiro de Xadrez.

A Pen by Gean Pereira on CodePen.

License.