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

Colocando o peão no tabuleiro

Galera, estou fazendo um joguinho de tabuleiro.. E agora chegou a parte de inserir as peças(peões) para andar sobre o tabuleiro.. Fiz porém não é assim que é para sair.. É para ele sobrepor a casa quando estiver naquela casa o peão...

Meus códigos estão assim:

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Tabuleiro</title>

        <link href="jogo.css" rel="stylesheet" type="text/css">
        <link href="dado.css" rel="stylesheet" type="text/css">
        <script src="jquery-2.0.2.min.js"></script>
        <script src="pecas.js"></script>
        <script src="utils.js"></script>
        <script src="rotate-box.js"></script>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    </head>
    <body>

        <h1>Corrida Maluca</h1>

        <noscript>
        Seu navegador nao tem Javascript (ou esta desligado)
        </noscript>

        <div id="board">
            <!-- O javascript vai colocar o campo minado aqui -->
        </div>

        <div id="statusline">
            <!-- O javascript vai colocar o texto de status 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>

Javascript

var campoMinado = new Array(7);
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]


 $(function() {
    $( "#draggable" ).draggable({ revert: "valid" });
    $( "#draggable2" ).draggable({ revert: "invalid" });

    $( "#droppable" ).droppable({
      activeClass: "ui-state-hover",
      hoverClass: "ui-state-active",
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  });

function inicializa()
{
    desenhaTabela();
}

function desenhaTabela()
{
    var board = new Array();
    board.push("<table><tr>");
    for (var i = 0; i < campoMinado.length; i++) {
        if (i != 0)
            board.push("</tr><tr>");
        for (var j = 0; j < campoMinado[i].length; j++) {
            board.push('<td');
            board.push(' onMouseOver="cellClickedOver(this)"');
            board.push(' onMouseOut="cellClickedOut(this)"');

            board.push(' style="');

            if (campoMinado[i][j] == 0) {

                board.push('position:relative; z-index:0; ');
                board.push('border:#FFFF99; color:#ffffff; ');
                board.push('background:#ffffff; ');
            } else {
                board.push('position:relative; z-index:0; ');
            }

            board.push('">');

            if ((i == 1) && (j == 0)) {
                board.push('<div id="draggable" class="ui-widget-content"><img src="img/Pamela T 21.jpg" width="100%"></div>')
                board.push('Separe os medicamentos vencidos.<br><br><b>Avance 1 casa.</b>');
                board.push('<div class="itemNormal"><img src="img/Pamela T 21.jpg" width="100%"></div>');
                }

            else if ((i == 3) && (j == 0)) {
                board.push('Jogar rem&eacute;dio no ralo contamina o meio ambiente.<br><br><b>Volte 1 casa.</b>');
                board.push('<div class="itemNormal"><img src="img/Nayane T21.jpg" width="100%"></div>');
                } 

            else if ((i == 5) && (j == 1)) {
                board.push('Guardo os medicamentos vencidos em uma caixa e levo ao PSF.<br><br><b>Avance 2 casas.</b>');
                board.push('<div class="itemBase"><img src="img/Digitalizar0001(1).jpg" width="100%"></div>');
                } 

            else if ((i == 2) && (j == 2)) {
                board.push('Joga lixo com medicamentos do rio.<br><br><b>Volte 3 casas.</b>');
                board.push('<div class="itemNormal"><img src="img/Alana T 21(1).jpg" width="100%"></div>');
                }     

            else if ((i == 0) && (j == 3)) {
                board.push('Tomo rem&eacute;dio vencido.<br><br><b>Fique uma rodada sem jogar!</b>');
                board.push('<div class="itemTopo"><img src="img/Nayane T21.jpg" width="100%"></div>');
                } 

            else if ((i == 1) && (j == 4)) {
                board.push('N&atilde;o tomo rem&eacute;dio sem orienta&ccedil;&atilde;o m&eacute;dica.<br><br><b>Avance 3 casas!</b>');
                board.push('<div class="itemNormal"><img src="img/Nayane T21.jpg" width="100%"></div>');
                } 

            else if ((i == 3) && (j == 4)) {
                board.push('Jogo rem&eacute;dio no vaso sanit&aacute;rio.<br><br><b>Volte 4 casas!</b>');
                board.push('<div class="itemNormal"><img src="img/Nayane T21.jpg" width="100%"></div>');
                } 

            else if ((i == 5) && (j == 4)) {
                board.push('N&atilde;o me preocupo com o meio ambiente.<br><br><b>RETORNE AO IN&Iacute;CIO!</b>');
                board.push('<div class="itemNormal"><img src="img/Nayane T21.jpg" width="100%"></div>');
                } 

            else if ((i == 6) && (j == 6)) {
                board.push('Jogar rem&eacute;dios e seringas no esgoto.<br><br><b>Volte 2 casas!</b>');
                board.push('<div class="itemNormal"><img src="img/Nayane T21.jpg" width="100%"></div>');
                } 

            else if ((i == 4) && (j == 6)) {
                board.push('Levo os medicamentos vencidos no PSF.<br><br><b>Avance 1 casa!</b>');
                board.push('<div class="itemNormal"><img src="img/Nayane T21.jpg" width="100%"></div>');
                } 

            else if ((i == 1) && (j == 7)) {
                board.push('Jogar lixo e medicamentos nos terrenos baldios, ou na rua.<br><br><b>Volte 1 casa!</b>');
                board.push('<div class="itemTopo"><img src="img/Nayane T21.jpg" width="100%"></div>');
                } 

            else if ((i == 2) && (j == 8)) {
                board.push('Entrego os medicamentos vencidos na Escola.<br><br><b>Avance 1 casa!</b>');
                board.push('<div class="itemNormal"><img src="img/Nayane T21.jpg" width="100%"></div>');
                } 

            else if ((i == 3) && (j == 8)) {
                board.push('Queimo o lixo e os medicamentos vencidos.<br><br><b>RETORNE AO INICIO!</b>');
                board.push('<div class="itemNormal"><img src="img/Nayane T21.jpg" width="100%"></div>');
                } 

            else if ((i == 5) && (j == 8)) {
                board.push('N&atilde;o jogo medicamento nos rios.<br><br><b>Avance 1 casa!</b>');
                board.push('<div class="itemNormal"><img src="img/Nayane T21.jpg" width="100%"></div>');
                }

            else if ((i == 6) && (j == 9)) {
                board.push('Separo lixo dom&eacute;stico de medicamentos vencidos.<br><br><b>Avance 2 casas!</b>');
                board.push('<div class="itemBase"><img src="img/Nayane T21.jpg" width="100%"></div>');
                }

            else if ((i == 4) && (j == 10)) {
                board.push('Guardo os medicamentos vencidos em casa, dentro de uma caixa e longe do alcance de crian&ccedil;as.<br><br><b>Avance 1 casa!</b>');
                board.push('<div class="itemNormal"><img src="img/Nayane T21.jpg" width="100%"></div>');
                }

            else {
                board.push('&nbsp;');
            }

            board.push('</td>');
        }
    }
    board.push("</tr></table>");
    document.getElementById("board").innerHTML = board.join("\n");
}

function cellClickedOver(thisCell)
{
   $(thisCell).css({zIndex : 1});
   $('div', thisCell).stop().fadeIn();

    switch (thisCell.innerHTML) {
        case "0":
            $(thisCell).animate({
                color: '#FFFFFF'
            }, 500);
            break;

        case "1":
            $(thisCell).animate({
                color: '#FFFFFF'
            }, 500);
            break;

            return;
    }
}
function cellClickedOut(thisCell)
{
   $(thisCell).css({zIndex : 0});
   $('div', thisCell).stop().fadeOut();

    switch (thisCell.innerHTML) {
        case "0":
            $(thisCell).animate({
                color: '#FFFFFF'
            }, 500);
            break;

        case "1":
            $(thisCell).animate({
                color: '#FFFFFF'
            }, 500);
            break;

            return;
    }
}

window.onload = inicializa;

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 {
    margin: 0px;
    padding: 0px;
    border-spacing: 0px;
}

td {
    padding: 0px;
    margin: 0px;
    width: 100px;
    height: 100px;
    font-size: 12px;
    border: 2px outset #FFFF99;
    text-align: center;
    background-color: #FF9;
    color: #00C;
}

td.clicked {
    background-color: #FFFF00;
    border: 2px outset #FFFF99;
}

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

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

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

.itemBase { 
    position: absolute;
    width: 150px;
    height: 150px;
    left: 0px;
    z-index: 1;
    display: none;
    bottom: 104px;        
}
  • Alê, os peões não estão aparecendo ou estão aparecendo fora de lugar?

    Kiko Mesquita   02 de jul de 2013
  • Ele aparece uns segundos em cima da minha frase.. eu queria que a frase sumisse e aparecesse somente o peao quando estivesse naquela casa.. Entende? Tipo a frase de condição(Você jogou lixo no chão, volte duas casas) sumisse.. Ai quando voltasse o peão duas casas, a frase aparecia de novo

    Alê :)   02 de jul de 2013
  • Ale, não consegui achar o trecho especifico do peão e das casas mas acho que você ta usando Zindex para posicionar o peão uma camada acima do texto, você teria que usar um visibility:hidden ou display:none na casa e posicionar o peão sobre a mesma.

    Kiko Mesquita   03 de jul de 2013
  • ... if ((i == 1) && (j == 0)) { board.push('

    ') board.push('Separe os medicamentos vencidos.Avance 1 casa.'); board.push(''); } ....

    Aqi o trecho

    Alê :)   03 de jul de 2013
  • Alê, você poderia colocar o código no jsfiddle para que a gente possa ver o que o seu código está fazendo?

    William Seiti Mizuta   04 de jul de 2013
Mostrar todos os 8 comentários>
  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!

0 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.