{"id":6367,"date":"2014-02-15T05:01:28","date_gmt":"2014-02-14T18:01:28","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=6367"},"modified":"2014-02-15T05:01:28","modified_gmt":"2014-02-14T18:01:28","slug":"htmljavascript-egg-timer-game-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-egg-timer-game-tutorial\/","title":{"rendered":"HTML\/Javascript Egg Timer Game Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/EggTimerGame\/\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Egg Timer Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/EggTimerGame\/EggTimerGame.jpg\" title=\"HTML\/Javascript Egg Timer Game Game Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Egg Timer Game Tutorial<\/p><\/div>\n<p>Javascript includes two very useful timer functions called <a target=_blank title='setTimeout' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'>setTimeout<\/a> and <a target=_blank title='setInterval' href='http:\/\/www.w3schools.com\/jsref\/met_win_setinterval.asp'>setInterval<\/a> which, respectively, fork off functionality after a time period once and continuously.<\/p>\n<p>Today we use setInterval as the basis of an Egg Timer game.   Did you ever teach yourself to count in exact seconds? &#8230; via methods like &#8230; <i>&#8220;one little second&#8221;, &#8220;two little seconds&#8221;<\/i> or the simpler <i>&#8220;one second&#8221;, &#8220;two seconds&#8221;<\/i> or by listening to (your very healthy, congratulations) heartbeat going at one beat per second? &#8230; anyway, you&#8217;ll need to have some such method to succeed at this game.<\/p>\n<p>Hopefully you can figure the rules when you click the picture above for a <a target=_blank title=\"live run\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/EggTimerGame\/\">live run<\/a>, or know that the Egg Timer is initially at some number in its run from 0 to 99 inclusive (and then it starts back at 0 again), and this is shown to you briefly at the start.   Also at the start is the Egg Timer position the computer wants you to match when you decide to hit that bottom green guessing button, and you have to be spot on here!   You are allowed to peek at the, usually, hidden Egg Timer position, but you have to wait at least 10 seconds between each <i>&#8220;Peek&#8221;<\/i>.<\/p>\n<p>Anyway, see how you go with this game of patience and nerve!<\/p>\n<p>Here is a link to some downloadable HTML (with Javascript) programming code you could rename to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/EggTimerGame\/eggtimer_guess.html_GETME\" title=\"eggtimer_guess.html\">eggtimer_guess.html<\/a><\/p>\n<p>Thanks to <a target=_blank title='Pixabay' href='http:\/\/pixabay.com\/en\/hourglass-clock-time-sand-run-out-9490\/'>Pixabay<\/a> for their very generous free <a target=_blank title='Clip Art information from Wikipedia' href='http:\/\/en.wikipedia.org\/wiki\/Clip_art'>Clip Art<\/a>.<\/a><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d6367' onclick='var dv=document.getElementById(\"d6367\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=44\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d6367' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Javascript includes two very useful timer functions called setTimeout and setInterval which, respectively, fork off functionality after a time period once and continuously. Today we use setInterval as the basis of an Egg Timer game. Did you ever teach yourself &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-egg-timer-game-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,15,37],"tags":[476,576,652,997,1125,1126,1282,1319],"class_list":["post-6367","post","type-post","status-publish","format-standard","hentry","category-elearning","category-games","category-tutorials","tag-game","tag-html","tag-javascript","tag-programming","tag-setinterval","tag-settimeout","tag-timer","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/6367"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=6367"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/6367\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=6367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=6367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=6367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}