Jump to content

Recommended Posts

Estou criando um jogo de cartas em web, o jogo é bem estilo HS, e estou tendo problemas para adicionar condições de movimentação no drag and drop. Como vocês podem ver eu tenho uma variável mana, e a movimentação das cartas só seria possível de acordo com ela, porém quando adiciono as condições o D&D acaba nem se movimentando mais, pensei em chamar cada função do d&d dentro de uma condição, mas também não funcionou, alguém pode ajudar?

 

JS

// Jogador 1

const fillplace1 = document.querySelector('#fillplace1');
const fillplace2 = document.querySelector('#fillplace2');
const fillplace3 = document.querySelector('#fillplace3');
var fill;

const empties = document.querySelectorAll('.empty');

fillplace1.addEventListener('dragstart', enterstart);
fillplace2.addEventListener('dragstart', enterstart);
fillplace3.addEventListener('dragstart', enterstart);

for (const empty of empties) {
    empty.addEventListener('dragover', dragOver);
    empty.addEventListener('dragenter', dragEnter);
    empty.addEventListener('dragleave', dragLeave);
    empty.addEventListener('drop', dragDrop);
}

function enterstart(){
    fill = this;
}

function dragOver(e) {
    e.preventDefault();
}

function dragEnter(e) {
    e.preventDefault();
    this.className += ' hovered';
}

function dragLeave() {
    this.className = 'empty';
}

function dragDrop(id) {
    this.className = 'empty';
    this.append(fill);
}

 

HTML

<link rel="stylesheet" href="../css/jogar.css" />

 

<div id="barraGeneral">
    <img src="../imagens/Campo/barraGeneralalfa.png" id="imggeneral" />
</div>

 

<div id="persona">
    <img src="../imagens/Personagem/cucapersonagem.png" id="imgpersonagem" />
</div>

 

<button id="btpassar" onclick="cont();">Passar Rodada</button>


<H1 id="campomana">1</H1>

 

<!-- Mesa das cartas jogador 1-->
<div class="empty" id="emptyplace1">
</div>

<div class="empty" id="emptyplace2">
</div>

<div class="empty" id="emptyplace3">
</div>

<div class="empty" id="emptyplace4">
</div>

<div class="empty" id="emptyplace5">
</div>

 

<!-- Mão do jogador 1 -->
<div class="emptyhand1">
    <div class="fill" draggable="true" id="fillplace1">
        <img src='../imagens/Sorteio/aa.png' draggable='true'>
    </div>
</div>

 

<div class="emptyhand2">
    <div class="fill" draggable="true" id="fillplace2">
        <img src='../imagens/Sorteio/aa2.png' draggable='true'>
    </div>
</div>

 

<div class="emptyhand3">
    <div class="fill" draggable="true" id="fillplace3">
        <img src='../imagens/Sorteio/aa2.png' draggable='true'>
    </div>
