javascript - Resetting timer and score values to 0 before a new game starts -
im new i've been having trouble trying timer , score values 0 before new game of memory starts. values reset, don't show until value affected. example, value number of matches never goes 0, stays on 10(the max number of pairs) until find first match of next game turn 1. know how values show 0 again when new board called instead of resetting when value affected?
i have set
var turns = 0 var matches = 0 and called in them 0 in 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 = 0where have called resettime() function in 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); /* safari 5.1 6.0 */ background: -o-linear-gradient(#99ccff, #fff); /* opera 11.1 12.0 */ background: -moz-linear-gradient(#99ccff, #fff); /* firefox 3.6 15 */ background: linear-gradient(#99ccff, #fff); /* standard syntax (must last) */ } div#memory_board{ background: -webkit-radial-gradient(#fff, #cc99ff); /* safari 5.1 6.0 */ background: -o-radial-gradient(#fff, #cc99ff); /* opera 11.1 12.0 */ background: -moz-radial-gradient(#fff, #cc99ff); /* firefox 3.6 15 */ background: radial-gradient(#fff, #cc99ff); /* standard syntax (must 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 = 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 = 0; < 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 see if whole board 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 2 tiles on 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 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>
both of variables settings displayed in html span objects.
what seems happening when reset javascript variable, value being changed, span object displayed user being left @ previous value until needs updated again.
as far can tell, objects have ids: matchnumber , count match , turn variables respectively. if case, try changing code reset values 0 in html when variables reset zero.
for example:
// reset javascript count var turns = 0 // reset html object document.getelementbyid('count').innerhtml = 0; // reset javascript match count var matches = 0 // reset html object document.getelementbyid('matchnumber').innerhtml = 0; if failed explain well, please comment , i'll try clarify further.
Comments
Post a Comment