angular 的记忆游戏
memory game with angular
我正在重制 memory game to become familiar with controllerAs View Syntax。我已将问题缩小到检查功能；但我可能是错的。检查函数将卡作为参数传递，但是当我使用 console.log(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>
您需要让您的检查功能对视图可见。
vm.check = check;
调用函数时也是如此，因为您正在使用
ng-controller="CardController as cards"
您需要从视图中将函数调用为 cards.check()。
我正在重制 memory game to become familiar with controllerAs View Syntax。我已将问题缩小到检查功能；但我可能是错的。检查函数将卡作为参数传递，但是当我使用 console.log(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>
您需要让您的检查功能对视图可见。
vm.check = check;
调用函数时也是如此，因为您正在使用
ng-controller="CardController as cards"
您需要从视图中将函数调用为 cards.check()。