在新游戏开始之前将计时器和得分值重置为0

时间：2015-05-11 21:25:51

标签： javascript timer reset

我是新手，但是在新的记忆游戏开始之前我试图让我的计时器和得分值回到0时遇到了一些麻烦。这些值会重置，但在该值受到影响之前不会显示。例如，匹配数量的值永远不会回到0，它会保持在10（最大对数），直到您找到下一个游戏的第一个匹配，然后它将变为1.是否有人知道如何当一个新的电路板被调用而不是仅仅在该值受到影响时重置时，获取值是否再次显示0？

我已经设置了

var turns = 0
var matches = 0

并在函数newBoard（）中将它们调用为0。

我的计时器代码是：

＆＃13;
＆＃13; 
var c = 0;
		var t;
		var timer_is_on = 0;

		function timedCount() {
		    document.getElementById('txt').value = c;
		    c = c+1;
		    t = setTimeout(timedCount, 1000);
		}

		function startTimer() {
		    if (!timer_is_on) {
		        timer_is_on = 1;
		        timedCount();
		    }
		}

		function stopCount() {
		    clearTimeout(t);
		    timer_is_on = 0;
		}

		function resetTime(){
			clearTimeout(t);
			timer_is_on = 0;
			c = 0
＆＃13;
＆＃13;
＆＃13;

我在newBoard（）函数中调用了resetTime（）函数。

我的完整代码是：

＆＃13;
＆＃13; 
body{
	background:#FFF;
	font-family: Cooper Black;
}
h1{
	font-family: Cooper Black;
	text-align: center;
	font-size: 64px;
	color: #FF0066;
}
footer{
	height: 150px;
	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 */
	background: linear-gradient(#99CCFF, #FFF); /* Standard syntax (must be last) */
}
div#memory_board{
	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) */
	border:#FF0066 10px ridge;
	width:510px;
	height:405px;
	padding:24px;

}
div#memory_board > div{
	background:url(tile_background.png) no-repeat;
	border:#000 1px solid;
	width:45px;
	height:45px;
	float:left;
	margin:7px;
	padding:20px;
	cursor:pointer;
	}
alert{
	background: #FF0066;
}

button{
	font-family: Cooper Black;
	font-size: 20px;
	color: #FF0066;
	background: #5CE62E;
	border: #C2E0FF 2px outset;
	border-radius: 25px;
	padding: 10px;
	cursor: pointer;
}
input#txt{
	background: yellow;
	color: #FF0066;
	font-family: Times New Roman;
	font-size: 84px;
	height: 150px;
	width: 150px;
	border-radius: 100%;
	text-align: center;
	border: none;
}
input#pause{
	font-family: Cooper Black;
	font-size: 18px;
	color: #FF0066;
	background: #C2E0FF;
	border: #C2E0FF 2px outset;
	border-radius: 25px;
	padding: 10px;
	cursor: pointer;
	margin-top: 10px;
}
div.goes{
	text-align: center;
	border: #C2E0FF 5px double;
	height: 160px;
	width: 120px;
	margin-top: 48px;
	margin-left: 5px;
}
div.matches{
	text-align: center;
	border: #C2E0FF 5px double;
	height: 160px;
	width: 120px;
	margin-top: 30px;
	margin-left: 10px;
}
p{
	font-size: 28px;
}
span{
	font-family: Times New Roman;
	font-size: 84px;
}
.sprite {
	width:96px;
	height:96px;
	position: relative;
	margin:15px;
}
.toon{
	background: url(explode.png);
}
}
#dialogoverlay{
	display: none;
	opacity: 0.8;
	position: fixed;
	top: 0px;
	left: 0px;
	background: #FFF;
	width: 100%;
	z-index: 10;
}
#dialogbox{
	display: none;
	position: fixed;
	background: #FF0066;
	border-radius:7px; 
	width:400px;
	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; }
