1
我對此很感興趣，但我一直在嘗試讓計時器和分數值回到0，然後開始新的內存遊戲。這些值會重置，但在該值受影響之前不會顯示。例如，匹配數量的值永遠不會回到0，它會保持在10（最大對數），直到找到下一個遊戲的第一個匹配，然後它將變爲1.是否有人知道如何當調用新的電路板時，將值重新顯示爲0，而不是在影響值時重新設置。在新遊戲開始之前將計時器和分數值重置爲0
我已經在功能設置newBoard
var turns = 0
var matches = 0
，並呼籲在它們設置爲0（）。
我的計時器代碼：
var c = 0;
\t \t var t;
\t \t var timer_is_on = 0;
\t \t function timedCount() {
\t \t document.getElementById('txt').value = c;
\t \t c = c+1;
\t \t t = setTimeout(timedCount, 1000);
\t \t }
\t \t function startTimer() {
\t \t if (!timer_is_on) {
\t \t timer_is_on = 1;
\t \t timedCount();
\t \t }
\t \t }
\t \t function stopCount() {
\t \t clearTimeout(t);
\t \t timer_is_on = 0;
\t \t }
\t \t function resetTime(){
\t \t \t clearTimeout(t);
\t \t \t timer_is_on = 0;
\t \t \t c = 0在那裏我有叫起來在功能newBoard的重新設定時間（）（）函數。
我完整的代碼：
body{
\t background:#FFF;
\t font-family: Cooper Black;
}
h1{
\t font-family: Cooper Black;
\t text-align: center;
\t font-size: 64px;
\t color: #FF0066;
}
footer{
\t height: 150px;
\t background: -webkit-linear-gradient(#99CCFF, #FFF); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#99CCFF, #FFF); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#99CCFF, #FFF); /* For Firefox 3.6 to 15 */
\t background: linear-gradient(#99CCFF, #FFF); /* Standard syntax (must be last) */
}
div#memory_board{
\t background: -webkit-radial-gradient(#FFF, #CC99FF); /* For Safari 5.1 to 6.0 */
background: -o-radial-gradient(#FFF, #CC99FF); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(#FFF, #CC99FF); /* For Firefox 3.6 to 15 */
background: radial-gradient(#FFF, #CC99FF); /* Standard syntax (must be last) */
\t border:#FF0066 10px ridge;
\t width:510px;
\t height:405px;
\t padding:24px;
}
div#memory_board > div{
\t background:url(tile_background.png) no-repeat;
\t border:#000 1px solid;
\t width:45px;
\t height:45px;
\t float:left;
\t margin:7px;
\t padding:20px;
\t cursor:pointer;
\t }
alert{
\t background: #FF0066;
}
button{
\t font-family: Cooper Black;
\t font-size: 20px;
\t color: #FF0066;
\t background: #5CE62E;
\t border: #C2E0FF 2px outset;
\t border-radius: 25px;
\t padding: 10px;
\t cursor: pointer;
}
input#txt{
\t background: yellow;
\t color: #FF0066;
\t font-family: Times New Roman;
\t font-size: 84px;
\t height: 150px;
\t width: 150px;
\t border-radius: 100%;
\t text-align: center;
\t border: none;
}
input#pause{
\t font-family: Cooper Black;
\t font-size: 18px;
\t color: #FF0066;
\t background: #C2E0FF;
\t border: #C2E0FF 2px outset;
\t border-radius: 25px;
\t padding: 10px;
\t cursor: pointer;
\t margin-top: 10px;
}
div.goes{
\t text-align: center;
\t border: #C2E0FF 5px double;
\t height: 160px;
\t width: 120px;
\t margin-top: 48px;
\t margin-left: 5px;
}
div.matches{
\t text-align: center;
\t border: #C2E0FF 5px double;
\t height: 160px;
\t width: 120px;
\t margin-top: 30px;
\t margin-left: 10px;
}
p{
\t font-size: 28px;
}
span{
\t font-family: Times New Roman;
\t font-size: 84px;
}
.sprite {
\t width:96px;
\t height:96px;
\t position: relative;
\t margin:15px;
}
.toon{
\t background: url(explode.png);
}
}
#dialogoverlay{
\t display: none;
\t opacity: 0.8;
\t position: fixed;
\t top: 0px;
\t left: 0px;
\t background: #FFF;
\t width: 100%;
\t z-index: 10;
}
#dialogbox{
\t display: none;
\t position: fixed;
\t background: #FF0066;
\t border-radius:7px;
\t width:400px;
\t z-index: 10;
}
#dialogbox > div{ background: #FFF; margin:8px; }
#dialogbox > div > #dialogboxhead{ background: linear-gradient(#99CCFF, #FFF); height: 40px; color: #CCC; }
#dialogbox > div > #dialogboxbody{ background: #FFF; color: #FF0066; font-size: 36px; text-align:center;}
#dialogbox > div > #dialogboxfoot{ background: linear-gradient(#FFF, #99CCFF); padding-bottom: 20px; text-align:center; }<!DOCTYPE html>
<html>
<head>
\t <title>Memory Card Game</title>
\t <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
\t <link rel="stylesheet" type="text/css" href="reset.css" />
\t <link rel="stylesheet" type="text/css" href="text.css" />
\t <link rel="stylesheet" type="text/css" href="960.css" />
\t <link rel="stylesheet" type="text/css" href="mystyles.css" />
\t <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
\t <script type='text/javascript' src='jquery.animateSprite.js'></script>
\t <script>
\t \t var memory_array = ['A','A','B','B','C','C','D','D','E','E','F','F','G','G','H','H','I','I','J','J'];
\t \t var memory_values = [];
\t \t var memory_tile_ids = [];
\t \t var tiles_flipped = 0;
\t \t var turns = 0
\t \t var matches = 0
\t \t Array.prototype.memory_tile_shuffle = function(){
\t \t var i = this.length, j, temp;
\t \t while(--i > 0){
\t \t j = Math.floor(Math.random() * (i+1));
\t \t temp = this[j];
\t \t this[j] = this[i];
\t \t this[i] = temp;
\t \t }
\t \t }
\t \t function newBoard(){
\t \t \t tiles_flipped = 0;
\t \t \t var output = '';
\t \t memory_array.memory_tile_shuffle();
\t \t \t for(var i = 0; i < memory_array.length; i++){
\t \t \t \t output += '<div id="tile_'+i+'" onclick="memoryFlipTile(this,\''+memory_array[i]+'\')"></div>';
\t \t \t }
\t \t \t document.getElementById('memory_board').innerHTML = output;
\t \t \t //fade in
\t \t \t $(document).ready(function() {
\t \t \t \t $('#memory_board > div').hide().fadeIn(1500).delay(6000)
\t \t \t });
\t \t \t resetTime();
\t \t \t turns = 0;
\t \t \t matches = 0;
\t \t }
\t \t
\t \t function memoryFlipTile(tile,val){
\t \t startTimer();
\t \t playClick();
\t \t if(tile.innerHTML == "" && memory_values.length < 2){
\t \t tile.style.background = '#FFF';
\t \t tile.innerHTML = '<img src="' + val + '.png"/>';
\t \t if(memory_values.length == 0){
\t \t \t memory_values.push(val);
\t \t \t memory_tile_ids.push(tile.id);
\t \t } else if(memory_values.length == 1){
\t \t \t memory_values.push(val);
\t \t \t memory_tile_ids.push(tile.id);
\t \t \t if(memory_values[0] == memory_values[1]){
\t \t \t \t tiles_flipped += 2;
\t \t \t \t //sound
\t \t \t \t playMatch();
\t \t \t \t //animation
\t \t \t \t //number of clicks
\t \t \t \t turns = turns + 1;
\t \t \t \t document.getElementById("Count").innerHTML = turns;
\t \t \t \t //number of matches
\t \t \t \t matches = matches + 1;
\t \t \t \t document.getElementById("matchNumber").innerHTML = matches;
\t \t \t \t // Clear both arrays
\t \t \t \t memory_values = [];
\t memory_tile_ids = [];
\t \t \t \t // Check to see if the whole board is cleared
\t \t \t \t if(tiles_flipped == memory_array.length){
\t \t \t \t \t playEnd();
\t \t \t \t \t Alert.render("Congratulations! Board Cleared");
\t \t \t \t \t //resetTime()
\t \t \t \t \t //stopCount();
\t \t \t \t \t document.getElementById('memory_board').innerHTML = "";
\t \t \t \t \t newBoard();
\t \t \t \t \t
\t \t \t \t }
\t \t \t } else {
\t \t \t \t function flipBack(){
\t \t \t \t // Flip the 2 tiles back over
\t \t \t \t var tile_1 = document.getElementById(memory_tile_ids[0]);
\t \t \t \t var tile_2 = document.getElementById(memory_tile_ids[1]);
\t \t \t \t tile_1.style.background = 'url(tile_background.png) no-repeat';
\t tile_1.innerHTML = "";
\t \t \t \t tile_2.style.background = 'url(tile_background.png) no-repeat';
\t tile_2.innerHTML = "";
\t //number of clicks
\t turns = turns + 1;
\t \t \t \t \t document.getElementById("Count").innerHTML = turns;
\t //clickNumber()
\t \t \t \t // Clear both arrays
\t \t \t \t memory_values = [];
\t memory_tile_ids = [];
\t \t \t \t }
\t \t \t \t setTimeout(flipBack, 700);
\t \t \t \t \t }
\t \t \t \t }
\t \t \t }
\t \t }
\t \t //timer
\t \t var c = 0;
\t \t var t;
\t \t var timer_is_on = 0;
\t \t function timedCount() {
\t \t document.getElementById('txt').value = c;
\t \t c = c+1;
\t \t t = setTimeout(timedCount, 1000);
\t \t }
\t \t function startTimer() {
\t \t if (!timer_is_on) {
\t \t timer_is_on = 1;
\t \t timedCount();
\t \t }
\t \t }
\t \t function stopCount() {
\t \t clearTimeout(t);
\t \t timer_is_on = 0;
\t \t }
\t \t function resetTime(){
\t \t \t clearTimeout(t);
\t \t \t timer_is_on = 0;
\t \t \t c = 0
\t \t }
\t \t //sound effects /*sounds from http://www.freesfx.co.uk*/
\t \t function playClick(){
\t \t \t var sound=document.getElementById("click");
\t \t \t sound.play();
\t \t }
\t \t function playMatch(){
\t \t \t var sound=document.getElementById("match_sound");
\t \t \t sound.play();
\t \t }
\t \t function playEnd(){
\t \t \t var sound=document.getElementById("finished");
\t \t \t sound.play();
\t \t }
\t \t //custom alert
\t \t function CustomAlert(){
\t \t this.render = function(dialog){
\t \t var winW = window.innerWidth;
\t \t var winH = window.innerHeight;
\t \t var dialogoverlay = document.getElementById('dialogoverlay');
\t \t var dialogbox = document.getElementById('dialogbox');
\t \t dialogoverlay.style.display = "block";
\t \t dialogoverlay.style.height = winH+"px";
\t \t dialogbox.style.left = (winW/2) - (400 * .5)+"px";
\t \t dialogbox.style.top = "200px";
\t \t dialogbox.style.display = "block";
\t \t document.getElementById('dialogboxhead').innerHTML = "";
\t \t document.getElementById('dialogboxbody').innerHTML = dialog;
\t \t document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()">New Game</button>';
\t \t }
\t \t \t this.ok = function(){
\t \t \t \t document.getElementById('dialogbox').style.display = "none";
\t \t \t \t document.getElementById('dialogoverlay').style.display = "none";
\t \t \t }
\t \t }
\t \t var Alert = new CustomAlert();
\t </script>
\t <script>//sparkle effect: http://www.rigzsoft.co.uk/how-to-implement-animated-sprite-sheets-on-a-web-page/
\t \t $(document).ready(function(){
\t \t \t $("#memory_board").click(function animation(){
\t \t \t \t $(".toon").animateSprite({
\t \t \t \t \t columns: 10,
\t \t \t \t totalFrames: 50,
\t \t \t \t duration: 1000,
\t \t \t \t });
\t \t \t });
\t \t });
\t </script>
</head>
<body>
\t <audio id = "click" src = "click.mp3" preload = "auto"></audio>
\t <audio id = "match_sound" src = "match.mp3" preload = "auto"></audio>
\t <audio id = "finished" src = "finished.wav" preload = "auto"></audio>
\t <div id = "dialogoverlay"></div>
\t <div id = "dialogbox">
\t \t <div>
\t \t \t <div id = "dialogboxhead"></div>
\t \t \t <div id = "dialogboxbody"></div>
\t \t \t <div id = "dialogboxfoot"></div>
\t \t </div>
\t </div>
\t <div class = "container_16">
\t \t <div id = "banner" class = "grid_16">
\t \t \t <p><br></p>
\t \t \t <h1>Memory</h1>
\t \t </div>
\t \t <div class = "grid_3">
\t \t \t <input type="text" id="txt" value="0"/>
\t \t \t <p><br></p>
\t \t \t <p><br></p>
\t \t \t <div class = "goes">
\t \t \t \t <p>Turns <br><span id = "Count">0</span></p>
\t \t \t </div>
\t \t </div>
\t \t <div class = "grid_10">
\t \t \t <div id="memory_board"></div>
\t \t \t <script>newBoard();</script>
\t \t \t <div style="position: relative; height: 110px;">
\t \t \t \t <div class="sprite toon"></div>
\t \t \t </div>
\t \t </div>
\t \t <div class = "grid_3">
\t \t \t <button id = "new_game" onclick="newBoard()">New Game</button>
\t \t \t <input type="button" id="pause" value="Pause Game" onclick="stopCount()">
\t \t \t <p><br></p>
\t \t \t <p><br></p>
\t \t \t <p><br></p>
\t \t \t <div class = "matches">
\t \t \t \t <p>Matches <br><span id = "matchNumber">0</span></p>
\t \t \t </div>
\t \t </div>
\t </div>
\t <footer> </footer>
</body>
</html>
已經工作了！非常感謝！然而，它並沒有解決定時器的問題，因爲我在新遊戲開始之前沒有顯示0的值有相同的問題。 我剛剛嘗試過使用與您使用 document.getElementById（'txt'）。innerHTML = 0解釋相同的方法。 但這似乎並不奏效。你知道任何解決方案嗎？ – lecave
嘗試將該代碼置於'stopCount'或'resetTime'方法內。 –
這似乎仍然不起作用，下一場比賽開始時仍會重置。 – lecave