4 Replies - 575 Views - Last Post: 19 February 2014 - 04:21 PM

#1 flaki  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 19-February 14

Html5/javascript/easeljs game project.Need help.

Posted 19 February 2014 - 02:41 PM

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?

Is This A Good Question/Topic? 0
  • +

Replies To: Html5/javascript/easeljs game project.Need help.

#2 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 486
  • View blog
  • Posts: 1,816
  • Joined: 15-January 14

Re: Html5/javascript/easeljs game project.Need help.

Posted 19 February 2014 - 03:39 PM

When you move the card from the hand to the table you need to remove the existing click handler, and add the new one for the table behavior.
Was This Post Helpful? 1
  • +
  • -

#3 flaki  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 19-February 14

Re: Html5/javascript/easeljs game project.Need help.

Posted 19 February 2014 - 04:12 PM

View PostArtificialSoldier, on 19 February 2014 - 03:39 PM, said:

When you move the card from the hand to the table you need to remove the existing click handler, and add the new one for the table behavior.


You suggest to add the click handler in the drawTableDeck/drawPlayerCards method?
Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 486
  • View blog
  • Posts: 1,816
  • Joined: 15-January 14

Re: Html5/javascript/easeljs game project.Need help.

Posted 19 February 2014 - 04:17 PM

If that will serve the purpose then that's fine. You're already adding a click handler to the front image of the card. Inside that click handler, when you move the card to the table, you should remove the existing handler and add the handler for the table. If changing the drawTableDeck or drawPlayerCards methods to remove all click handlers and add them back will accomplish that then go for it.
Was This Post Helpful? 1
  • +
  • -

#5 flaki  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 19-February 14

Re: Html5/javascript/easeljs game project.Need help.

Posted 19 February 2014 - 04:21 PM

View PostArtificialSoldier, on 19 February 2014 - 04:17 PM, said:

If that will serve the purpose then that's fine. You're already adding a click handler to the front image of the card. Inside that click handler, when you move the card to the table, you should remove the existing handler and add the handler for the table. If changing the drawTableDeck or drawPlayerCards methods to remove all click handlers and add them back will accomplish that then go for it.

Yes,that worked for me.Thank you for the help! :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1