http://mygeneric.info/cards/check.html#play_ac
Enter a number in the text box between 1 and 26, ideally between 6 and 8 and click on Shuffle cards. That takes you to to play area. the design is still very rudimentary at this stage because I'm focused on the programing. So far everythig works as planned execpt when it comes to stacking the cards dealt on top of each other. The two functions below computer_play (automatic) and drag_me (manually triggerd by player) handle the computer and player's turn to deal a card respectively. A function which I will not include here, switches the turn to play between the computer and the player. The play_turn variable below, is incremented by a value of 1 every time play is switched between the player and computer. i then use this value to determine the z-index of the card dealt, so that each card dealt appears above the others. Well the cards dealt by the computer always appear below those dealt by the computer regardless of their z index position. Is there any way one can fix this? I must admit I'm still quite new with the Draggable/droppable plugin. I've done my best to explain the functions below within the comments. Hopefully it's easy to follow.
Code: Select all
var play_turn = 0; //This variable will be incremented within the computer play and player play functions below so that each time a card is dealt by either side, it gets a new higher value. We will use it to determine the z-index position for the card dealt
//Define computer play function
function computer_play(){
//Determine the possible cards to play and place them in an array
//I'm ommitting the code because it is rather cumbersome and unrelated to this
//problem but it leads to the generation of the card_to_play_index variable used below to determine the card which will be dealt by the computer
//Assign the image of card to play to a variable
var card_img = $("#p1front").children().eq(card_to_play_index);
play_turn++;
//Place card to play in board 1 container, the green rectangle in the center where the cards are dropped
card_img.appendTo("#board1_container");
card_img.css("position","absolute");
card_img.animate({"z-index":play_turn},10); //This is supposed to palce the card dealt by the computer into board 1 container and stacks it above all the others
}//End of computer play function
//Define player play function
function drag_me(){ //The player play function, trigggered by dragging any of the cards in the player's box, the rectangle at the bottom
$('#player2_container > .p2cards').draggable({//Player 2 container is the rectangle containing the player's cards, all the cards in this container are assigned to class p2cards and rendered draggable
containment: '#player2_cards',
cursor: 'move',
revert: true
});
$('#board1_container').droppable({ //Board1 container where both the computer's cards and player's cards area dealt, is made droppable so that player's cards can be dropped within
accept: '#player2_container img',
drop: handle_card_drop
});
}//End drag me
$(drag_me);
function handle_card_drop(event,ui){//Defines the drop handle_card_drop function function parsed in the droppable method above
ui.draggable.draggable('disable');
ui.draggable.draggable('option', 'revert', false);
play_turn++;
ui.draggable.animate({"z-index":play_turn},10);
//Run the whose turn function recursively, this time handing the baton to the computer
play_first = "computer";
whose_turn(play_first); //It's now computer's turn
}//End handle card drop