有角度的记忆游戏

Posted 2023-02-23

【中文标题】有角度的记忆游戏

【英文标题】：memory game with angular

【发布时间】：2017-02-12 05:42:31

【问题描述】：

我正在重新制作memory game 以熟悉controllerAs View Syntax。我已将问题缩小到检查功能；但我可能错了。检查函数将 card 作为参数传递，但是当我使用 console.log(card) 时，card 没有值，当 card 应该具有数组平假名或可选字母的值时。

   (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()函数。