{"id":36817,"date":"2018-03-16T03:01:25","date_gmt":"2018-03-15T17:01:25","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=36817"},"modified":"2018-03-14T11:00:32","modified_gmt":"2018-03-14T01:00:32","slug":"run-for-it-dice-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/run-for-it-dice-game-primer-tutorial\/","title":{"rendered":"Run for It Dice Game Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/runforit_dice_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Run for It Dice Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/runforit_dice_game.jpg\" title=\"Run for It Dice Game Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Run for It Dice Game Primer Tutorial<\/p><\/div>\n<p>We hope that you can see by reading the rules of the Dice Game &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Useful webpage, thanks' href='https:\/\/icebreakerideas.com\/dice-games\/#Run_For_It_Dice_Game'>&#8220;Run for It&#8221;<\/a> Dice Game &#8230; compared to (yesterday&#8217;s inspirational) &#8230;<\/li>\n<li><a target=_blank title='Useful webpage, thanks' href='https:\/\/icebreakerideas.com\/dice-games\/#Three_or_More_Dice_Game'>&#8220;Three or More&#8221;<\/a> Dice Game<\/li>\n<\/ul>\n<p> &#8230; you can see our thought patterns in thinking that yesterday&#8217;s <a title='Three or More Dice Game Primer Tutorial' href='#tmdgpt'>Three or More Dice Game Primer Tutorial<\/a> HTML and Javascript and CSS code represented a very <a target=_blank title='Cloneable meaning' href='http:\/\/www.yourdictionary.com\/cloneable'>cloneable<\/a> codeset to start with in order to create today&#8217;s new &#8220;Run for It&#8221; Dice Game.  You can see the comparison at <a target=_blank title='runforit_dice_game.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/runforit_dice_game.html-GETME'>this link<\/a> as to the mechanics of how we did, and approached, this.<\/p>\n<p>And in examining the Linux diff report of that last link, you would have discovered that cloning does not always mean that you create a bigger web application.  Sometimes it is still good to clone from something that needs to be pared back.  But what is important, to make use of a &#8220;cloning&#8221; thought process, is to recognize synergies, the major synergies springing to our mind being &#8230;<\/p>\n<ul>\n<li>both games involve the same 2 to 9 player arrangements<\/li>\n<li>both games ask each player to click one &#8220;shared&#8221; button to roll the dice for each player&#8217;s go in any one round of goes<\/li>\n<li>both games can involve further interaction from the user on seeing what their dice roll is<\/li>\n<\/ul>\n<p> &#8230; represent, to us, so much more &#8220;positive&#8221; synergy that the list of differences countervaling this &#8220;cloning&#8221; enthusiasm &#8230;<\/p>\n<ul>\n<li>we need 5 dice rolls for yesterday&#8217;s game but 6 for today&#8217;s game<\/li>\n<li>we only sometimes &#8220;involve further interaction from the user&#8221; in yesterday&#8217;s game but always &#8220;involve further interaction from the user&#8221; in today&#8217;s game<\/li>\n<\/ul>\n<p> &#8230; and you would, perhaps, have seen that the most &#8220;paring down&#8221; (from the clone) involved that second point above, and that during the &#8220;chiselling away&#8221; of unnecessaries in the code Javascript <a target=_blank title='Javascript if ... else blocks' href='https:\/\/www.w3schools.com\/js\/js_if_else.asp'>if {} else {}<\/a> code blocking (eg. <i>if (1 == 1) { alert(&#8216;Put new code here&#8217;); } else { alert(&#8216;Leave old code in just during unit testing, here&#8217;); }<\/i> ) can come in very handy during unit testing, and then taken away for &#8220;production&#8221; usage purposes, quite easily.  The first point above involved small additions to the code easy to identify by any code involving (global) var<font size=1>iable<\/font> &#8220;d5&#8221;, a couple of code segments of which were copied and pasted to new lines of code just below them, but all &#8220;d5&#8221; was substituted with (newly introduced (global) var<font size=1>iable<\/font>) &#8220;d6&#8221; in those new lines of code.<\/p>\n<p>Yet again, we&#8217;d welcome your <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/runforit_dice_game.html\" title=\"Click picture\">try out<\/a> of this new Run for It Dice Game.  Its HTML and Javascript and CSS underpinning its functionality can be perused by downloading the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/runforit_dice_game.html-GETME\" title=\"runforit_dice_game.html\">runforit_dice_game.html<\/a> link.<\/p>\n<hr>\n<p id='tmdgpt'>Previous relevant <a target=_blank title='Three or More Dice Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/three-or-more-dice-game-primer-tutorial\/'>Three or More Dice Game Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/threeormore_dice_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Three or More Dice Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/threeormore_dice_game.jpg\" title=\"Three or More Dice Game Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Three or More Dice Game Primer Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Knockout Dice Game Primer Tutorial' href='#kdgpt'>Knockout Dice Game Primer Tutorial<\/a> involved a Dice Game for 2 or more players like today&#8217;s &#8220;Three or More Dice Game&#8221;, and that was enough of a synergy to start with that code of yesterday to create today&#8217;s game.<\/p>\n<p>The thing different, though, is that we need a button press for each player on each round of this five dice rolling game, which has similarities with the Gin Rummy Card Game in that you score by achieving runs of similarly denominated dice, that being &#8230;<\/p>\n<ul>\n<li>12 for a run of 5 the same<\/li>\n<li>6 for a run of 4 the same<\/li>\n<li>3 for a run of 3 the same<\/li>\n<\/ul>\n<p> &#8230; as suggested by this <a target=_blank title='Useful webpage, thanks' href='https:\/\/icebreakerideas.com\/dice-games\/#Three_or_More_Dice_Game'>very useful webpage<\/a>, thanks.<\/p>\n<p>And this is where Javascript DOM needs either\/both of <a target=_blank title='Javascript setTimeout timer information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> timer function or the <a target=_blank title='Javascript popup box information from W3schools' href='https:\/\/www.w3schools.com\/js\/js_popup.asp'><i>Javascript popup boxes<\/i><\/a> (allowing for reruns of pairs) to slow down our &#8220;Three or More Dice Game&#8221; web application enough to both show what a player achieved in a round of a game after their roll, as well as showing a button ready for the next player to &#8220;start the dice rolling&#8221; on their turn.  Because client web applications don&#8217;t really have a true &#8220;hang around&#8221; function like serverside PHP does with its <a target=_blank title='PHP sleep function' href='http:\/\/php.net\/manual\/en\/function.sleep.php'>sleep<\/a> function, the Javascript DOM will tumble over itself too fast to register any informational part before the next &#8220;player turn&#8221; part.  Of course, we could have multiple webpage <i>places<\/i> to do this instead, but we rather like the idea of the one central place where the button which rolls the dice is placed.<\/p>\n<p>So try this new <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/threeormore_dice_game.html\" title=\"Click picture\">Three or More Dice Game<\/a> yourself, and please feel free to tell us what you think.  Its HTML and Javascript and CSS underpinning its functionality can be perused by downloading the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/threeormore_dice_game.html_GETME\" title=\"threeormore_dice_game.html\">threeormore_dice_game.html<\/a> link.<\/p>\n<hr>\n<p id='kdgpt'>Previous relevant <a target=_blank title='Knockout Dice Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/knockout-dice-game-primer-tutorial\/'>Knockout Dice Game Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/knockout_dice_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Knockout Dice Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/knockout_dice_game.jpg\" title=\"New Dice Guessing Game Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Knockout Dice Game Primer Tutorial<\/p><\/div>\n<p>Further to the previous <a title='Dice Guessing Game Primer Tutorial' href='#dggpt'>Dice Guessing Game Primer Tutorial<\/a>, today, we have for you another Dice Game, this time &#8230;<\/p>\n<ul>\n<li>a dice game for 2 to 9 players &#8230; which you should establish, as necessary, straight up &#8230;<\/li>\n<li>then rename any player names you don&#8217;t want to be the default <i>Player1<\/i> up to <i>Player9<\/i> values, again, making use of the <a target=_blank title='HTML Global attribute contenteditable information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=&#8221;true&#8221; global HTML attribute and the HTML div element&#8217;s <i>onchange<\/i> event to achieve this<\/li>\n<li>then in each round of competition the players choose a two dice roll value between 6 to 9 as the value they don&#8217;t want to see turn up, because if it does, they score nothing for that round of competition, else the players last not rejected when there is one or no players left, score a point in that round of competition &#8230; and &#8230;<\/li>\n<li>the web application randomly throws the dice the necessary number of times to find winner(s) once the &#8220;Roll the Dice for Each Player&#8221; button is pressed<\/li>\n<\/ul>\n<p>We&#8217;d like to thank the <a target=_blank title='Useful webpage, thanks' href='https:\/\/icebreakerideas.com\/dice-games\/#Knock_Out_Dice_Game_for_Kids'>very useful webpage<\/a> for ideas for how (for the most part) this Knockout Dice Game design, execution and rules should go.<\/p>\n<p>And again, we&#8217;d welcome your <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/knockout_dice_game.html\" title=\"Click picture\">try out<\/a> of this new Knockout Dice Guessing Game, and please feel free to tell us what you think.  Its HTML and Javascript and CSS underpinning its functionality can be perused by downloading the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/knockout_dice_game.html_GETME\" title=\"knockout_dice_game.html\">knockout_dice_game.html<\/a> link.<\/p>\n<hr>\n<p id='dggpt'>Previous relevant <a target=_blank title='Dice Guessing Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/dice-guessing-game-primer-tutorial\/'>Dice Guessing Game Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dice_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Dice Guessing Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dice_game.jpg\" title=\"Dice Guessing Game Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Dice Guessing Game Primer Tutorial<\/p><\/div>\n<p>There are many <a target=_blank title='HTML Entities based on punctuation' href='https:\/\/www.w3schools.com\/charsets\/ref_utf_punctuation.asp'>HTML Entities based around punctuation<\/a> that can add to the means by which you communicate ideas with your web applications.<\/p>\n<p>In today&#8217;s new (up to two player) Dice Game, we use some of these to represent the numbers from 1 to 6 on the faces of the dice, similar to how you may have seen this happen with dice in various games you play, or hanging from your car&#8217;s front visor perhaps?<\/p>\n<p>We&#8217;d welcome your <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dice_game.html\" title=\"Click picture\">try out<\/a> of this Dice Guessing Game, and feel free to tell us what you think (or if its two of you &#8220;tell us what you think&#8221; &#8230; huh?!).  Its HTML and Javascript and CSS underpinning its functionality can be perused by downloading the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dice_game.html_GETME\" title=\"dice_game.html\">dice_game.html<\/a> link.  If you do, you&#8217;ll see the mildly interesting scoring system, that can be explained via the equation &#8230;<\/p>\n<p><code><br \/>\n[CorrectAnswerScoreIncrement] = 7 - (NumberOfPossibilitiesInFull36PossibilitiesSet]<br \/>\n<\/code><\/p>\n<p> &#8230; allowing for the incorporation of this Javascript array initialization &#8230;<\/p>\n<p><code><br \/>\nvar probabilities=[0,0,1,2,3,4,5,6,5,4,3,2,1];  \/\/ score will be 7-guessValue<br \/>\n<\/code><\/p>\n<p> &#8230; that we were capable of working out ourselves but were reassured by the mathematics of this <a target=_blank title='Useful link' href='HTTP:\/\/www.math.hawaii.edu\/~ramsey\/Probability\/TwoDice.html'>very useful link<\/a>, thanks.<\/p>\n<p>Another game thought unique to how we do things that has been introduced today, is that a user can change the default player names, those being <i>Player1<\/i> and <i>Player2<\/i> via an HTML div element utilizing the <a target=_blank title='HTML Global attribute contenteditable information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=&#8221;true&#8221; global HTML attribute to make it look readable, but be also &#8220;quietly&#8221; editable.<\/p>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=_blank title='Dice Guessing Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/dice-guessing-game-primer-tutorial\/'>Dice Guessing Game Primer Tutorial<\/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='#d36761' onclick='var dv=document.getElementById(\"d36761\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/tutorial\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36761' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d36778' onclick='var dv=document.getElementById(\"d36778\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36778' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d36799' onclick='var dv=document.getElementById(\"d36799\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/setTimeout\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36799' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d36817' onclick='var dv=document.getElementById(\"d36817\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/contenteditable\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36817' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We hope that you can see by reading the rules of the Dice Game &#8230; &#8220;Run for It&#8221; Dice Game &#8230; compared to (yesterday&#8217;s inspirational) &#8230; &#8220;Three or More&#8221; Dice Game &#8230; you can see our thought patterns in thinking &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/run-for-it-dice-game-primer-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,14,15,37],"tags":[103,2503,2442,281,2501,342,476,477,576,577,652,752,989,997,2502,1126,2504,1319],"class_list":["post-36817","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-array","tag-clone","tag-contenteditable","tag-css","tag-dice","tag-div","tag-game","tag-games-2","tag-html","tag-html-entities","tag-javascript","tag-mathematics","tag-probability","tag-programming","tag-punctuation","tag-settimeout","tag-synergy","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36817"}],"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=36817"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36817\/revisions"}],"predecessor-version":[{"id":36823,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36817\/revisions\/36823"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=36817"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=36817"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=36817"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}