Hello, I\'ve made a code and I\'m trying to drag and drop any of the cards I dea

ID: 3565831 • Letter: H

Question

Hello, I've made a code and I'm trying to drag and drop any of the cards I deal. I'm not sure what I'm missing... Here is the code: First Code is HTML5 & Second Code is CSS... Thank You For Your Help!!!

HTML:

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="cards.css" rel="stylesheet" type="text/css" />
<title> Card Game </title>
<script type='text/javascript' src="http://ajax.microsoft.com/ajax/jQuery/jquery-2.0.2.js"></script>
<script type='text/javascript' src="./jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function ()
    {
$('#deal').click(function () {
    dealCard(randomCard());
});

var cardsInDeck = new Array();
var numberOfCardsInDeck = 52;
cardsInDeck[0] = "2_of_clubs";
cardsInDeck[1] = "8_of_hearts";
cardsInDeck[2] = "king_of_diamonds";
cardsInDeck[3] = "queen_of_spades2";
cardsInDeck[4] = "8_of_diamonds";
cardsInDeck[5] = "queen_of_hearts2";
cardsInDeck[6] = "ace_of_hearts";
cardsInDeck[7] = "8_of_clubs";
cardsInDeck[8] = "10_of_spades";
cardsInDeck[9] = "jack_of_spades2";
cardsInDeck[10] = "3_of_spades";
cardsInDeck[11] = "5_of_hearts";
cardsInDeck[12] = "king_of_clubs2";
cardsInDeck[13] = "6_of_hearts";
cardsInDeck[14] = "2_of_diamonds";
cardsInDeck[15] = "8_of_spades";
cardsInDeck[16] = "2_of_hearts";
cardsInDeck[17] = "9_of_clubs";
cardsInDeck[18] = "2_of_spades";
cardsInDeck[19] = "9_of_diamonds";
cardsInDeck[20] = "3_of_clubs";
cardsInDeck[21] = "9_of_hearts";
cardsInDeck[22] = "3_of_diamonds";
cardsInDeck[23] = "9_of_spades";
cardsInDeck[24] = "3_of_hearts";
cardsInDeck[25] = "10_of_clubs";
cardsInDeck[26] = "4_of_clubs";
cardsInDeck[27] = "10_of_diamonds";
cardsInDeck[28] = "10_of_hearts";
cardsInDeck[29] = "4_of_diamonds";
cardsInDeck[30] = "ace_of_clubs";
cardsInDeck[31] = "4_of_spades";
cardsInDeck[32] = "ace_of_diamonds";
cardsInDeck[33] = "5_of_clubs";
cardsInDeck[34] = "ace_of_spades";
cardsInDeck[35] = "5_of_diamonds";
cardsInDeck[36] = "5_of_hearts";
cardsInDeck[37] = "jack_of_clubs2";
cardsInDeck[38] = "5_of_spades";
cardsInDeck[39] = "jack_of_diamonds2";
cardsInDeck[40] = "6_of_clubs";
cardsInDeck[41] = "jack_of_hearts2";
cardsInDeck[42] = "6_of_diamonds";
cardsInDeck[43] = "jack_of_spades2";
cardsInDeck[44] = "6_of_hearts";
cardsInDeck[45] = "king_of_hearts2";
cardsInDeck[46] = "7_of_clubs";
cardsInDeck[47] = "king_of_spades2";
cardsInDeck[48] = "7_of_diamonds";
cardsInDeck[49] = "queen_of_clubs2";
cardsInDeck[50] = "7_of_spades";
cardsInDeck[51] = "queen_of_diamonds2";
cardsInDeck[52] = "queen_of_hearts2";

function dealCard(i) {
    if (numberOfCardsInDeck == 0) return false;
    var img = document.createElement("img");
    img.src = "https://lackeyinnovations.azurewebsites.net/Cards/" + cardsInDeck[i] + ".png";

document.body.appendChild(img);
removeCard(i);
}

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

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--;
}
    });

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

function dealCard() {
    var img = document.createElement("img");
    img.src = 'https://lackeyinnovations.azurewebsites.net/Cards/';
    img.id = 'ace_of_hearts';
    document.body.appendChild(img);

    $('#ace_of_hearts').draggable();
}

function handleDropEvent( event, ui ) {
var draggable = ui.draggable;
$('#drop').html( 'The "' + draggable.attr('id') + '" Was Discarded Here!' );

}
</script>
</head>
    <body>
    <center><a href="">JS Fiddle Link</a></center>
        <br/><br/>
       <input type="button" value="Deal Card" id="deal" />
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <div id='drop' class='drop'><strong><center>Discard Here:</center></strong></div>

</body>
</html>

CSS:

body {background-color: #c0c0c0; font-family: Arial, Helvetica, sans-serif}

.drop {
    float: inherit;
    width: 600px;
    height: 200px;
    background-color: #494775;
    image-orientation: initial;

}
img{

width: 80px;

height: 120px;

}

p {text-indent: 0.0em}
#imgcntr{
    text-align: center;
    padding: 16px;
    border-image-source: url(./Cards);
}

.drop {
    float: center;
    width: 400px;
    height: 200px;
    background-color: #808080;
}

Explanation / Answer

html

javascript

function dealCard(i) {
if (numberOfCardsInDeck == 0) return false;
var img = document.createElement("img");
img.src = "https://cop4813eaglin.pbworks.com/f/" + cardsInDeck[i] + ".png";

document.body.appendChild(img);
removeCard(i);
}

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

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--;
}

Navigate

Hello, I\'ve hit a conceptual wall. I cannot seem to wrap my brain around how to

Hello, I\'ve posted this question for matlab code but matlab doesn\'t accept neg

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Hello, I\'ve made a code and I\'m trying to drag and drop any of the cards I dea

Question

Explanation / Answer

Related Questions

Navigate