• Content Count

  • Joined

  • Last visited

About namkjor

  • Rank

Contact Methods

  • Twitter
  1. 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(){ = new Array(); this.makeDeck = function() {[0]= new Card("clubs",1,"images/114.png","images/155.png");[1]= new Card("clubs",2,"images/115.png","images/155.png");[2]= new Card("clubs",3,"images/116.png","images/155.png");[3]= new Card("clubs",4,"images/117.png","images/155.png");[4]= new Card("clubs",5,"images/118.png","images/155.png");[5]= new Card("clubs",6,"images/119.png","images/155.png"); ... } this.shuffleDeck = function() { var j,k; for (j = 0; j <; j++) { k = Math.floor(Math.random() *; temp =[j];[j] =[k];[k] = temp; } } this.dealCardsPlayer = function() { var playerDeck = new Array(); for(var i = 0; i<6;i++) { var x =; playerDeck.push(x); } return playerDeck; } } Here is my code for class Player: function Player() { this.playerTurn = false; = this; = 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(); = 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<;j++){[j].imageFront.x = pozicijaX;[j].imageFront.y = pozicijaY; stage.addChild([j].imageFront); stage.update();[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) {[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 (card) { card.imageFront.addEventListener("click", function () { var 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?
  2. I want to develop an online card game in HTML5 possibly integrated in Facebook. It would be an online multiplayer game, and it will contain selecting,dragging and dropping the cards and little animations.I am new in html5 game development and i want to know what HTML5 technology should i use for best performance and what will be the easiest to implement , Canvas, SVG, WebGL or DOM?