namkjor

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

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.