＆＃13; 
<!DOCTYPE html>
<html>
<head>
	<title>Memory Card Game</title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" href="reset.css" />
	<link rel="stylesheet" type="text/css" href="text.css" />
	<link rel="stylesheet" type="text/css" href="960.css" />
	<link rel="stylesheet" type="text/css" href="mystyles.css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script type='text/javascript' src='jquery.animateSprite.js'></script>

	<script>
		var memory_array = ['A','A','B','B','C','C','D','D','E','E','F','F','G','G','H','H','I','I','J','J'];
		var memory_values = [];
		var memory_tile_ids = [];
		var tiles_flipped = 0;
		var turns = 0
		var matches = 0
		Array.prototype.memory_tile_shuffle = function(){
		    var i = this.length, j, temp;
		    while(--i > 0){
		        j = Math.floor(Math.random() * (i+1));
		        temp = this[j];
		        this[j] = this[i];
		        this[i] = temp;
		    }
		}
		function newBoard(){
			tiles_flipped = 0;
			var output = '';
		    memory_array.memory_tile_shuffle();
			for(var i = 0; i < memory_array.length; i++){
				output += '<div id="tile_'+i+'" onclick="memoryFlipTile(this,\''+memory_array[i]+'\')"></div>';
			}
			document.getElementById('memory_board').innerHTML = output;
			//fade in
			$(document).ready(function () { 
				$('#memory_board > div').hide().fadeIn(1500).delay(6000)
			});
			resetTime();
			turns = 0;
			matches = 0;
		}
		
		function memoryFlipTile(tile,val){
		startTimer();
		playClick();
		if(tile.innerHTML == "" && memory_values.length < 2){
		tile.style.background = '#FFF';
		tile.innerHTML = '<img src="' + val + '.png"/>';
		if(memory_values.length == 0){
			memory_values.push(val);
			memory_tile_ids.push(tile.id);
		} else if(memory_values.length == 1){
			memory_values.push(val);
			memory_tile_ids.push(tile.id);
			if(memory_values[0] == memory_values[1]){
				tiles_flipped += 2;
				//sound
				playMatch();
				//animation

				//number of clicks
				turns = turns + 1;
				document.getElementById("Count").innerHTML = turns;
				//number of matches
				matches = matches + 1;
				document.getElementById("matchNumber").innerHTML = matches;
				// Clear both arrays
				memory_values = [];
            	memory_tile_ids = [];
				// Check to see if the whole board is cleared
				if(tiles_flipped == memory_array.length){
					playEnd();
					Alert.render("Congratulations! Board Cleared");
					//resetTime()
					//stopCount();
					document.getElementById('memory_board').innerHTML = "";
					newBoard();
					
				}
			} else {
				function flipBack(){
				    // Flip the 2 tiles back over
				    var tile_1 = document.getElementById(memory_tile_ids[0]);
				    var tile_2 = document.getElementById(memory_tile_ids[1]);
				    tile_1.style.background = 'url(tile_background.png) no-repeat';
            	    tile_1.innerHTML = "";
				    tile_2.style.background = 'url(tile_background.png) no-repeat';
            	    tile_2.innerHTML = "";
            	    //number of clicks
            	    turns = turns + 1;
					document.getElementById("Count").innerHTML = turns;
            	    //clickNumber()
				    // Clear both arrays
				    memory_values = [];
            	    memory_tile_ids = [];
				}
				setTimeout(flipBack, 700);
					}
				}
			}
		}
		//timer
		var c = 0;
		var t;
		var timer_is_on = 0;

		function timedCount() {
		    document.getElementById('txt').value = c;
		    c = c+1;
		    t = setTimeout(timedCount, 1000);
		}

		function startTimer() {
		    if (!timer_is_on) {
		        timer_is_on = 1;
		        timedCount();
		    }
		}

		function stopCount() {
		    clearTimeout(t);
		    timer_is_on = 0;
		}

		function resetTime(){
			clearTimeout(t);
			timer_is_on = 0;
			c = 0
		}
		//sound effects /*sounds from http://www.freesfx.co.uk*/
		function playClick(){
			var sound=document.getElementById("click");
			sound.play();
		}
		function playMatch(){
			var sound=document.getElementById("match_sound");
			sound.play();
		}
		function playEnd(){
			var sound=document.getElementById("finished");
			sound.play();
		}

		//custom alert
		function CustomAlert(){
		    this.render = function(dialog){
		        var winW = window.innerWidth;
		        var winH = window.innerHeight;
		        var dialogoverlay = document.getElementById('dialogoverlay');
		        var dialogbox = document.getElementById('dialogbox');
		        dialogoverlay.style.display = "block";
		        dialogoverlay.style.height = winH+"px";
		        dialogbox.style.left = (winW/2) - (400 * .5)+"px";
		        dialogbox.style.top = "200px";
		        dialogbox.style.display = "block";
		        document.getElementById('dialogboxhead').innerHTML = "";
		        document.getElementById('dialogboxbody').innerHTML = dialog;
		        document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()">New Game</button>';
		    }
			this.ok = function(){
				document.getElementById('dialogbox').style.display = "none";
				document.getElementById('dialogoverlay').style.display = "none";
			}
		}
		var Alert = new CustomAlert();

	</script>
	<script>//sparkle effect: http://www.rigzsoft.co.uk/how-to-implement-animated-sprite-sheets-on-a-web-page/
		$(document).ready(function(){
			$("#memory_board").click(function animation(){
				$(".toon").animateSprite({
				   	columns: 10,
				    totalFrames: 50,
				    duration: 1000,
				});
			});
		});
	</script>

