0
我想準備一個像教育遊戲;保存javascript應用程序的記錄
// 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 \t currentSessionOpen = false;
var \t previousCard = null;
var numPairs = 0;
// this function creates deck of cards that returns an object of cards
// to the caller
function createDeck() {
\t var rows = constants.getRows();
\t var cols = constants.getColumns();
\t var key = createRandom();
\t var deck = {};
\t deck.rows = [];
\t // create each row
\t for(var i = 0; i < rows; i++) {
\t \t var row = {};
\t \t row.cards = [];
\t \t
\t \t // creat each card in the row
\t \t for (var j = 0; j < cols; j++) {
\t \t \t var card = {};
\t \t \t card.isFaceUp = false;
\t \t \t card.item = key.pop();
\t \t \t row.cards.push(card);
\t \t }
\t \t deck.rows.push(row);
\t }
\t return deck;
}
// used to remove something form an array by index
function removeByIndex(arr, index) {
arr.splice(index, 1);
}
function insertByIndex(arr, index, item) {
\t arr.splice(index, 0, item);
}
// creates a random array of items that contain matches
// for example: [1, 5, 6, 5, 1, 6]
function createRandom() {
\t var matches = constants.getNumMatches();
\t var pool = [];
\t var answers = [];
\t var letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'
\t \t \t \t \t , 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R'
\t \t \t \t \t , 'S', 'T', 'U', 'W', 'X', 'Y', 'Z'];
\t
\t var hiragana = ['あ', 'い', 'う', 'え', 'お', 'か', 'が', 'き'
\t \t \t \t \t , 'ぎ', 'く', 'ぐ', 'け', 'げ', 'こ', 'ご', 'さ'
\t \t \t \t \t , 'ざ', 'し', 'じ', 'す', 'ず', 'せ', 'ぜ', 'そ'
\t \t \t \t \t , 'ぞ', 'た', 'だ', 'ち', 'ぢ', 'つ', 'づ', 'て'
\t \t \t \t \t , 'で', 'と', 'ど', 'な', 'に', 'ぬ', 'ね', 'の'
\t \t \t \t \t , 'は', 'ば', 'ぱ', 'ひ', 'び', 'ぴ', 'ふ', 'ぶ'
\t \t \t \t \t , 'ぷ', 'へ', 'べ', 'ぺ', 'ほ', 'ぼ', 'ぽ', 'ま'
\t \t \t \t \t , 'み', 'む', 'め', 'も', 'や', 'ゆ', 'よ', 'ら'
\t \t \t \t \t , 'り', 'る', 'れ', 'ろ', 'わ', 'を', 'ん'];
\t // set what kind of item to display
\t var items = hiragana;
\t // create the arrays for random numbers and item holder
\t for (var i = 0; i < matches * 2; i++) {
\t \t pool.push(i); // random numbers
\t }
\t
\t // generate an array with the random items
\t for (var n = 0; n < matches; n++) {
\t \t // grab random letter from array and remove that letter from the
\t \t // original array
\t \t var randLetter = Math.floor((Math.random() * items.length));
\t \t var letter = items[randLetter];
\t \t removeByIndex(items, randLetter);
\t \t // generate two random placements for each item
\t \t var randPool = Math.floor((Math.random() * pool.length));
\t \t
\t \t // remove the placeholder from answers and insert the letter into
\t \t // random slot
\t \t insertByIndex(answers, pool[randPool], letter);
\t \t
\t \t // remove random number from pool
\t \t removeByIndex(pool, randPool);
\t \t
\t \t // redo this process for the second placement
\t \t randPool = Math.floor((Math.random() * pool.length));
\t \t insertByIndex(answers, pool[randPool], letter);
\t \t // remove rand number from pool
\t \t removeByIndex(pool, randPool);
\t }
\t return answers;
}
var app = angular.module('cards', ['ngAnimate']);
app.controller("CardController", function($scope, $timeout) {
\t $scope.deck = createDeck();
\t $scope.isGuarding = true;
\t $scope.inGame = false;
\t $scope.check = function(card) {
\t \t if (currentSessionOpen && previousCard != card && previousCard.item == card.item && !card.isFaceUp) {
\t \t \t card.isFaceUp = true;
\t \t \t previousCard = null;
\t \t \t currentSessionOpen = false;
\t \t \t numPairs++;
\t \t } else if(currentSessionOpen && previousCard != card && previousCard.item != card.item && !card.isFaceUp) {
\t \t \t $scope.isGuarding = true;
\t \t \t card.isFaceUp = true;
\t \t \t currentSessionOpen = false; \t \t \t
\t \t \t $timeout(function() {
\t \t \t \t previousCard.isFaceUp = card.isFaceUp = false;
\t \t \t \t previousCard = null;
\t \t \t \t $scope.isGuarding = $scope.timeLimit ? false : true;
\t \t \t }, 1000);
\t \t } else {
\t \t \t card.isFaceUp = true;
\t \t \t currentSessionOpen = true;
\t \t \t previousCard = card;
\t \t } \t
\t \t if (numPairs == constants.getNumMatches()) {
\t \t \t $scope.stopTimer();
\t \t }
\t } //end of check()
\t // for the timer
\t $scope.timeLimit = 60000;
\t $scope.isCritical = false;
\t
\t var timer = null;
\t // start the timer as soon as the player presses start
\t $scope.start = function(){
\t \t // I need to fix this redundancy. I initially did not create this
\t \t // game with a start button.
\t \t $scope.deck = createDeck();
\t \t // set the time of 1 minutes and remove the cards guard
\t \t $scope.timeLimit = 60000;
\t \t $scope.isGuarding = false;
\t \t $scope.inGame = true;
\t \t ($scope.startTimer =function() {
\t \t \t $scope.timeLimit -= 1000;
\t \t \t $scope.isCritical = $scope.timeLimit <= 10000 ? true : false;
\t \t \t
\t \t \t timer = $timeout($scope.startTimer, 1000);
\t \t \t if ($scope.timeLimit === 0) {
\t \t \t \t $scope.stopTimer();
\t \t \t \t $scope.isGuarding = true;
\t \t \t }
\t \t })();
\t } \t
\t // function to stop the timer
\t $scope.stopTimer = function() {
\t $timeout.cancel(timer);
\t $scope.inGame = false;
\t previousCard = null;
\t currentSessionOpen = false;
\t numPairs = 0;
\t }
});.card_container {
position: relative;
margin: 1px auto;
padding: 3px;
width: 9em;
height: 12em;
line-height: 12em;
z-index: 1;
}
.card_container {
-moz-perspective: 1000;
-webkit-perspective: 1000;
perspective: 1000;
}
.card {
background-color: #68c39f;
width: 100%;
height: 100%;
cursor: pointer;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
box-shadow: 0.5px 2.5px #ccc;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transition: all .25s linear;
-webkit-transition: all .25s linear;
transition: all .25s linear;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip .card{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.face.back {
display: block;
color: white;
font-size: 7.5em;
background-color: #FFCC66;
border-radius: 3px;
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
table {
\t margin: 0px auto;
}
.timer {
display: block;
margin: 10px auto;
position: relative;
width: 150px;
height: 50px;
line-height: 50px;
background-color: #fff;
border-radius: 25px;
border: 2px solid #1abc9c;
font-size: 40px;
text-align: center;
color: #999;
}
.startbtn {
display: block;
margin: 10px auto;
position: relative;
text-align: center;
}
.critical {
color: red;
}
.cntr {
margin: 15px auto;
}
.points {
position: absolute;
}<html ng-app="cards">
\t <head>
\t \t <meta charset="utf-8">
\t \t <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
\t \t <link rel="stylesheet" href="flip.css">
\t \t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" type="text/javascript"></script>
\t \t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js" type="text/javascript"></script>
\t </head>
<body>
\t <div class="cntr" ng-controller="CardController">
\t \t <div class="timer" ng-class="{critical:isCritical}">
\t \t \t {{timeLimit | date: 'm:ss'}} \t
\t \t </div>
\t \t <table class="table-top">
\t \t \t <tr ng-repeat="row in deck.rows">
\t \t \t \t <td ng-repeat="card in row.cards">
\t \t \t \t \t <div class="card_container {{!card.isFaceUp ? '' : 'flip'}}" ng-click="isGuarding || check(card)" >
\t \t \t \t \t \t <div class="card shadow">
\t \t \t \t \t \t \t <div class="front face"></div>
\t \t \t \t \t \t \t <div class="back face text-center pagination-center">
\t \t \t \t \t \t \t \t <p> {{card.item}} </p>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </td>
\t \t \t </tr>
\t \t </table>
\t \t <div class="startbtn">
\t \t \t <button type="button" class="btn btn-default btn-lg" ng-disabled="inGame == true" ng-click="start()">Start</button>
\t \t </div>
\t </div>
</html>我可以編輯鏈接片段但有更多的東西，我想添加這個例子。我想把球員的記錄保存在應用程序下方的列表中。
這樣做的最好方法是什麼？
需要你的幫助。從現在開始感謝。
我想你需要提供更多關於你在這裏問的問題以獲得一個很好的答案的細節。 – Carcigenicate
我需要指定哪些細節？在玩家開始玩之前，他們會寫他們的玩家ID，然後它會保存他們在mysql或其他數據庫系統中的記錄 – DanTeS9
像「應用程序下面的列表」一樣，是什麼意思？你想保留多久的記錄？你想保持他們的客戶端或服務器端？根據什麼指標「最佳方式」？ – Carcigenicate