javascript - play animation on matching pairs in memory game -
i'm creating memory game web assignment @ uni , stuck on how animation playing on match on top of cards match. @ moment, have been able animation play on click of memory_board div, works once.
so question 1 - how animation work every time click on memory_board div.(it works once atm, , have refresh page play again)
my code animation work is:
.sprite { width:96px; height:96px; position: relative; margin:15px; } .toon{ background: url(explode.png); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type='text/javascript' src='jquery.animatesprite.js'></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> <body> <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> </body>question 2 - how place animation on top of each card?
the layout of board float in memory_boarddiv, images in array , called in function tile.innerhtml = '<img src="' + val + '.png"/>';
here full coding board:
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; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!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> //developphp.com tutorial 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; document.getelementbyid('count').innerhtml = 0; matches = 0; document.getelementbyid('matchnumber').innerhtml = 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); } } } } </script> <body> <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> </body>question 3 - how play animation on match, on top of cards have matched.
i'm guessing done putting memoryfliptile function under //animation sound , match number change upon match found :
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 = []; }in case these snippets confusing , want whole picture, here full script:
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> //developphp.com tutorial 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; document.getelementbyid('count').innerhtml = 0; matches = 0; document.getelementbyid('matchnumber').innerhtml = 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 document.getelementbyid('txt').value = 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 developphp.com tutorial 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>
Comments
Post a Comment