Html5/javascript/easeljs 게임 프로젝트. 코드가 많이 있습니다. 나가는 것이 필요합니다.

Question

create.js 라이브러리로 HTML5 캔버스와 자바 스크립트가있는 카드 게임을하고 있습니다. 내가 가진 문제는 플레이어의 손에서 클릭 한 카드를 삭제하는 onclick 함수가 있다는 것입니다 (스플 라이스가있는 배열에서 객체를 제거한 다음 캔버스에 다시 그리거나 캔버스에 삭제 된 카드가없는 플레이어의 카드 배열을 다시 그립니다). 내가 처음이 일을 할 때 그것은 잘합니다.하지만 배열의 (예를 들어 splice 메서드 뒤에) 인덱스 1에 있어야하는 카드를 다시 클릭하면 작동하지 않습니다. 이 코드에서

봐 : 여기

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

내 init 함수입니다 : 여기

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

나는이 기능은 단지 첫 번째 비트 맵 player1.playerHand [1] .imageFront 위해 일하는 것을 깨달았다 일부 연구 후

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


      { 
       stage.removeAllChildren(); 

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

       drawPlayerCards(); 


      } 

: 전자 내가 함께 문제가있는 기능입니다. 첫 번째 onclick 이벤트로 배열을 변경 한 후 해당 player1.playerHand [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(); 
     } 
    }); 
}); 

일부 다른 노트 :

• 우리가 일반적으로 귀하의 Player 생성자에 오류가
• 동일한 행에 여는 중괄호 {을 넣어 대신 new Array()
• 의 []를 사용하는 규칙이있다 : this.playerHand(n) 대신 this.playerHand[n]