Html5/javascript/easeljs game project.Problems with selecting bitmaps and removing them.Need help

[namkjor]

I am working on a card game with HTML5 canvas and javascript with create.js library.I have an onclick function that deletes the clicked card from player's hand(removes the object from the array with splice and then redraws the canvas/redraws on canvas the new array of player's cards without the deleted one) and puts it on the table(push the selected card in the table array and redraws the new table array on the canvas). Also i have an onclick function that deletes the selected card from the table,but the problem is that this function only works for the cards that were drawn on the table on the beginning and not for the cards i selected from player's hand and put them on the table.

 

Here is my code for class Card:

function Card(suit,rank,imageFrontUrl,imageBackUrl)

{


this.imageFront = new createjs.Bitmap(imageFrontUrl);
this.imageBack = new createjs.Bitmap(imageBackUrl);
this.suit = suit;
this.rank = rank;

}

 

 

Here is my code for class Deck:
function Deck(){

this.cards = new Array();

this.makeDeck = function()
{
this.cards[0]= new Card("clubs",1,"images/114.png","images/155.png");
this.cards[1]= new Card("clubs",2,"images/115.png","images/155.png");
this.cards[2]= new Card("clubs",3,"images/116.png","images/155.png");
this.cards[3]= new Card("clubs",4,"images/117.png","images/155.png");
this.cards[4]= new Card("clubs",5,"images/118.png","images/155.png");
this.cards[5]= new Card("clubs",6,"images/119.png","images/155.png");
...

}


this.shuffleDeck = function()

{
var j,k;

for (j = 0; j < this.cards.length; j++) {
k = Math.floor(Math.random() * this.cards.length);
temp = this.cards[j];
this.cards[j] = this.cards[k];
this.cards[k] = temp;
}

}

this.dealCardsPlayer = function()
{
var playerDeck = new Array();

for(var i = 0; i<6;i++)
{
var x = this.cards.pop();
playerDeck.push(x);

}

return playerDeck;

}
}

 

 

Here is my code for class Player:

function Player()
{

this.playerTurn = false;
this.id = this;
this.name = this;
this.score = this;
this.playerHand = new Array();
this.playerTakenCards = new Array();
this.playerPickCard = function(n)
{
}

 

 

Here is my init function:

function init(){
var canvas = document.getElementById("tutorialCanvas");
var stage = new createjs.Stage(canvas);
var deck = new Deck();
var table = new TableDeck();

var player1 = new Player();
deck.makeDeck();
deck.shuffleDeck();
player1.playerHand = deck.dealCardsPlayer();
table.cards = deck.dealCardsTable();

function drawPlayerCards(){
var rotation=280;
for(var i =0;i<player1.playerHand.length;i++)
{

player1.playerHand[i].imageFront.x=330;
player1.playerHand[i].imageFront.y=750;
player1.playerHand[i].imageFront.regX = 0;
player1.playerHand[i].imageFront.regY = 96;
player1.playerHand[i].imageFront.rotation = rotation;
rotation = player1.playerHand[i].imageFront.rotation+20;
stage.addChild(player1.playerHand[i].imageFront);


}


}

function drawTableDeck(){

var pozicijaX = 150;
var pozicijaY = 360;



for(var j=0;j<table.cards.length;j++){
table.cards[j].imageFront.x = pozicijaX;
table.cards[j].imageFront.y = pozicijaY;

stage.addChild(table.cards[j].imageFront);
stage.update();
pozicijaX=table.cards[j].imageFront.x+100;}


}





createjs.Ticker.addEventListener("tick", stage);}

 

 

 

this onclick event takes the selected card from player's hand and puts it on the table

player1.playerHand.forEach(function(card) {
card.imageFront.addEventListener("click", function() {
var index = player1.playerHand.indexOf(card);

if (index != -1) {
table.cards.push(player1.playerHand[index]);


createjs.Tween.get(player1.playerHand[index].imageFront).to({x: 150, y: 400, rotation: 0, regX: 0, regY: 0}, 500);
player1.playerHand.splice(index, 1);
stage.removeAllChildren();

drawPlayerCards();
drawTableDeck();
}
});
});

and this click event removes the selected card from the table

table.cards.forEach(function (card) {
card.imageFront.addEventListener("click", function () {
var index = table.cards.indexOf(card);
table.cards.splice(index, 1);

stage.removeAllChildren();
drawPlayerCards();
drawTableDeck();
})});

The problem is that the second click event works only for the cards that were on the table at the beginning and not for the cards I have selected from player's hand and put them on the table. Any suggestions?

[xdiepx]

Hi mate, what error message do you get from the console?

[Nokdu]

are you adding the listener events when you are putting the cards on the table?

cant really figure it from source but seems like you are just putting the card in the table card array but not registering the new onclick listener?

try manually adding the listener after pushing the card to the deck again.