Question

我正在开发一个带有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;

}
}

这是我的类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)
    {
    var card = this.playerHand(n);
        return card;


    }
    this.tempArray = this;}

这是我的初始化函数：

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

以下是我遇到问题的功能：

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


            {   
                stage.removeAllChildren();

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

                drawPlayerCards();


            }

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

Answer 1

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

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

其他一些说明：

使用[]代替new Array()
我们通常将左大括号{放在同一行
您的Player构造函数出错：this.playerHand[n]而不是this.playerHand(n)

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

1 个答案: