Html5/javascript/easeljs游戏项目。很多代码。我需要一个出路

我正在使用HTML5画布和带有create.js库的javascript开发一款纸牌游戏。我的问题是，我有一个onclick函数，可以从玩家的手上删除单击的卡（从带有拼接的数组中删除对象，然后重新绘制画布/在画布上重新绘制没有删除的新玩家卡数组）。当我第一次这样做的时候，它做得很好。但是如果我再次点击卡片，比如在数组的索引1处（在拼接方法之后），它就不起作用了

请看以下代码：

这是我的班级卡代码：

function Card(suit,rank,imageFrontUrl,imageBackUrl)

{


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

}
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;

}
}

以下是我的初始化函数：

function init(){
            var canvas = document.getElementById("tutorialCanvas");
            var stage = new createjs.Stage(canvas);
         var deck = new Deck();
            var player1 = new Player();
            deck.makeDeck();
            deck.shuffleDeck();
            player1.playerHand = deck.dealCardsPlayer();

  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);


            }


            }

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

经过一些研究，我意识到该函数仅适用于第一个位图播放器1.playerHand[1].imageFront。如果我使用第一个onclick事件更改数组，并且在该事件之后更改player1.playerHand[1]。imageFront是其他图像/位图，则对它不起作用。请帮忙

为什么要“硬编码”手中的卡片索引

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

        if (index != -1) {
            stage.removeAllChildren();
            player1.playerHand.splice(index, 1);
            drawPlayerCards();
        }
    });
});

其他一些注意事项：

• 使用

  []

  而不是

  新数组（）

• 我们通常将开始括号

  {

  放在同一行上
• 您的

  Player

  构造函数有一个错误：

  this.playerHand[n]

  而不是

  this.playerHand（n）

---

谢谢你，巴特，你的回答解决了我的问题。谢谢你的帮助。

player1.playerHand[1].imageFront.addEventListener('click',function(event)


            {   
                stage.removeAllChildren();

                player1.playerHand.splice(1,1);
drawTableDeck();

                drawPlayerCards();


            }

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

        if (index != -1) {
            stage.removeAllChildren();
            player1.playerHand.splice(index, 1);
            drawPlayerCards();
        }
    });
});