Resetting timer and score values to 0 before a new game starts

1
votes

Im new to this but I've been having some trouble with trying to get my timer and score values back to 0 before a new game of memory starts. The values do reset, but don't show it until that value is affected. For example, the value for the number of matches never goes back to 0, it stays on 10(the max number of pairs) until you find the first match of the next game where it will then turn to 1. Does anybody know how to get the values to show 0 again when a new board is called up instead of just resetting when that value is affected?

I have already set

var turns = 0
var matches = 0

and called in them up as 0 in the function newBoard().

My timer code is:

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

Where I have called up the resetTime() function in the function newBoard().

My full code is:

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>
2
javascripttimerreset

2 Answers

1
votes

Both of the variables you are settings are displayed in HTML span objects.

What seems to be happening is that when you reset the Javascript variable, the value is being changed, but the span object where it is displayed to the user is being left at its previous value until it needs to be updated again.

As far as I can tell, your objects have the ids: matchNumber and Count for the match and turn variables respectively. If this is the case, try changing your code to reset the values to zero in the HTML when the variables are reset to zero.

For example:

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

If I failed to explain this well, please comment and I'll try to clarify further.

0
votes

I am not 100% sure, but you can try replacing your function with this one:

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