6
Tôi đang làm lại memory game để làm quen với controllerAs View Syntax. Tôi đã thu hẹp vấn đề về chức năng kiểm tra; nhưng tôi có thể sai. Chức năng kiểm tra chuyển thẻ như một tham số nhưng khi tôi sử dụng console.log (thẻ) không có giá trị cho thẻ, khi thẻ nên có giá trị của dãy hiragana hoặc các chữ cái tùy chọn.trò chơi trí nhớ với góc
(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>