</div>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Sapinn
      Salve salve.
      Mas uma dúvida minha aqui É o seguinte tenho uma pagina que tem um texto de um usuario e eu gostaria de imprimir esta página usando javascript. Sei que usando o window.print() da pra imprimir o problema é que não fica organizado. Então eu gostaria de imprimir outra pagina na qual eu organizaria melhor o  texto e outra informações do usuario para impressão. Alguém tem algum codigo ae que faça isso?
       
      Desde já agradeço.
    • By MatheusSmidt
      Bom dia,
      Estou precisando de ajuda com o código do formulário de um sistema de cadastro.
      A página é para consulta mas tem a possibilidade de adicionar ou retirar "faltas" de cada profissional cadastrado através de botões simples e também apagar um ou múltiplos profissionais da lista, através de checkbox..
      Essa ações atualizam o banco de dados e já retornam na tela automaticamente.
      O problema é que não fui eu que estruturei o código PHP e não consigo aliar as duas funções que falei anteriormente. Quando consigo fazer funcionar o sistema de adição e redução de faltas, consigo apenas excluir o último nome da lista, mesmo selecionando vários. E quando consigo resolver a parte de excluir vários nomes, não consigo adicionar e reduzir o número de faltas.
      O código é o seguinte:
       
      <?php
      require_once ("verifica.php");
      require_once ("topo.php");
      require_once ("conexao.php");
      $enviar = isset($_POST["txtEnviar"]) ? $_POST["txtEnviar"]: '';
      $ordenar = isset($_GET["ordenar"]) ? $_GET["ordenar"]: '';
      if ($ordenar == "")
          $ordenar = "nome";
      if ($enviar != 1) {
          $query = mysql_query("select * from docente order by $ordenar") or die ("Erro ao selecionar dados do docente! ".mysql_error());
      } else {
          $rdCriterio = $_POST["rdCriterio"];
          $pesquisar = $_POST["txtPesquisar"];
          $query = mysql_query("select * from docente where $rdCriterio like '%$pesquisar%'") or die ("Erro ao efetuar a pesquisa! ".mysql_error());
      }
      $totalDocentes = mysql_num_rows(mysql_query("select * from docente"));
      ?>
      <div id="meio">
          <h2>Lista de docentes (<?php echo $totalDocentes;?>)</h2><br>
          <table id="tbPesquisarDocente">
          <form action=consultarDocente.php method=post>
          <input type=hidden name=txtEnviar value=1>
          <tr>
          <td id=search>Pesquisar por: <input type=radio name=rdCriterio value="siape" checked>Siape <input type=radio name=rdCriterio value="nome"> Nome <input type=radio name=rdCriterio value="curso">Curso <input type=text name=txtPesquisar> <input type=submit value="OK"></td>
          </tr>
          </form>
          </table>
          <br><br>
          <table id="dadosDocente" cellspacing=0>
          <form action="consultarDocente.php" method="post">
          <tr id="cabecalho">
          <td><a href="?ordenar=siape">Siape</a></td>
          <td><a href="?ordenar=nome">Nome</a></td>
          <td><a href="?ordenar=curso">Curso</a></td>
          <td><a href="?ordenar=faltas">Faltas</a></td>
          <td><a href="?ordenar=excluir">Excluir</a></td>
          <td><!-- Espaço para checkbox --></td>
          </tr>
          <?php
          while ($resultado = mysql_fetch_array($query)) {
              $id = $resultado["id"];
              $siape = $resultado["siape"];
              $nome = $resultado["nome"];
              $curso = $resultado["curso"];
              $faltas = $resultado["faltas"];
          ?>
          </form>
          <tr id="dados" bgcolor="">
          <td><a href="frmDetalheDocente.php?id=<?php echo $id;?>" style="color: <?php echo $cor;?>"><?php echo $siape;?></style></a></td>
          <td><?php echo $nome;?></td>
          <td><?php echo $curso;?></td>
          
          <td align="center">
              <table>
                  <tr>
                      <td><a href="menosum.php?id=<?php print $id;?>"><button name="Btt" style="width:10px">-</button></a></td>
                      <td><?php echo $faltas?></td>
                      <td><a href="maisum.php?id=<?php print $id;?>"><button name="Btt" style="width:10px">+</button></a></td>
                  </tr>
              </table>
          </td>
          
          <form action="apagaSelecionadosDocente.php" method="post">
          <td><input type="checkbox" name="chkDeletar[]" value="<?php echo $id;?>"></td>
          </tr>
          <?php
          }
          ?>
          
          <tr>
          <td colspan=4 align="center"><br><input type="submit" value="Apagar selecionados" style="width: 300px;"></td>
          </tr>
          </form>
          </table>
      </div>
      <?php
      require_once ("rodape.php");
      ?>
       
       
      Provavelmente é um problema no "WHILE" ou na abertura e fechamento de formulário. Porém não consegui resolver.
      Se alguém conseguir resolver seria ótimo.
      Agradeço desde já. Em anexo envio um print da página para melhor entendimento.
       
       
       

    • By alsimmonsjr
      Olá à todos, gostaria de saber se alguém pode me ajudar a fazer root no meu celular que já coloquei o nome no tópico, se alguém pode me ajudar eu agradeço, desde já agradecido, muito obrigado e tchau.
    • By LRDSILVA3
      Pessoal Boa Tarde ,Tudo certo?
      Estou com um projeto para aprendizagem (já que só tenho conhecimentos de css e html) e upgrade da firma onde trabalho e não estou conseguindo salvar os valores do formulário no banco de dados,a conexão é feita porem salva todos os valores como null.
      <?php
      $servername = "192.168.1.109";
      $database = "cadastrokm";
      $username = "teste";
      $password = "123456";
      // Create connection
      $conn = mysqli_connect($servername, $username, $password, $database);
      // Check connection
      if (!$conn) {
            die("Connection failed: " . mysqli_connect_error());
      }
       
      echo "Connected successfully";
      $funcionarioKm = isset( $_POST['funcionarioKm']); 
          $veiculoKm = isset($_POST['veiculoKm']);
          $kmInicial = isset($_POST['kmInicial']);
          $kmFinal = isset($_POST['kmFinal']);
       
      $sql = "INSERT INTO km (funcionarioKm,veiculoKm,kmInicial,kmFinal) 
          VALUES ('$funcionarioKm','$veiculoKm','$kmInicial',
          '$kmFinal')";
      if (mysqli_query($conn, $sql)) {
            echo "New record created successfully";
      } else {
            echo "Error: " . $sql . "<br>" . mysqli_error($conn);
      }
      mysqli_close($conn);
      ?>
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

      </head>
      <body>
        
          <div class=container>
      <section>
          <!-- Página de Cadastro de KM -->
          <h1>Cadastro de Km</h1>
          <hr><br><br>
          <form method="post" action="conexao.php">
          <p class="font-weight-bold">Favor Selecione seu Nome:</p>
                <select id="funcionarioKm"  name="funcionarioKm"required autofocus>
                    <option>Motorista</option>
                    <option>Almir</option>
                           <option>Maykon</option>
                                      <option>Jorge</option>    
                                  </select>
      </br></br>
                <p class="font-weight-bold">Favor Selecione o Veiculo:</p>
                <select id="veiculoKm" value="veiculoKm " name="veiculoKm"required>
                    <option>Veiculo</option>
                    <option>L200</option>
                           <option>Strada 01</option>
                                      <option>Strada 02</option>    
                                      <option>Caminhão 01</option>    
                                  </select> 
       </br></br>
                 <label for="litros"><p class="font-weight-bold">Informe a Quilometragem Inicial:</p></label>
              <input type="number" id="kmInicial" name="kmInicial" required/>
      </br></br>
              <label for="litros"><p class="font-weight-bold">Informe a Quilometragem Final:</p></label>
              <input type="number" id="kmFinal" name="kmFinal" required />
      </br></br>
              <input type="submit" value="Salvar"    class="btn btn-primary btn-md">
              <input type="reset" value="Limpar"class="btn btn-primary btn-md" >
              <br><br>
      </form>
      </section>
      </div>
      </body>
      </html>
       

       
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.