{"id":25795,"date":"2016-10-20T03:01:17","date_gmt":"2016-10-19T17:01:17","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=25795"},"modified":"2016-10-20T19:42:54","modified_gmt":"2016-10-20T09:42:54","slug":"scissors-paper-rock-game-emoji-animated-gif-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/scissors-paper-rock-game-emoji-animated-gif-tutorial\/","title":{"rendered":"Scissors Paper Rock Game Emoji Animated Gif Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scissors_paper_rock_div.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Emoji Random Slideshow Emoji Animated Gif Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scissors_paper_rock_div.jpg\" title=\"Emoji Random Slideshow Emoji Animated Gif Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Scissors Paper Rock Game Emoji Animated Gif Tutorial<\/p><\/div>\n<p>We wanted to show you some more ideas, adding to yesterday&#8217;s <a title='Scissors Paper Rock Game Primer Tutorial' href='#sprgpt'>Scissors Paper Rock Game Primer Tutorial<\/a> as shown below, regarding a &#8220;Scissors, Paper, Rock&#8221; game, as much as anything because it is an exercise in HTML of the selection from a set series of choices, which comes up quite a bit.  We studied this also on the thread of tutorials that finished, so far, with <a target=_blank title='HTML\/Javascript Choice of Two SVG Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-choice-of-two-svg-tutorial\/'>HTML\/Javascript Choice of Two SVG Tutorial<\/a>.<\/p>\n<p>Was thinking to try &#8230;<\/p>\n<ul>\n<li>Emojis &#8230; easy to envisage and easy to do &#8230; and &#8230;<\/li>\n<li>Animated GIF (clicking) &#8230; via make our own via <a target=_blank title='Animated GIF via PHP Writing PHP Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-via-php-writing-php-primer-tutorial\/'>Animated GIF via PHP Writing PHP Primer Tutorial<\/a> and Mac OS X PhotoBooth application, the techniques for which resulted in<br \/>\n<img decoding=\"async\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/s_p_r.gif\" title='Home grown animated GIF'><\/img><br \/>\n &#8230; but we preferred the <a target=_blank title='GIFPAL' href='http:\/\/gifpal.com'>GIFPAL<\/a> created one, where we also made use of some of GIFPAL&#8217;s annotation functionality &#8230; quite cute really &#8230; again, easy to envisage, but it doesn&#8217;t pan out reliable enough on its own &#8230; but &#8220;emoji help to the rescue&#8221; assists today<\/li>\n<\/ul>\n<p>No Object Literal external Javascript for today&#8217;s version, rather just the one piece of HTML and Javascript you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scissors_paper_rock_div.html_GETME\" title='scissors_paper_rock_div.html'>scissors_paper_rock_div.html<\/a> and which has this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scissors_paper_rock_div.html\" title='scissors_paper_rock_div.html' title='Click picture'>live run<\/a> game.<\/p>\n<p>We need some <a target=_blank title='Overlay postings' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>&#8220;overlay&#8221;<\/a> ideas today &#8230; the usual suspects we use, those being &#8230;<\/p>\n<ul>\n<li><a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> property<\/li>\n<li><a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a><\/li>\n<li><a target=_blank title='CSS opacity property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_opacity.asp'>opacity<\/a><\/li>\n<\/ul>\n<p>We hope it sets you to thinking, or playing.<\/p>\n<hr>\n<p id='sprgpt'>Previous0relevant <a target=_blank title='Scissors Paper Rock Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/scissors-paper-rock-game-primer-tutorial\/'>Scissors Paper Rock 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\/scissors_paper_rock.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Emoji Random Slideshow Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scissors_paper_rock.png\" title=\"Emoji Random Slideshow Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Scissors Paper Rock Game Primer Tutorial<\/p><\/div>\n<p>Today&#8217;s web application game you have probably heard of already &#8230; &#8220;Scissors, Paper, Rock&#8221; &#8230; pretty easy game, huh?!   However &#8230; and isn&#8217;t there always an &#8220;eve&#8221; and an &#8220;r&#8221; and a &#8220;How&#8221; now?! &#8230; we &#8230;<\/p>\n<ul>\n<li>know this game doesn&#8217;t make much sense to not be a collaborative game for two, but, nevertheless, try to make it work for the use of the one computer device, shared &#8230;<\/li>\n<li>we write external Javascript in <a target=_blank title='Google Search for Object Literal' href='https:\/\/www.google.com.au\/search?q=Object+Literal&#038;ie=utf-8&#038;oe=utf-8&#038;client=firefox-b-ab&#038;gfe_rd=cr&#038;ei=4-MFWNHjFqfr8AfvxLXACA'>Object Literal<\/a> form &#8230; rather than Dot Notation &#8230; to remind you of its advantages &#8230; especially if you hate global variables &#8230; though I&#8217;m not one of those<\/li>\n<\/ul>\n<p>So what can we do to get towards some of the fun of the way &#8220;Scissors, Paper, Rock&#8221; can be played by two people with their hands, but just using the one piece of computer equipment &#8230; smart alecs saying &#8220;throw away the computer&#8221; &#8230; well &#8230; you score half points &#8230; but sad thing is, the game today doesn&#8217;t accept half points &#8230;. oooooohhhhhhh &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>so<\/a> &#8230; but what we try (and we&#8217;ve tried something similar before with <a target=_blank title='Word Guessing Game for Two Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/word-guessing-game-for-two-primer-tutorial\/'>Word Guessing Game for Two Primer Tutorial<\/a>, which helped strategize the mobile device aspects of today&#8217;s &#8220;Scissors, Paper, Rock&#8221; web application game) is &#8230;<\/p>\n<ul>\n<li>allow keyboard and mouse ways for a player to show what they&#8217;ve selected &#8230; and on laptops this can result in the two being pretty close together &#8230; and &#8230;<\/li>\n<li>making sure they can&#8217;t change their first acceptable decision &#8230; ie. cheat &#8230; but, still and all &#8230;<\/li>\n<li>we&#8217;d prefer the users look away, if they need to, to not cheat, and if that is needed, &#8220;run&#8221; the game in a &#8220;psychological test&#8221; way<\/li>\n<\/ul>\n<p>Guess the proof is in the pudding, so, why don&#8217;t you have a look at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scissors_paper_rock.html_GETME\" title='scissors_paper_rock.html'>scissors_paper_rock.html<\/a>, with its external Javascript Object Literal <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scissors_paper_rock.js_GETME\" title='scissors_paper_rock.js'>scissors_paper_rock.js<\/a>, and then try a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scissors_paper_rock.html\" title='Click picture'>live run<\/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='#d25775' onclick='var dv=document.getElementById(\"d25775\"); 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='d25775' 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='#d25795' onclick='var dv=document.getElementById(\"d25795\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d25795' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We wanted to show you some more ideas, adding to yesterday&#8217;s Scissors Paper Rock Game Primer Tutorial as shown below, regarding a &#8220;Scissors, Paper, Rock&#8221; game, as much as anything because it is an exercise in HTML of the selection &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/scissors-paper-rock-game-emoji-animated-gif-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":[83,354,385,476,477,576,652,849,850,875,927,997,1319],"class_list":["post-25795","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-animated-gif","tag-dom","tag-emoji","tag-game","tag-games-2","tag-html","tag-javascript","tag-object","tag-object-literal","tag-oop","tag-photobooth","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/25795"}],"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=25795"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/25795\/revisions"}],"predecessor-version":[{"id":25810,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/25795\/revisions\/25810"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=25795"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=25795"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=25795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}