자바 스크립트 카드 게임에서 플레이어 핸드의 아키텍처

Question

그래서 간단한 카드 게임을 시도하고 있습니다. 내가 player "클래스"draw 함수를 가지고 있으며 공개 멤버 deck과 hand, 모두 배열입니다.

갑판에서 카드를 가져와 손에 넣고 플레이어의 "손"영역에 표시해야합니다. 나는 "플립 (flip)"과 "플레이 (play)"버튼을 (클로저를 통해)하는 방법에 대해 우려하고 있습니다. 내가 뭘 필요로하는 카드를 꺼내 손에 카드 위치를 알고 card.play로, 버튼 누름 대응에 card.play() 및 card.flip()를 호출 할 수있는 방법이

littlegame.player.prototype.draw = function() { 
    if (this.canDrawCard()) { 
     var card = this.deck.draw(); // this.deck is Array 

     //Create card element on the playfield 

     var card_object = $('<div class="card"></div>').append($('<span class="attack">' + card.attack + '</span>')).append($('<span class="defence">' + card.defence + '</span>')); 

     // Add controls to card 
     if (this.playerid == 1) { 
      var flipper = $('<span class="flip">Flip</span>'); 
      flipper.click(function(){ 
       card.flip(); 
      }); 

      var actuator = $('<span class="play">Play</span>'); 
      console.log('Loading actuator closure with id ' + this.playerid + ' and name ' + this.playername); 
      var player = this; 

      var old_hand = this.hand.slice(0); // Store a copy of old hand. Stupid trick, i know. It doesn't work 

      actuator.click(function(){ 
       card.play(player.playerid); 
       delete card; 
       player.hand = old_hand; 
      }); 

      card_object = card_object.append(flipper).append(actuator); 
     } 

     this.element.append(card_object); 
     card.element = card_object; 

     // Put card in hand 
     this.hand.push(card); 
    } 
}; 

입니다 : 여기

는 코드입니다. 어떻게해야합니까?

Answer 1

littlegame.player.prototype.draw = function() { 
     if (this.canDrawCard()) { 
       var card = this.deck.draw(); // this.deck is Array 

       //Create card element on the playfield 

       var card_object = $('<div class="card"></div>').append($('<span class="attack">' + card.attack + '</span>')).append($('<span class="defence">' + card.defence + '</span>')); 

       // Add controls to card 
       if (this.playerid == 1) { 
         var flipper = $('<span class="flip">Flip</span>'); 
         flipper.click(function(){ 
           card.flip(); 
         }); 

         var actuator = $('<span class="play">Play</span>'); 
         console.log('Loading actuator closure with id ' + this.playerid + ' and name ' + this.playername); 
         var player = this; 

         var old_hand = this.hand.slice(0); // Store a copy of old hand. Stupid trick, i know. It doesn't work 

         actuator.click(function(){ 
           card.play(player.playerid); 
           delete card; 
           player.hand = old_hand; 
         }); 

         card_object = card_object.append(flipper).append(actuator); 
       } 

       this.element.append(card_object); 
       card.element = card_object; 

       // Put card in hand 
       this.hand.push(card); 
       var hand = this.hand; 
       card.remove = function() { 
        var i; 
        for(i=0;i<hand.length;i++) { 
         if(hand[i]===this) { 
          hand.splice(i,1); 
         } 
        } 
       } 
     } 
}; 

열쇠는 여기에 관심있는 변수를 포함하는 범위의 제거 기능을 정의하는 것입니다. 여기에, 내가 직후 정의 제거 함수 내에서 사용할 수 있도록하는 변수 hand를 정의 . 그런 다음 언제든지 remove 함수를 호출 할 수 있습니다. 카드가 손 안의 위치를 ​​변경하지 않는다는 것을 알고 있으면 색인을 약간의 변수 (예 : cardposition)로 만들고 그 배열을 배열에 간단하게 이어 붙일 수 있습니다.

Answer 2

나는 다음을 시도했다. 나는 플레이어와 카드 자체에 대한 링크와 함께 클로저에있는 핸드 배열에 카드의 위치를 ​​남겨 둬야했습니다. 그것은 다음과 같이 진행됩니다

littlegame.player.prototype.draw = function() { 
    if (this.hand.length < this.agility) { 
     var card = this.deck.draw(); 

     // Put card in hand 
     this.hand.push(card); 

     var card_in_hand = this.hand[this.hand.length - 1]; 
     var card_position = this.hand.length; 

     //Create card element on the playfield 
     var card_object = $('<div class="card"></div>').append($('<span class="attack">' + card.attack + '</span>')).append($('<span class="defence">' + card.defence + '</span>')); 

     // Add controls to card 
     if (this.playerid == 1) { 
      var flipper = $('<span class="flip">Flip</span>'); 
      flipper.click(function(){ 
       card_in_hand.flip(); 
      }); 

      var actuator = $('<span class="play">Play</span>'); 
      console.log('Loading actuator closure with id ' + this.playerid + ' and name ' + this.playername); 
      var player = this; 

      actuator.click(function(){ 
       card_in_hand.play(player.playerid); 
       player.hand.remove(card_position); 
      }); 

      card_object = card_object.append(flipper).append(actuator); 
     } 


     this.element.append(card_object); 
     card_in_hand.element = card_object; 
    } 
}; 

가 나는 또한 존 레식에서 Array.remove()function을 사용했다.

는