1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Colocar todas as peças na mesma casinha

Boa tarde pessoal Estou fazendo um joguinho... E os peões na posição inicial estão ficando um embaixo do outro.. Tentei usar display:inline mas aí não posso movimenta-los :\

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Corrida Maluca</title>
    <link href="jogo.css" rel="stylesheet" type="text/css">
    <link href="dado.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="jquery-2.0.2.min.js"></script>
    <script src="jogo.js"></script>
    <script src="utils.js"></script>
    <script src="rotate-box.js"></script>
    <meta charset="UTF-8">
    <meta name="description" content="Tabuleiro - Corrida Maluca">
    <meta name="keywords" content="tabuleiro,jogo,saúde,medicamentos">
    <meta name="author" content="Alessandra Magalhães Rosa">  
  </head>

  <body class="experiment">
    <h1>Tabuleiro - Corrida Maluca</h1>
    <noscript>Seu navegador não tem Javascript (ou está desligado)</noscript>
    <p id="mensagem" style="text-align:center;"></p>
    <div id="board">
      <!-- O javascript vai colocar o tabuleiro aqui -->
    </div>
    <section id="bot" class="container">
      <div id="cube" class="show-front">
        <figure class="front">1</figure>
        <figure class="back">2</figure>
        <figure class="right">3</figure>
        <figure class="left">4</figure>
        <figure class="top">5</figure>
        <figure class="bottom">6</figure>
      </div>
      <div class="num_sorteado">N&uacute;mero sorteado: <span id="exibe_numero"></span></div>
    </section>
  </body>
</html>

CSS

body {
  font-family: sans-serif;
  text-align: center;
}

h1 { 
  font-family: Old English Text MT, Algerian, Cooper Black;
  font-size: 35px;
  color: #00C;
}

table {
  border-spacing: 0px;
}

h2 {
  font-size: 11px;
  text-align: center;
  color: #00C;
}

td {
  width: 110px;
  height: 110px;
  z-index: 0;
}

.tdCaminho {
  background-color: #FF9;
  border: 2px outset #FFFF99;
}

.tdBranco {
  background-color: #FFF;
}

p {
  font-size: small;
  text-align: justify;
}

.itemNormal { 
  position: absolute;
  width: 150px;
  height: 150px;
  z-index: 1;
  display: none;
}

.itemTopo { 
  position: absolute;
  width: 150px;
  height: 150px;
  z-index: 1;
  display: none;
}

.itemBase { 
  position: absolute;
  width: 150px;
  height: 150px;
  z-index: 1;
  display: none;
}

.divVazia {
  width:  10px;
  height: 30px;
  margin: auto;  
  }

Javascript

var campoMinado = new Array(7);
var peao = new Array(7);
var jogadores = new Array(4);
var lastObj, posIni = 0, posFim = 0, linIni = 0, linFim = 0, colIni = 0, colFim = 0, dadoSorteado = 0, controlaJogador = 0;
var ordemPeao;

campoMinado[0] = [1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0];
campoMinado[1] = [1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 0];
campoMinado[2] = [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0];
campoMinado[3] = [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1];
campoMinado[4] = [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1];
campoMinado[5] = [1, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1];
campoMinado[6] = [0, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1];

peao[0] = [ 0, -1, 12, 13, 14, -1, -1, -1, -1, -1, -1];
peao[1] = [ 1, -1, 11, -1, 15, -1, 27, 28, 29, -1, -1];
peao[2] = [ 2, -1, 10, -1, 16, -1, 26, -1, 30, -1, -1];
peao[3] = [ 3, -1,  9, -1, 17, -1, 25, -1, 31, -1, 39];
peao[4] = [ 4, -1,  8, -1, 18, -1, 24, -1, 32, -1, 38];
peao[5] = [ 5,  6,  7, -1, 19, -1, 23, -1, 33, -1, 37];
peao[6] = [-1, -1, -1, -1, 20, 21, 22, -1, 34, 35, 36];

jogadores = [0,0,0,0];



$(function() {
  $( "#draggable" ).draggable();
});

function inicializa() {
  desenhaTabela();
}

