2016-10-04 130 views
6

我正在重塑memory game以熟悉controllerAs View Syntax。我已將問題縮小到檢查功能;但我可能是錯的。檢查功能通過卡作爲參數,但是當我使用console.log(卡)卡沒有價值,當卡應具有數組平假名或可選字母的值。角狀記憶遊戲

(function() { 

// constant variables 
var constants = new (function() { 
    var rows = 3; 
    var columns = 6; 
    var numMatches = (rows * columns)/2; 
    this.getRows = function() { return rows; }; 
    this.getColumns = function() { return columns; }; 
    this.getNumMatches = function() { return numMatches; }; 
})(); 

// Global Variables 
var currentSessionOpen = false; 
var previousCard = null; 
var numPairs = 0; 

// this function creates deck of cards that returns an object of cards 
// to the caller 
function createDeck() { 
    var rows = constants.getRows(); 
    var cols = constants.getColumns(); 
    var key = createRandom(); 
    var deck = {}; 
    deck.rows = []; 

    // create each row 
    for(var i = 0; i < rows; i++) { 
     var row = {}; 
     row.cards = []; 

     // create each card in the row 
     for (var j = 0; j < cols; j++) { 
      var card = {}; 
      card.isFaceUp = false; 
      card.item = key.pop(); 
      row.cards.push(card); 
     } 
     deck.rows.push(row); 
    } 
    return deck; 
} 

// used to remove something form an array by index 
function removeByIndex(arr, index) { 
    arr.splice(index, 1); 
} 

function insertByIndex(arr, index, item) { 
    arr.splice(index, 0, item); 
} 

// creates a random array of items that contain matches 
// for example: [1, 5, 6, 5, 1, 6] 
function createRandom() { 
    var matches = constants.getNumMatches(); 
    var pool = []; 
    var answers = []; 
    var letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I' 
        , 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R' 
        , 'S', 'T', 'U', 'W', 'X', 'Y', 'Z']; 

    var hiragana = ['あ', 'い', 'う', 'え', 'お', 'か', 'が', 'き' 
        , 'ぎ', 'く', 'ぐ', 'け', 'げ', 'こ', 'ご', 'さ' 
        , 'ざ', 'し', 'じ', 'す', 'ず', 'せ', 'ぜ', 'そ' 
        , 'ぞ', 'た', 'だ', 'ち', 'ぢ', 'つ', 'づ', 'て' 
        , 'で', 'と', 'ど', 'な', 'に', 'ぬ', 'ね', 'の' 
        , 'は', 'ば', 'ぱ', 'ひ', 'び', 'ぴ', 'ふ', 'ぶ' 
        , 'ぷ', 'へ', 'べ', 'ぺ', 'ほ', 'ぼ', 'ぽ', 'ま' 
        , 'み', 'む', 'め', 'も', 'や', 'ゆ', 'よ', 'ら' 
        , 'り', 'る', 'れ', 'ろ', 'わ', 'を', 'ん']; 
    // set what kind of item to display 
    var items = hiragana; 

    // create the arrays for random numbers and item holder 
    for (var i = 0; i < matches * 2; i++) { 
     pool.push(i); // random numbers 
    } 

    // generate an array with the random items 
    for (var n = 0; n < matches; n++) { 
     // grab random letter from array and remove that letter from the 
     // original array 
     var randLetter = Math.floor((Math.random() * items.length)); 
     var letter = items[randLetter]; 
     removeByIndex(items, randLetter); 
     // generate two random placements for each item 
     var randPool = Math.floor((Math.random() * pool.length)); 

     // remove the placeholder from answers and insert the letter into 
     // random slot 
     insertByIndex(answers, pool[randPool], letter); 

     // remove random number from pool 
     removeByIndex(pool, randPool); 

     // redo this process for the second placement 
     randPool = Math.floor((Math.random() * pool.length)); 
     insertByIndex(answers, pool[randPool], letter); 

     // remove rand number from pool 
     removeByIndex(pool, randPool); 
    } 
    return answers; 
} 

angular.module('cards', ['ngAnimate']); 

    angular 
    .module('cards') 
    .controller('CardController', CardController); 

    function CardController($timeout) { 

    /* jshint validthis: true */ 
    var vm = this; 
    vm.deck = createDeck(); 
    vm.isGuarding = true; 
    vm.inGame = false; 

    function check(card) { 
     if (currentSessionOpen && previousCard != card && previousCard.item == card.item && !card.isFaceUp) { 
      card.isFaceUp = true; 
      console.log(card.isFaceUp); 
      previousCard = null; 
      currentSessionOpen = false; 
      numPairs++; 
     } else if (currentSessionOpen && previousCard != card && previousCard.item != card.item && !card.isFaceUp) { 
      vm.isGuarding = true; 
      vm.card.isFaceUp = true; 
      console.log(vm.card.isFaceUp) 
      currentSessionOpen = false; 
      $timeout(function() { 
      previousCard.isFaceUp = card.isFaceUp = false; 
      previousCard = null; 
      vm.isGuarding = vm.timeLimit ? false : true; 
      }, 1000); 
     } else { 
      card.isFaceUp = true; 
      currentSessionOpen = true; 
      previousCard = card; 
     } 

     if (numPairs == constants.getNumMatches()) { 
      vm.stopTimer(); 
     } 
     } //end of check() 

    // for the timer 
    vm.timeLimit = 60000; 
    vm.isCritical = false; 

    var timer = null; 

    // start the timer as soon as the player presses start 
    vm.start = function() { 
     // I need to fix this redundancy. I initially did not create this 
     // game with a start button. 
     vm.deck = createDeck(); 
     // set the time of 1 minutes and remove the cards guard 
     vm.timeLimit = 60000; 
     vm.isGuarding = false; 
     vm.inGame = true; 

     (vm.startTimer = function() { 
      vm.timeLimit -= 1000; 
      vm.isCritical = vm.timeLimit <= 10000 ? true : false; 

      timer = $timeout(vm.startTimer, 1000); 
      if (vm.timeLimit === 0) { 
      vm.stopTimer(); 
      vm.isGuarding = true; 
      } 
     })(); 
     } 
     // function to stop the timer 
    vm.stopTimer = function() { 
     $timeout.cancel(timer); 
     vm.inGame = false; 
     previousCard = null; 
     currentSessionOpen = false; 
     numPairs = 0; 
    } 
    } //end CardController 

})(); 


