个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 00:19:18 26 4
gpt4 key购买 nike

我对此很陌生，但在新的内存游戏开始之前，我在尝试将计时器和得分值恢复到 0 时遇到了一些麻烦。这些值确实会重置，但在该值受到影响之前不会显示。例如，匹配数的值永远不会回到 0，它会保持在 10(最大对数)，直到找到下一场游戏的第一场比赛，然后它会变成 1。有谁知道如何当调用新板时让值再次显示 0，而不是在该值受到影响时重置？

我已经设置了

var turns = 0
var matches = 0

并在函数 newBoard() 中将它们作为 0 调用。

我的计时器代码是:

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

我在函数newBoard()中调用了resetTime()函数。

我的完整代码是:

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; }
<!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>

最佳答案

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

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

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

例如:

// 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;

如果我未能很好地解释这一点，请发表评论，我会尽力进一步澄清。

关于javascript - 在新游戏开始前将计时器和得分值重置为 0，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30177913/

26 4 0
文章推荐： c++ - GPU 加速 LK 金字塔中的窗口大小限制
文章推荐： c++ - 将 '65280' 从 'int' 缩小到 { } 内的 'short int'
文章推荐： javascript - 自定义语音输入按钮？
文章推荐： c++ - 表面积/体积
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com