function getLinhaColuna(posicaoEsperada) {
  var i, idRowCol, j, flag = 0;
  for(i = 0; i < 7; i++) {
    for(j = 0; j < 11; j++) {
      if(peao[i][j] === parseInt(posicaoEsperada)) {
        flag = 1;
        break;
      }
    }
    if(flag)
      break;
  }
  idRowCol = i + "," + j;
  return idRowCol;
}

function verificaPremio(posicaoEsperada, data) {
  // Possibilidades de retroceder ou avançar as casas [4]
  var novoElemento, valor = 0;
  var tmpLC = getLinhaColuna(posicaoEsperada).toString();
  var temp = tmpLC.split(",");
  var i = parseInt(temp[0]);
  var j = parseInt(temp[1]);

  if ((i === 1) && (j === 0))
      valor = 1;
  else if ((i === 3) && (j === 0))
      valor = -1;
  else if ((i === 5) && (j === 1))
      valor = 2;
  else if ((i === 2) && (j === 2))
      valor = -3;
  else if ((i === 0) && (j === 3))
      valor = 0; // <não sei como fazer uma rodada parada>
  else if ((i === 1) && (j === 4))
      valor = 3;
  else if ((i === 3) && (j === 4))
      valor = -4;
  else if ((i === 5) && (j === 4))
      valor = -19;
  else if ((i === 6) && (j === 6))
      valor = -2;
  else if ((i === 4) && (j === 6))
      valor = 1;
  else if ((i === 1) && (j === 7))
      valor = -1;
  else if ((i === 2) && (j === 8))
      valor = 1;
  else if ((i === 3) && (j === 8))
      valor = -31;
  else if ((i === 5) && (j === 8))
      valor = 1;
  else if ((i === 6) && (j === 9))
      valor = 2;
  else if ((i === 4) && (j === 10))
      valor = 1;

  if(valor != 0) {
    if(valor > 0)
      alert("Uhuhuhuuuuuuuuuuuuuuu, você avançará mais " + valor + " casas!");
    else
      alert("Que pena, você perderá " + valor + " casas já conquistadas :-(");

    novoElemento = document.getElementById(getLinhaColuna(posicaoEsperada + valor).toString());
    novoElemento.appendChild(document.getElementById(data));

    posicaoEsperada += valor;
  }
  return posicaoEsperada;
}

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  var temp;  
  ev.dataTransfer.setData("Text",ev.target.id);
  ordemPeao = ev.target.id;

  // Procurando a posição inicial onde o peão se encontra no momento (início do drag)!
  temp = ev.target.parentNode.id.split(",");  // precisa do parentNode, pois a imagem do peão é filho do elemento DIV
  linIni = temp[0];
  colIni = temp[1];
  posIni = peao[linIni][colIni];
}

function drop(ev) {
  var data, temp, result, posEsperada;
  dadoSorteado = document.getElementById("exibe_numero").innerHTML;

  ev.preventDefault();
  // Última modificação, inserindo mais jogadores
  if (controlaJogador == ordemPeao)
  {
          alert("Agora é a vez do jogador: " + controlaJogador + " - e o peão movido foi o de número: " + ordemPeao);
          data = ev.dataTransfer.getData("Text");

          // Procurando a posição final em que o usuário está no momento (possível ponto de drop)!
          temp = ev.target.id.split(",");  // NÃO precisa do parentNode, pois a DIV não tem filhos
          linFim = temp[0];
          colFim = temp[1];
          posFim = peao[linFim][colFim];

          // Diferença entre a posição inicial e final para verificar se permite ou não o DROP!
          result = parseInt(posFim) - parseInt(posIni);

          // Posição em que o peão precisa ser solto! (independente de onde o usuário está apontando com o mouse no momento...)
          posEsperada = parseInt(posIni) + parseInt(dadoSorteado);

          // Se resultado é positivo ou igual a zero, DROP permitido! (ou seja, o usuário arrastou o peão no caminho e na direção certa)
          // [2]
          if (result >= 0 && dadoSorteado > 0) {
            // Se a posição final (onde o usuário está agora!) NÃO é o lugar da posição esperada
            // então precisamos redefinir o DESTINO ("target")
            // se ele não entrar neste IF, o usuário já está na posição desejada! [2]
            if(result != dadoSorteado)  {
              // Define a posição correta usando o próprio elemento do documento  
              document.getElementById("mensagem").innerHTML = "Você arrastou o peão para a casa errada... Jogada automaticamente corrigida!";
              if(posEsperada <= 39)
                document.getElementById(getLinhaColuna(posEsperada).toString()).appendChild(document.getElementById(data));
              else
                document.getElementById("3,10").appendChild(document.getElementById(data));

              setTimeout(function() { document.getElementById("mensagem").innerHTML = ""; }, 2000);        
            }
            else  {
              // Tudo certo, joga o peão para a posição esperada, cfe. o valor sorteado no dado! [2][3]
              ev.target.appendChild(document.getElementById(data));
            }

            // Testa se haverá avanço, retrocesso ou parada na jogada
            posEsperada = verificaPremio(posEsperada, data);
          }
          // Bom, se ele não entrou neste IF, então o usuário tentou arrastar o peão na direção errada (para trás)...
          // aí deixa que o próprio navegador se encarregue de não aceitar o drop, e o peão voltar para a posição inicial,
          // donde ele partiu! [1]

          jogadores[controlaJogador] == posEsperada;

          if(posEsperada >= 39)
            alert("Parabéns, você VENCEU!!!");

          // Atualizando a nova posição inicial
          linIni = linFim;
          colIni = colFim;
          document.getElementById("exibe_numero").innerHTML = 0;
          // Verificar aqui
          if (controlaJogador < 3)
            controlaJogador++;
          else
            controlaJogador = 0;
  }
}