<!doctype html> 
<html ng-app="cards"> 
<head> 
    <meta charset="utf-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.js"></script> 
    <link rel="stylesheet" href="cards.css"> 
</head> 

<body> 
    <div class="cntr" ng-controller="CardController as cards"> 
     <div class="timer" ng-class="{critical:cards.isCritical}"> 
      {{cards.timeLimit | date: 'm:ss'}} 
     </div> 
     <table class="table-top"> 
      <tr ng-repeat="row in cards.deck.rows"> 
       <td ng-repeat="card in row.cards"> 
        <div class="card_container {{!card.isFaceUp ? '' : 'flip'}}" ng-click="cards.isGuarding || check(card)" > 
         <div class="card shadow"> 
          <div class="front face"></div> 
          <div class="back face text-center pagination-center"> 
           <p> {{card.item}} </p> 
          </div> 
         </div> 
        </div> 
       </td> 
      </tr> 
     </table> 
     <div class="startbtn"> 
      <button type="button" class="btn btn-default btn-lg" ng-disabled="cards.inGame == true" ng-click="cards.start()">Start</button> 
     </div> 
    </div> 
    <script type="text/javascript" src="cards.js"></script> 
</body> 
</html> 

回答

1

您需要使您的檢查功能對視圖可見。

vm.check = check; 

還調用函數時,因爲使用的是

ng-controller="CardController as cards" 

你需要調用()視圖中的功能cards.check。