</head>
<body>
	<audio id = "click" src = "click.mp3" preload = "auto"></audio>
	<audio id = "match_sound" src = "match.mp3" preload = "auto"></audio>
	<audio id = "finished" src = "finished.wav" preload = "auto"></audio>

	<div id = "dialogoverlay"></div>
	<div id = "dialogbox">
		<div>
			<div id = "dialogboxhead"></div>
			<div id = "dialogboxbody"></div>
			<div id = "dialogboxfoot"></div>
		</div>
	</div>

	<div class = "container_16">
		<div id = "banner" class = "grid_16">
			<p><br></p>
			<h1>Memory</h1>
		</div>
		<div class = "grid_3">
			<input type="text" id="txt" value="0"/>
			<p><br></p>
			<p><br></p>
			<div class = "goes">
				<p>Turns <br><span id = "Count">0</span></p>
			</div>
		</div>
		<div class = "grid_10">
			<div id="memory_board"></div>
			<script>newBoard();</script>
			<div style="position: relative; height: 110px;">
				<div class="sprite toon"></div>
			</div>
		</div>
		<div class = "grid_3">
			<button id = "new_game" onclick="newBoard()">New Game</button>
			<input type="button" id="pause" value="Pause Game" onclick="stopCount()">
			<p><br></p>
			<p><br></p>
			<p><br></p>
			<div class = "matches">
				<p>Matches <br><span id = "matchNumber">0</span></p>
			</div>
		</div>
	</div>
	<footer> </footer>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

您设置的两个变量都显示在HTML范围对象中。

似乎正在发生的情况是，当您重置Javascript变量时，该值正在更改，但显示给用户的span对象将保留其先前的值，直到需要再次更新为止。 / p>

据我所知，你的对象有id：matchNumber和Count分别用于匹配和转换变量。如果是这种情况，请尝试更改代码，以便在变量重置为零时将值重置为零。

例如：

// Reset the Javascript Count
var turns = 0
// Reset the HTML object
document.getElementById('Count').innerHTML = 0;
// Reset the Javascript Match Count
var matches = 0
// Reset the HTML object
document.getElementById('matchNumber').innerHTML = 0;

如果我没有很好地解释这一点，请发表评论，我会进一步澄清。

答案 1 :(得分：0)

我不是百分百肯定，但你可以尝试用这个替换你的功能：

    function timedCount() {
        if(c>10){
           //flipBack();
           resetTime();
           return;
        }
        document.getElementById('txt').value = c;
        c = c+1;
        t = setTimeout(timedCount, 1000);
    }
相关问题
最新问题