0

I'm new at JavaScript to be patient with me. I'm trying to get this little "game" to work where you drag cards in the drop box, and when you drop the joker card in it says "victory", otherwise it says "betrayal" for the other cards. Everything works great except the part where it says "victory" when you drop the joker. I feel like I have tried everything. The joker card is $(#black_joker)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>Drag and Drop</title>
    <link rel="stylesheet" href="dragdrop.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


</head>

<body>


    <h1>Find the Joker and eliminate him!</h1>


<br>
<input type="button" value="Deal!" id="dealDeck">
<br>
<br>
<br>
<br>
<br>
<div id='dropZone' class='dropZone'> <center>Find the joker card and drop it here to get rid of him once and for all! </center></div>


    <script src="dragdrop.js"></script>


    </body>
</html>

// JAVASCRIPT 

$(document).ready(function () {

    $(init);

    function init() {
      $('.dropZone').droppable({
        drop: handleDropEvent
      });
    }




    for (var a=0, all = 53; a < all; a++){
    $('#dealDeck').click(function () {
      dealCard(randomCard());
    });    
    }

    var cardsInDeck = new Array();

    var numberOfCardsInDeck = 53;
    cardsInDeck[0] = "C1";
    cardsInDeck[1] = "C2";
    cardsInDeck[2] = "C3";
    cardsInDeck[3] = "C4";
    cardsInDeck[4] = "C5";
    cardsInDeck[5] = "C6";
    cardsInDeck[6] = "C7";
    cardsInDeck[7] = "C8";
    cardsInDeck[8] = "C9";
    cardsInDeck[9] = "C10";
    cardsInDeck[10] = "C11";
    cardsInDeck[11] = "C12";
    cardsInDeck[12] = "C13";
    cardsInDeck[13] = "D1";
    cardsInDeck[14] = "D2";
    cardsInDeck[15] = "D3";
    cardsInDeck[16] = "D4";
    cardsInDeck[17] = "D5";
    cardsInDeck[18] = "D6";
    cardsInDeck[19] = "D7";
    cardsInDeck[20] = "D8";
    cardsInDeck[21] = "D9";
    cardsInDeck[22] = "D10";
    cardsInDeck[23] = "D11";
    cardsInDeck[24] = "D12";
    cardsInDeck[25] = "D13";
    cardsInDeck[26] = "H1";
    cardsInDeck[27] = "H2";
    cardsInDeck[28] = "H3";
    cardsInDeck[29] = "H4";
    cardsInDeck[30] = "H5";
    cardsInDeck[31] = "H6";
    cardsInDeck[32] = "H7";
    cardsInDeck[33] = "H8";
    cardsInDeck[34] = "H9";
    cardsInDeck[35] = "H10";
    cardsInDeck[36] = "H11";
    cardsInDeck[37] = "H12";
    cardsInDeck[38] = "H13";
    cardsInDeck[39] = "S1";
    cardsInDeck[40] = "S2";
    cardsInDeck[41] = "S3";
    cardsInDeck[42] = "S4";
    cardsInDeck[43] = "S5";
    cardsInDeck[44] = "S6";
    cardsInDeck[45] = "S7";
    cardsInDeck[46] = "S8";
    cardsInDeck[47] = "S9";
    cardsInDeck[48] = "S10";
    cardsInDeck[49] = "S11";
    cardsInDeck[50] = "S12";
    cardsInDeck[51] = "S13";
    cardsInDeck[52] = "black_joker";

    function dealCard(i) {
      if (numberOfCardsInDeck == 0) return false;
      var img = document.createElement("img");
      img.src = "http://deetito.com/images/" + cardsInDeck[i] + ".png";
      img.id = cardsInDeck[i];
      img.width = 100;
      img.height = 125;
      document.body.appendChild(img);
      $('#C1').draggable();
      $('#C2').draggable();
      $('#C3').draggable();
      $('#C4').draggable();
      $('#C5').draggable();
      $('#C6').draggable();
      $('#C7').draggable();
      $('#C8').draggable();
      $('#C9').draggable();
      $('#C10').draggable();
      $('#C11').draggable();
      $('#C12').draggable();
      $('#C13').draggable();
      $('#D1').draggable();
      $('#D2').draggable();
      $('#D3').draggable();
      $('#D4').draggable();
      $('#D5').draggable();
      $('#D6').draggable();
      $('#D7').draggable();
      $('#D8').draggable();
      $('#D9').draggable();
      $('#D10').draggable();
      $('#D11').draggable();
      $('#D12').draggable();
      $('#D13').draggable();
      $('#H1').draggable();
      $('#H2').draggable();
      $('#H3').draggable();
      $('#H4').draggable();
      $('#H5').draggable();
      $('#H6').draggable();
      $('#H7').draggable();
      $('#H8').draggable();
      $('#H9').draggable();
      $('#H10').draggable();
      $('#H11').draggable();
      $('#H12').draggable();
      $('#H13').draggable();
      $('#S1').draggable();
      $('#S2').draggable();
      $('#S3').draggable();
      $('#S4').draggable();
      $('#S5').draggable();
      $('#S6').draggable();
      $('#S7').draggable();
      $('#S8').draggable();
      $('#S9').draggable();
      $('#S10').draggable();
      $('#S11').draggable();
      $('#S12').draggable();
      $('#S13').draggable();
      $('#black_joker').draggable();
      removeCard(i);
    }

    function randomCard() {
      return Math.floor(Math.random() * numberOfCardsInDeck);
    }

    function handleDropEvent(event, ui) {
      var card = ui.draggable;
      if (card == 'black_joker') {
      $('#dropZone').html('victory!');}
      else {
        $('#dropZone').html('betrayal!');} 
      /*$('#dropZone').droppable({
            drop: function(event, ui) {
                ui.draggable.remove();
            }
        });*/

      $("#dropZone").on('mouseover', function() {
        //alert('bye draggable!');
        //ui.draggable.draggable('disable');
        //$(this).droppable('disable');
        ui.draggable.remove();
      })

  }





    function removeCard(c) {
      // simply make every higher numbered card move down 1
      for (j = c; j <= numberOfCardsInDeck - 2; j++) {
        cardsInDeck[j] = cardsInDeck[j + 1];
      }
      numberOfCardsInDeck--;
    }

    });
Amanda V
  • 1

1 Answers1

0

I believe you are comparing object with string. ui.draggable should be jQuery object

let card = ui.draggable.attr("id");

compare it with your id or other attribute you wanted to use should work

tlrmacl
  • 51
  • 1