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 Alberto Nascimento
      Como faço que consiga colocar parágrafos no campo tipo "text" do formulário?
          <input name="Text1" style="width: 528px; height: 223px" type="text" /></form>
      Se eu pressiono ENTER automaticamente envia o formulário
      Como então consigo digitar ao preencher o formulário da forma abaixo?
       
    • By quimera
      O problema seria simples se o script da página permitisse o autopreenchimento usando javascript, masssssssssssss...
      O site em questão não permite que o campo seja preenchido dinamicamente ou seja usando script (ele identifica a digitação do teclado para impedir isso)
      Eles devem usar algo como: onkeypress ou onkeyup e acumular os valores digitados numa variável para dispor isso no post/get
      Por que nesse caso, se foi simplesmente colado ou preenchido via script não vai aceitar já que provavelmente é acumulativo e não verificado se o campo foi preenchido.
      Então como preencher dinamicamente o campo usando javascript nesse caso?
    • By AndersonWS
      Boa tarde, já tentei muitas formas mas não consigo retirar o atributo required.
      O resultado que eu preciso é, quando retiro o required de um (name="posicao") o outro fica com required e vice-versa e também um aparece e outro some.
       
      Segue o código HTML.
      <select name="posicao" class="form-control option_escolhida" style="display:none" id="2" required="" disabled> <option value="" selected>Selecione</option> <option value="1">Espaco</option> <option value="2">Cursos</option> </select> <select name="posicao" class="form-control option_escolhida" style="display:none" id="4" required="" disabled> <option value="" selected>Selecione</option> <option value="4">Políticas de privacidade</option> </select> <div class="sem_option"><code>Sem posição definida</code></div> <div class="ini_option"><code>Posição inicial</code></div> <div class="main_option" style="display:none"> <input name="apelido" class="form-control apelido" placeholder="Nome do grupo" type="text" required="" disabled> </div> Segue o código javascrpt:
      $('.select_escolhida').on({change: listChildren}).trigger('change'); function listChildren() { if ( $(this).val() != '' ) { children = $('option').val(); $(".ini_option").show(); $(".option_escolhida").hide(); $(".option_escolhida").attr("disabled", true); $("#" + $(this).val() ).show(); $("#" + $(this).val() ).removeAttr("disabled"); $(".sem_option").hide(); if( ($(this).val() == '1')||($(this).val() == '3') ){ $(".main_option").show(); $(".apelido").removeAttr("disabled"); } else { $(".main_option").hide(); $(".apelido").attr("disabled", true); $(".ini_option").hide(); } } else { $(".sem_option").show(); $(".ini_option").hide(); $(".apelido").hide(); } }  
    • By biakelly
      Oi,
       
       não estou conseguindo fazer isso, podem me ajudar?
       
      <?php $botaoaluno = mysql_query("SELECT aluno FROM escola WHERE colegio_id='$colid'",$db); $alunoativo = mysql_num_rows($botaoaluno); if ($alunoativo = 1) { ?> <?php $pegaralunos = mysql_query("SELECT alunosdisponiveis FROM tabelasalunos WHERE userID='{$_SESSION['userid']}' and alunosID='{$objauALN["alunID"]}'", $db); $classe = mysql_num_rows($pegaralunos); if ($classe > 0) { ?> <button name="geraralunos">Aluno presente</button> <?php } else { ?> <button name="geraralunos">Aluno faltante</button> <? } } else{ ?> <p>Não tem aluno</p> <?php } ?> o que eu preciso, se o alunoativo for igual a 1, fazer o próximo IF, mas se ele for igual a 0 mostrar a mensagem (não tem aluno)
×

Important Information

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