function desenhaTabela() {
  var board = new Array();

  board.push('<table>');
  for (var i = 0; i < campoMinado.length; i++) {
    board.push('<tr>');
    for (var j = 0; j < campoMinado[i].length; j++) {
      if (campoMinado[i][j] === 0)
        board.push('<td class="tdBranco">');
      else
        board.push('<td class="tdCaminho">');

      if ((i === 1) && (j === 0)) {
        board.push('<h2 onMouseOver="cellClickedOver(this)" onMouseOut="cellClickedOut(this)">');
        board.push('Separe os medicamentos vencidos.<br /><br />');
        board.push('<span style="font-weight: bold;">AVANCE 01 CASA.</span>');
        board.push('<div class="itemNormal"><img src="img/Pamela T 21.jpg" width="100%"></div>');
        board.push('</h2>');
      }
      else if ((i === 3) && (j === 0)) {
        board.push('<h2 onMouseOver="cellClickedOver(this)" onMouseOut="cellClickedOut(this)">');
        board.push('Jogar rem&eacute;dio no ralo contamina o meio ambiente.<br /><br />');
        board.push('<span style="font-weight: bold;">VOLTE 01 CASA.</span>');
        board.push('<div class="itemNormal"><img src="img/Nayane T21.jpg" width="100%"></div>');
        board.push('</h2>');
      } 
      else if ((i === 5) && (j === 1)) {
        board.push('<h2 onMouseOver="cellClickedOver(this)" onMouseOut="cellClickedOut(this)">');
        board.push('Guardo os medicamentos vencidos em uma caixa e levo ao PSF.<br /><br />');
        board.push('<span style="font-weight: bold;">AVANCE 02 CASAS.</span>');
        board.push('<div class="itemBase"><img src="img/Digitalizar0001(1).jpg" width="100%"></div>');
        board.push('</h2>');
      }    
      else if ((i === 2) && (j === 2)) {
        board.push('<h2 onMouseOver="cellClickedOver(this)" onMouseOut="cellClickedOut(this)">');
        board.push('Joga lixo com medicamentos do rio.<br /><br />');
        board.push('<span style="font-weight: bold;">VOLTE 03 CASAS.</span>');
        board.push('<div class="itemNormal"><img src="img/Alana T 21(1).jpg" width="100%"></div>');
        board.push('</h2>');
      } 
      else if ((i === 0) && (j === 3)) {
        board.push('<h2 onMouseOver="cellClickedOver(this)" onMouseOut="cellClickedOut(this)">');
        board.push('Tomo rem&eacute;dio vencido.<br /><br />');
        board.push('<span style="font-weight: bold;">UMA RODADA SEM JOGAR!</span>');
        board.push('<div class="itemTopo"><img src="img/Nayane T21.jpg" width="100%"></div>');
        board.push('</h2>');
      } 
      else if ((i === 1) && (j === 4)) {
        board.push('<h2 onMouseOver="cellClickedOver(this)" onMouseOut="cellClickedOut(this)">');
        board.push('N&atilde;o tomo rem&eacute;dio sem orienta&ccedil;&atilde;o m&eacute;dica.<br /><br />');
        board.push('<span style="font-weight: bold;">AVANCE 03 CASAS.</span>');
        board.push('<div class="itemNormal"><img src="img/Nayane T21.jpg" width="100%"></div>');
        board.push('</h2>');
      } 
      else if ((i === 3) && (j === 4)) {
        board.push('<h2 onMouseOver="cellClickedOver(this)" onMouseOut="cellClickedOut(this)">');
        board.push('Jogo rem&eacute;dio no vaso sanit&aacute;rio.<br /><br />');
        board.push('<span style="font-weight: bold;">VOLTE 04 CASAS.</span>');
        board.push('<div class="itemNormal"><img src="img/Nayane T21.jpg" width="100%"></div>');
        board.push('</h2>');
      } 
      else if ((i === 5) && (j === 4)) {
        board.push('<h2 onMouseOver="cellClickedOver(this)" onMouseOut="cellClickedOut(this)">');
        board.push('N&atilde;o me preocupo com o meio ambiente.<br /><br />');
        board.push('<span style="font-weight: bold;">RETORNE AO IN&Iacute;CIO!</span>');
        board.push('<div class="itemNormal"><img src="img/Nayane T21.jpg" width="100%"></div>');
        board.push('</h2>');
      } 
      else if ((i === 6) && (j === 6)) {
        board.push('<h2 onMouseOver="cellClickedOver(this)" onMouseOut="cellClickedOut(this)">');
        board.push('Jogar rem&eacute;dios e seringas no esgoto.<br /><br />');
        board.push('<span style="font-weight: bold;">VOLTE 02 CASAS.</span>');
        board.push('<div class="itemNormal"><img src="img/Nayane T21.jpg" width="100%"></div>');
        board.push('</h2>');
      } 
      else if ((i === 4) && (j === 6)) {
        board.push('<h2 onMouseOver="cellClickedOver(this)" onMouseOut="cellClickedOut(this)">');
        board.push('Levo os medicamentos vencidos no PSF.<br /><br />');
        board.push('<span style="font-weight: bold;">AVANCE 01 CASA.</span>');
        board.push('<div class="itemNormal"><img src="img/Nayane T21.jpg" width="100%"></div>');
        board.push('</h2>');
      } 
      else if ((i === 1) && (j === 7)) {
        board.push('<h2 onMouseOver="cellClickedOver(this)" onMouseOut="cellClickedOut(this)">');
        board.push('Jogar lixo e medicamentos nos terrenos baldios, ou na rua.<br /><br />');
        board.push('<span style="font-weight: bold;">VOLTE 01 CASA.</span>');
        board.push('<div class="itemTopo"><img src="img/Nayane T21.jpg" width="100%"></div>');
        board.push('</h2>');
      } 
      else if ((i === 2) && (j === 8)) {
        board.push('<h2 onMouseOver="cellClickedOver(this)" onMouseOut="cellClickedOut(this)">');
        board.push('Entrego os medicamentos vencidos na Escola.<br /><br />');
        board.push('<span style="font-weight: bold;">AVANCE 01 CASA.</span>');
        board.push('<div class="itemNormal"><img src="img/Nayane T21.jpg" width="100%"></div>');
        board.push('</h2>');
      } 
      else if ((i === 3) && (j === 8)) {
        board.push('<h2 onMouseOver="cellClickedOver(this)" onMouseOut="cellClickedOut(this)">');
        board.push('Queimo o lixo e os medicamentos vencidos.<br /><br />');
        board.push('<span style="font-weight: bold;">RETORNE AO IN&Iacute;CIO!</span>');
        board.push('<div class="itemNormal"><img src="img/Nayane T21.jpg" width="100%"></div>');
        board.push('</h2>');
      } 
      else if ((i === 5) && (j === 8)) {
        board.push('<h2 onMouseOver="cellClickedOver(this)" onMouseOut="cellClickedOut(this)">');
        board.push('N&atilde;o jogo medicamento nos rios.<br /><br />');
        board.push('<span style="font-weight: bold;">AVANCE 01 CASA.</span>');
        board.push('<div class="itemNormal"><img src="img/Nayane T21.jpg" width="100%"></div>');
        board.push('</h2>');
      }
      else if ((i === 6) && (j === 9)) {
        board.push('<h2 onMouseOver="cellClickedOver(this)" onMouseOut="cellClickedOut(this)">');
        board.push('Separo lixo dom&eacute;stico de medicamentos vencidos.<br /><br />');
        board.push('<span style="font-weight: bold;">AVANCE 02 CASAS.</span>');
        board.push('<div class="itemBase"><img src="img/Nayane T21.jpg" width="100%"></div>');
        board.push('</h2>');
      }
      else if ((i === 4) && (j === 10)) {
        board.push('<h2 onMouseOver="cellClickedOver(this)" onMouseOut="cellClickedOut(this)">');
        board.push('Guardo os medicamentos vencidos em casa, dentro de uma caixa e longe do alcance de crian&ccedil;as.<br /><br />');
        board.push('<span style="font-weight: bold;">AVANCE 01 CASA.</span>');
        board.push('<div class="itemNormal"><img src="img/Nayane T21.jpg" width="100%"></div>');
        board.push('</h2>');
      }

      if ((i === 0 )&&( j === 0 )) {
        board.push('<span ondrop="drop(event)" ondragover="allowDrop(event)">');
        board.push('<div class="divVazia" id="'+i+','+j+'">');
        // Id Replicadas
        // Mudar a cor do pacman para facilitar... e definir um tamanho (wxh) padrão!
        board.push('<img id="0" src="img/pacman.png" draggable="true" ondragstart="drag(event)" width="35px" height="35px" style="z-index:2;">');
        board.push('<img id="1" src="img/pacman2.png" draggable="true" ondragstart="drag(event)" width="35px" height="35px" style="z-index:2;">');
        board.push('<img id="2" src="img/pacman3.png" draggable="true" ondragstart="drag(event)" width="35px" height="35px" style="z-index:2;">');
        board.push('<img id="3" src="img/pacman4.png" draggable="true" ondragstart="drag(event)" width="35px" height="35px" style="z-index:2;">');
        board.push('</div>');
        board.push('</span>');
      }
      else
      {
        if (campoMinado[i][j] === 1) {
          board.push('<span ondrop="drop(event)" ondragover="allowDrop(event)">');
          board.push('<div class="divVazia" id="'+i+','+j+'">');
          board.push('</div>');
          board.push('</span>');
        }
      }

      board.push('</td>');
    }
    board.push('</tr>');
  }
  board.push('</table>');

  document.getElementById("board").innerHTML = board.join("\n");
  document.getElementById("exibe_numero").innerHTML = 0;
}

function cellClickedOver(thisCell)
{
  if(lastObj)
    lastObj.stop().fadeOut();

  $(thisCell).find('div').css('z-index', '1');
  $(thisCell).find('div').fadeIn();
  lastObj = $(thisCell).find('div');
}

function cellClickedOut(thisCell)
{
  if(lastObj)
    lastObj.stop().fadeIn();

  $(thisCell).find('div').fadeOut();
  $(thisCell).find('div').css('z-index', '0');
  lastObj = $(thisCell).find('div');
}

window.onload = inicializa;

Alguém pode me ajudar?

  • Mostre apenas como está a formatação dessa parte (Com os peões) e o HTML que esse css está mexendo.

    Mickdark   28 de ago de 2013
  • .divVazia { width: 10px; height: 30px; margin: auto; }

    Alê :)   28 de ago de 2013
  • Ok! Agora so falta o html!

    Mickdark   28 de ago de 2013
  • se colocar figure {display: inline} não consegue mover?

    Scotto   29 de ago de 2013
  • Tente fazer seu código neste site, será bem mais fácil identificar o problema. http://jsfiddle.net/

    Giovane   02 de set de 2013
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

1 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags css html javascript jquery ou faça a sua própria pergunta.