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 Camilavip
      Oi, tenho um flip para virar a imagem, bem pequeno e funcional, mas ao colocar um rodapé, ele simplesmente invade esse rodapé
      Creio que tem haver alguma coisa com o position: absolute, mas não entendo nada de css
       
      <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> </head> <body> <!-- CSS DO FLIP --> <style> .flip-container:hover .flipper{ transform: rotateY(180deg); /* se quiser uma animação na vertical, troque por rotateX(180deg) */ } .flipper{ width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; } .front, .back{ position: absolute; width: 100%; height: 100%; } .back{ transform: rotateY(180deg); } </style> <center> <div class="flip-container"> <div class="flipper"> <div class="front"> <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/zohO24tyN2WB8etR3nhZPvhf.png" /> </div> <div class="back"> <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/XkAkTVqVPbLB3cK5njqdun66.png" /> </div> </div> </div> <!-- AQUI COMEÇA O RODAPÉ --> <!-- CSS DO RODAPÉ --> <style> @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); *{ margin: 0; padding: 0; color: #d9d9d9; box-sizing: border-box; font-family: 'Poppins', sans-serif; } .content1{ position: relative; margin: 130px auto; text-align: center; padding: 0 20px; } .content1 .text{ font-size: 2.5rem; font-weight: 600; color: #202020; } .content1 .p{ font-size: 2.1875rem; font-weight: 600; color: #202020; } footer{ position: fixed; bottom: 0px; width: 100%; background: #111; } .main-content{ display: flex; } .main-content .box{ flex-basis: 50%; padding: 10px 20px; } .box h2{ font-size: 1.125rem; font-weight: 600; text-transform: uppercase; } .box .content{ margin: 20px 0 0 0; position: relative; } .box .content:before{ position: absolute; content: ''; top: -10px; height: 2px; width: 100%; background: #1a1a1a; } .box .content:after{ position: absolute; content: ''; height: 2px; width: 15%; background: #f12020; top: -10px; } .left .content p{ text-align: justify; } .left .content .social{ margin: 20px 0 0 0; } .left .content .social a{ padding: 0 2px; } .left .content .social a span{ height: 40px; width: 40px; background: #1a1a1a; line-height: 40px; text-align: center; font-size: 18px; border-radius: 5px; transition: 0.3s; } .left .content .social a span:hover{ background: #f12020; } .center .content .fas{ font-size: 1.4375rem; background: #1a1a1a; height: 45px; width: 45px; line-height: 45px; text-align: center; border-radius: 50%; transition: 0.3s; cursor: pointer; } .center .content .fas:hover{ background: #f12020; } .center .content .text{ font-size: 1.0625rem; font-weight: 500; padding-left: 10px; } .center .content .phone{ margin: 15px 0; } .right form .text{ font-size: 1.0625rem; margin-bottom: 2px; color: #656565; } .right form .msg{ margin-top: 10px; } .right form input, .right form .msgForm{ width: 100%; font-size: 1.0625rem; background: #151515; padding-left: 10px; border: 1px solid #222222; } .right form input:focus, .right form .msgForm:focus{ outline-color: #3498db; } .right form input{ height: 35px; } .right form .btn{ margin-top: 10px; } .right form .btn button{ height: 40px; width: 100%; border: none; outline: none; background: #f12020; font-size: 1.0625rem; font-weight: 500; cursor: pointer; transition: .3s; } .right form .btn button:hover{ background: #000; } .bottom center{ padding: 5px; font-size: 0.9375rem; background: #151515; } .bottom center span{ color: #656565; } .bottom center a{ color: #f12020; text-decoration: none; } .bottom center a:hover{ text-decoration: underline; } @media screen and (max-width: 900px) { footer{ position: relative; bottom: 0px; } .main-content{ flex-wrap: wrap; flex-direction: column; } .main-content .box{ margin: 5px 0; } } </style> <div class="content1"> <div class="text"> Fully Responsive Footer Section</div> <div class="p"> HTML and CSS (Flexbox)</div> </div> <footer> <div class="main-content"> <div class="left box"> <h2> About us</h2> <div class="content"> <p> CodinNepal is a YouTube channel where you can learn web designing, web development, ui/ux designing, html css tutorial, hover animation and effects, javascript and jquery tutorial and related so on.</p> <div class="social"> <a href="https://facebook.com/coding.np"><span class="fab fa-facebook-f"></span></a> <a href="#"><span class="fab fa-twitter"></span></a> <a href="https://instagram.com/coding.np"><span class="fab fa-instagram"></span></a> <a href="https://youtube.com/c/codingnepal"><span class="fab fa-youtube"></span></a> </div> </div> </div> <div class="center box"> <h2> Address</h2> <div class="content"> <div class="place"> <span class="fas fa-map-marker-alt"></span> <span class="text">Birendranagar, Surkhet</span> </div> <div class="phone"> <span class="fas fa-phone-alt"></span> <span class="text">+089-765432100</span> </div> <div class="email"> <span class="fas fa-envelope"></span> <span class="text">abc@example.com</span> </div> </div> </div> <div class="right box"> <h2> Contact us</h2> <div class="content"> <form action="#"> <div class="email"> <div class="text"> Email *</div> <input type="email" required> </div> <div class="msg"> <div class="text"> Message *</div> <!-- NOTE: Due to more textarea tag I got an error. So I changed the textarea name to changeit. Please change that changeit name to textarea --> <changeit id=".msgForm" rows="2" cols="25" required></changeit> <!-- replace this changeit name to textarea --> <br /> <div class="btn"> <button type="submit">Send</button> </div> <div class="bottom"> <center> <span class="credit">Created By <a href="https://youtube.com/c/codingnepal">CodingNepal</a> | </span> <span class="far fa-copyright"></span> 2020 All rights reserved. </center> </div> </body> </html>  
    • By Kemily
      Eu preciso de ajuda para poder publicar meu site.
      O professor mandou faze-lo em HTML e CSS e eu fiz mas eu não sei postar e manter as imagens.
      Quando consegui postar as imagens não foram junto.
      O link q consegui fazer sem as imagens ficou assim:
       
      http://hyundai.droppages.com/
    • By Kemily
      <? php /* 1 - Faça uma função que recebe 3 numeros e faça a média aritmética desses números e retorne o resultado. */ if (isset ($_POST['enviar'])); $valor1 = $_POST['valor1']; $valor2 = $_POST['valor2']; $valor3 = $_POST['valor3']; $media = ($valor1 + $valor2 + $valor3) / 3; endif; ?> <!DOCTYPE html> <html> <head> <meta charset = "Utf-8"> <title> Cálculo da média aritimética</title> </head> <body> <form method="post" action=""> <br> <label>Primeiro valor: </label> <input name="valor1" type="text"> <br> <label>Segundo valor: </label> <input name="valor2" type="text"> <br> <label> Terceiro valor: </label> <input name="valor3" type="text"> <br> <br> <button type="submit" name="enviar"> Calcular Média </button> <button type="reset"> Limpar </button> <br> <br> Valor da Média <? php echo "A média equivale a:<br>" . $media . " - "; ?> </form> </body> </html> Alguém pode me ajudar?
      Eu estou fazendo este programa para calcular a média aritmética de três número que serão digitados pelo usuário.
      Porém não estou conseguindo fazer o resultado ser apresentado na tela.
      Nem o ultimo "echo" aparece só o " " . $media . " - "; " literalmente é isso que aparece onde deveria mostrar o resultado.
      Sou iniciante na área de php e se puderem ajudar agradeço. 
    • By violin101
      Caros amigos, saudações...
       
      Estou com um problema para mostrar o RESULTADO da multiplicação de 3 campos (inputs).
       
      Os Campos são: Comprimento x Largura x Altura.
       
      Quando todos os campos(INPUTS) são informados, a Função de Multiplicar é executada com sucesso.
      Exemplo:
      Comprimento : 1.01
      Largura...........: 2.02
      Altura..............: 3.03
      Resultado......: 6.18
       
      Quando um dos Inputs, tem valor = 0 (zero), o cálculo não é executado.
      Exemplo:
      Comprimento : 1.01
      Largura...........: 0.00
      Altura..............: 3.03
      Resultado......: 0.00
       
      Como consigo executar essa operação matemática ?
       
      Abaixo posto o Código que estou usando:
      /*---Função para Calcular o Total do Volume---*/ function calcVolume(){ //Obter valor digitado do comprimento var comprimento = document.getElementById("comprimento").value; comprimento = comprimento.replace(",","."); //Obter valor digitado da largura var largura = document.getElementById("largura").value; largura = largura.replace(",","."); //Obter valor digitado da altura var altura = document.getElementById("altura").value; altura = altura.replace(",","."); //Executa o Valor do Volume if (comprimento > 0 && largura > 0 && altura > 0) { calc_volume = parseFloat(comprimento) * parseFloat(largura) * parseFloat(altura); var numero = calc_volume.toFixed(2).split('.'); numero[0] = numero[0].split(/(?=(?:...)*$)/).join(''); document.getElementById("volume").value = numero.join('.'); } else { document.getElementById("volume").value = "0,00"; } }  
       
      Grato,
       
      Cesar
    • By Marcos RJ
      Olá pessoal, tudo bem?
       
      Tenho um sistema do qual traz em um combobox a relação de grades (masculino, feminino, etc) do banco de dados e a mesma tabela tem chave estrangeira na tabela dos tamanhos. Quando seleciono uma grade, os tamanhos referentes a essa grade aparecem. O problema está quando clico em Incluir nova cor e seleciono uma outra grade. Os tamanhos da nova grade selecionada aparece também na grade já selecionada anteriormente, ou seja, o valor acaba se duplicando. O que está acontecendo é que valor chega até o JQuery, porém quando passo o valor por:
       url: '<?php echo $caminhoAbsoluto; ?>/listar.php?v='+valorEscolhido,  E pego pelo código abaixo:
       
      $grades = $_REQUEST["v"]; echo $metodos->listarTamanhos($grades);   Ele pega o último valor selecionado, porém duplica conforme o anexo. Vejam:
       
      public function listarTamanhos($grades) {     $visualizar = '<table class="table table-bordered">                         <tr>                         <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Tamanho</td>                         <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Quantidade</td>                         <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">EAN</td>                         </tr>';     $sql = mysqli_query($this->conexao,"SELECT * FROM loja_tamanho_grades WHERE IdGrades = '".$grades."';");     //while($isfast = mysqli_fetch_object($sql))     // $i = 0;     while($isfast = mysqli_fetch_assoc($sql))     {         $sqlTamanhos = mysqli_query($this->conexao,"SELECT * FROM loja_tamanhos WHERE IdTamanhos = '".$isfast["IdTamanhos"]."';");         $isfastTamanhos = mysqli_fetch_assoc($sqlTamanhos);         $visualizar .= '<tr>                                 <td style="font-weight: bold; text-align: center; font-size: 20px; font-style:Arial">'.$isfastTamanhos["Tamanhos"].'</td>                                 <td><input type="number" class="form-control" min="0" oninput="this.value = Math.abs(this.value)" value="0"></td>                                 <td><input type="text" class="form-control" maxlength="17" style="width: 100%"></td>                             </tr>';                 $visualizar .= '<tr>';         // $visualizar .= '<td colspan="3"><div class="mostrarGrades_'.$i.'"></div></td>';         $visualizar .= '</tr>';                                                         // $i++;                      }         //  $visualizar .= '<tr><td colspan="3"><div class="mostrarGrades"></div></td></tr>';             //$visualizar .= '</table>';         //return $visualizar;     $visualiza[] = $visualizar;     return json_encode($visualiza); } Como faço para que não tenha duplicidade. Veja abaixo o restante do código:
      <table width="100%" > <tr class="linhas"> <td> <table class="table table-bordered"> <tr>         <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Código de cores</td>         <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Cor Básica</td>         <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Grades</td>     </tr> <tr>     <td style="text-align: center; width: 40%"><input type="text" class="form-control" placeholder="Referência"></td>     <td style="text-align: center; width: 30%">     <select name="CoresBasicas" class="form-control">     <?php echo $metodos->comboCores($key); ?>     </select>             </td>     <td style="text-align: left;">         <select name="Grades" class="form-control grades" style="width: 100%">         <?php echo $metodos->comboGrades(); ?>         </select>         </td>     </tr>     <tr>     <td colspan="3">         <?php //echo $metodos->listarTamanhos(); ?>     <div class="mostrarGrades"></div>     </td> </tr> <tr> <td colspan="3" class="text-left"> <label for='files' class="upload">Selecionar fotos <i class="fa fa-plus-circle fa-lg" aria-hidden="true"></i></label> <input id='files' type='file' name="Fotos[]" multiple> </td> </table> Jquery
      $(function () {   function removeCampo() {     $(".removerCampo").unbind("click");     $(".removerCampo").bind("click", function () {        if($("tr.linhas").length > 1){         $(this).parent().parent().remove();        }     });   }   $(".adicionarCampo").click(function () {     novoCampo = $("tr.linhas:first").clone();     //novoCampo.find("input").val("");     novoCampo.find('input[type="text"]').val("");     novoCampo.find('select').val("");     //novoCampo.find('input[type="radio"]').prop('selected', false);     novoCampo.insertAfter("tr.linhas:last");     removeCampo();   }); }); $(document).ready( function (){ $(document).on('change', '.grades', function(){ valorEscolhido = $(this).find('option:selected').val(); $.ajax({ type:'post', dataType: 'json', url: '<?php echo $caminhoAbsoluto; ?>/listar.php?v='+valorEscolhido, success: function(dados){ /* for(var i=0;dados.length>i;i++){ $('.mostrarGrades').html(dados[i]); } */ $('.mostrarGrades').html(dados); } }); }); }); Obrigado!
       

×

Important Information

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