{"id":43180,"date":"2019-01-25T03:01:10","date_gmt":"2019-01-24T17:01:10","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=43180"},"modified":"2019-01-25T10:23:44","modified_gmt":"2019-01-25T00:23:44","slug":"fruits-emoji-multiple-player-game-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/fruits-emoji-multiple-player-game-tutorial\/","title":{"rendered":"Fruits Emoji Multiple Player Game Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fruits.html?numplayers=2\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Fruits Emoji Multiple Player Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fruit_talk.jpg\" title=\"Fruits Multiple Player Game Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Fruits Emoji Multiple Player Game Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Fruits Emoji Game Primer Tutorial' href='#fegpt'>Fruits Emoji Game Primer Tutorial<\/a> was a prototype version of a fairly simple quiz presenting Emoji &#8220;p&#8221; Fruit elements to aid with quizzing the user for an English answer.  That &#8220;English&#8221; limitation still applies after today&#8217;s developments, and we&#8217;ll think about if we can refine that limitation.<\/p>\n<p>We wanted to come at allowing this Fruits Quiz Game be able to be played by more than one user, but still restricting the thoughts to playing on the one device, and came at it from two different &#8220;takes&#8221; on this, those being &#8230;<\/p>\n<ol>\n<li>for two players, on non-mobile platforms, we encourage the &#8230;\n<ul>\n<li>first user uses the device keyboard, all possible because on non-mobile platforms, HTML input type=text elements can be focussed on &#8230;<br \/>\n<code><br \/>\n    if (numplayers == 2) {<br \/>\n      document.getElementById('i0').focus();<br \/>\n    }<br \/>\n<\/code><br \/>\n &#8230; while we encourage the &#8230;\n<\/li>\n<li>second user uses the mouse to click on letter (of the alphabet) buttons (and which you can try yourself at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fruits.html?numplayers=2\" title=\"Click picture\">this two player live run<\/a> link)<\/li>\n<\/ul>\n<\/li>\n<li>for more than two players, on non-mobile platforms, using the Google Chrome web browser we call on the <a target=_blank title='Google' href='https:\/\/google.com'>Google<\/a> brilliance with <a target=_blank title='Google Speech to Text' href='https:\/\/www.google.com\/intl\/en\/chrome\/demos\/speech.html'>Speech to Text<\/a> functionality that we talked about in the blog posting thread featuring <a target=_blank title='Contextualize Speech to Text to Speech LibreOffice Template Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/contextualize-speech-to-text-to-speech-libreoffice-template-tutorial\/'>Contextualize Speech to Text to Speech LibreOffice Template Tutorial<\/a> involving changes to three codesets as per &#8230;\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fruits.html-GETME\" title=\"fruits.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fruits.html-GETME\" title=\"fruits.html\">fruit.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fruits.html\" title=\"Click picture\">live run<\/a> link (for you to try yourself)<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ConfirmWindow\/animal_categorization.html---GETME\" title=\"animal_categorization.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ConfirmWindow\/animal_categorization.html---GETME\" title=\"animal_categorization.html\">animal_categorization.html<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/speech_supervisor.php-----------------GETME\" title=\"speech_supervisor.php\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/speech_supervisor.php-----------------GETME\" title=\"speech_supervisor.php\">speech_supervisor.php<\/a> (with Google <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/speech_supervisor.php\" title=\"speech_supervisor.php\">Speech to Text logic<\/a>)<\/li>\n<\/ul>\n<p> &#8230; which if apt for you, you could try with this <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/speech_supervisor.php?mode=03\" title=\"Multiple user Speech to Text Fruits Quiz Game\">Google Chrome Fruits Quiz Game for up to five players using Speech to Text (in English)<\/a> methodologies\n<\/li>\n<\/ol>\n<p>A design feature we used and implemented today, for the first time that we can recall, was the idea of an HTML select (dropdown) element option that flashes (effectively an animation), so that one of its option subelements toggles between two sets of its &#8230;<\/p>\n<ol>\n<li>value<\/li>\n<li>text (ie. its labelling)<\/li>\n<\/ol>\n<p> &#8230; at <b>five second<\/b> intervals (in the PHP codeline) &#8230;<\/p>\n<p><code><br \/>\n  $orig_qlabels='\"' . $qone . '\",\"Tongue Twisters\",\"Haiku\",\"Animal Categorization<b>|Fruit<\/b>\",\"Vocabulary Phrases\",\"Hangman\",\"Survey or LibreOffice Template\",\"Curriculum Vitae\",\"Agenda\"';<br \/>\n<\/code><\/p>\n<p> &#8230; referenced <b>below<\/b> (in Javascript code (written by the PHP)) &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n          var orig_modes=[&lt;?php echo $orig_qlabels; ?&gt;];<br \/>\n          <b>var specselbit=-1;<\/b><br \/>\n<br \/>\n        function dds(qwhat) {<br \/>\n        \/\/ more<br \/>\n        \/\/ code<br \/>\n        \/\/ up above<br \/>\n          for (var iselbit=1; iselbit&lt;orig_modes.length; iselbit++) {<br \/>\n           if (mode == iselbit) {<br \/>\n            <b>if (orig_modes[iselbit].split('|')[0] != orig_modes[iselbit] && document.URL.indexOf('mode=0') != -1) {<br \/>\n            selbit=selbit.replace(\"&lt;\/select&gt;\", \"&lt;option value='0\" + iselbit + \"' selected&gt;\" + orig_modes[iselbit].split('|')[1] + \"&lt;\/option&gt;&lt;\/select&gt;\");<br \/>\n            } else if (orig_modes[iselbit].split('|')[0] != orig_modes[iselbit]) {<br \/>\n            selbit=selbit.replace(\"&lt;\/select&gt;\", \"&lt;option value=\" + iselbit + \" selected&gt;\" + orig_modes[iselbit].split('|')[0] + \"&lt;\/option&gt;&lt;\/select&gt;\");<br \/>\n            } else {<\/b><br \/>\n            selbit=selbit.replace(\"&lt;\/select&gt;\", \"&lt;option value=\" + iselbit + \" selected&gt;\" + orig_modes[iselbit].split('|')[0] + \"&lt;\/option&gt;&lt;\/select&gt;\");<br \/>\n            <b>}<\/b><br \/>\n           } else {<br \/>\n            <b>if (orig_modes[iselbit].split('|')[0] != orig_modes[iselbit] && document.URL.indexOf('mode=0') != -1) {<br \/>\n            specselbit=iselbit;<br \/>\n            selbit=selbit.replace(\"&lt;\/select&gt;\", \"&lt;option id=origopt value='0\" + iselbit + \"'&gt;\" + orig_modes[iselbit].split('|')[1] + \"&lt;\/option&gt;&lt;\/select&gt;\");<br \/>\n            setTimeout(togglesel, 5000);<br \/>\n            } else if (orig_modes[iselbit].split('|')[0] != orig_modes[iselbit]) {<br \/>\n            specselbit=iselbit;<br \/>\n            selbit=selbit.replace(\"&lt;\/select&gt;\", \"&lt;option id=origopt value='\" + iselbit + \"'&gt;\" + orig_modes[iselbit].split('|')[0] + \"&lt;\/option&gt;&lt;\/select&gt;\");<br \/>\n            setTimeout(togglesel, 5000);<br \/>\n            } else {<\/b><br \/>\n            selbit=selbit.replace(\"&lt;\/select&gt;\", \"&lt;option value=\" + iselbit + \"&gt;\" + orig_modes[iselbit].split('|')[0] + \"&lt;\/option&gt;&lt;\/select&gt;\");<br \/>\n            <b>}<\/b><br \/>\n           }<br \/>\n          }<br \/>\n        \/\/ more<br \/>\n        \/\/ code<br \/>\n        \/\/ down below<br \/>\n        }<br \/>\n<br \/>\n        <b>function togglesel() {<br \/>\n          if (document.getElementById('origopt')) {<br \/>\n            if (document.getElementById('origopt').innerHTML == orig_modes[specselbit].split('|')[0]) {<br \/>\n              document.getElementById('origopt').value='0' + specselbit;<br \/>\n              document.getElementById('origopt').innerHTML=orig_modes[specselbit].split('|')[1];<br \/>\n            } else {<br \/>\n              document.getElementById('origopt').value='' + specselbit;<br \/>\n              document.getElementById('origopt').innerHTML=orig_modes[specselbit].split('|')[0];<br \/>\n            }<br \/>\n          }<br \/>\n          setTimeout(togglesel, 5000);<br \/>\n        }<\/b><br \/>\n&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; which we chose to do so as not to lose touch with how the aims of today&#8217;s work closely matched those of that &#8220;Animal Categorizations&#8221; web application as changed when we presented <a target=_blank title='Contextualize Speech to Text to Speech LibreOffice Template Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/contextualize-speech-to-text-to-speech-libreoffice-template-tutorial\/'>Contextualize Speech to Text to Speech LibreOffice Template Tutorial<\/a>.<\/p>\n<hr>\n<p id='fegpt'>Previous relevant <a target=_blank title='Fruits Emoji Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/fruits-emoji-game-primer-tutorial\/'>Fruits Emoji 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\/fruits.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Fruits Emoji Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fruits.jpg\" title=\"Fruits Emoji Game Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Fruits Emoji Game Primer Tutorial<\/p><\/div>\n<p>Recently, apart from a couple of Animated GIF creation tweaks, we&#8217;ve been on a bit of a roll not asking for very much realia in terms of media.  We&#8217;ve been using a combination of &#8230;<\/p>\n<ul>\n<li>CSS &#8230; and &#8230;<\/li>\n<li><a target=_blank title='SVG information from w3schools' href='https:\/\/www.w3schools.com\/graphics\/svg_intro.asp'>SVG<\/a><\/li>\n<li>Emojis<\/li>\n<\/ul>\n<p> &#8230; to get by, and the relief is palpable for this graphically challenged developer.  Today, we&#8217;ve written a game we&#8217;re going to call &#8220;Fruits&#8221; which is a guessing game for up to 5 players, presenting the players a big (font-size: 94px) fruit Emoji that they have to guess a name for, in order to score.<\/p>\n<p>In actuality, it is coded, up to now, to really only suit a single player, but tomorrow we&#8217;ll be dealing with some of those thoughts regarding multi-player usage.  Perhaps you can guess what we are going to try to organize?!<\/p>\n<p>Emojis creation can be organized pretty easily via two (at least) HTML and CSS and Javascript coded approaches, that being, in our minds &#8230;<\/p>\n<ol>\n<li>CSS and defined <b>class<\/b> and using <a target=_blank title='CSS ::after selector information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/sel_after.asp'>::after<\/a> selector, <a target=_blank title='CSS content: property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_gen_content.asp'>content:<\/a> property usage, such as &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n .banana::after {<br \/>\n    content: '<b>\\01f34c<\/b>';<br \/>\n }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><br \/>\n &#8230; then use HTML like &#8230;<br \/>\n&lt;p class=&#8217;banana&#8217;&gt;&lt;\/p&gt;\n<\/li>\n<li>Javascript and defined <b>ID<\/b> with usage, such as &#8230;<br \/>\n<code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n   document.getElementById('id_banana').innerHTML='&amp;' + '#' + '<b>127820<\/b>' + ';';<br \/>\n }<br \/>\n&lt;\/script&gt;<br \/>\n<\/code><br \/>\n &#8230; working in tandem with some HTML like &#8230;<br \/>\n&lt;p id=&#8217;id_banana&#8217;&gt;&lt;\/p&gt;\n<\/li>\n<\/ol>\n<p> &#8230; today us opting for the former (CSS) method.<\/p>\n<p>In terms of this, where did we go on the &#8220;net&#8221; researching this?   Well &#8230;<\/p>\n<ol>\n<li><a target=_blank title='Iemoji' href='https:\/\/www.iemoji.com'>Iemoji<\/a> is great at categorizations of Emojis into their &#8220;cheat sheets&#8221;, and the links from there could be used, but we preferred to feed into &#8230;<\/li>\n<li><a target=_blank title='Google' href='https:\/\/www.google.com'>Google<\/a> a search string (straight into the address bar (if Google is your default search engine, that is)) &#8220;banana fileformat&#8221; &#8230; getting to the wonderful &#8230;<br \/>\n<blockquote cite='https:\/\/www.google.com\/search?q=banana+fileformat&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=banana+fileformat&#038;aqs=chrome..69i57j35i39j0l4.5184j0j4&#038;sourceid=chrome&#038;ie=UTF-8'><p>\nUnicode Character &#8216;BANANA&#8217; (U+<b>1F34C<\/b>) &#8211; FileFormat.Info<br \/>\nhttps:\/\/www.fileformat.info\/info\/unicode\/char\/1f34c\/index.htm\n<\/p><\/blockquote>\n<p> &#8230; where you find the suffix to a <b>\\[HTML Entity (hex) bits after &amp;#x and before ; that left zero pad out to 6 characters]<\/b> in the CSS definition &#8230; and if you go to that link above &#8230;\n<\/li>\n<li><a target=_blank title='FileFormat banana emoji information' href='https:\/\/www.fileformat.info\/info\/unicode\/char\/1f34c\/index.htm'>FileFormat<\/a> banana emoji information page part we look for for Javascript work is down at HTML Entity (decimal) value of &amp;#<\/b>127820<\/b>;<\/li>\n<\/ol>\n<p> &#8230; the coding (data structure) conduit to the use of this information being &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>anyone, anyone<\/a>? &#8230; yes, Groucho Marx &#8230; arrays as long as any Cuban cigars (of the singular dimension variety) you can think of &#8230;<\/p>\n<p><code><br \/>\n  function another() {<br \/>\n    var i, j, xcrowd='';<br \/>\n    for (i=0; i&lt;numplayers; i++) {<br \/>\n      j=<a target=_blank title='Javascript Math.floor() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_floor.asp'>Math.floor<\/a>(<a target=_blank title='Javascript Math.random() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_random.asp'>Math.random()<\/a> * classes.length);<br \/>\n      answers[i]=classes[j].replace(\/_\/g, ' ');<br \/>\n      xcrowd+='&lt;td style=vertical-align:top; id=td' + i + '&gt;&lt;p id=d' + i + ' class=' + classes[j] + '&gt;&lt;\/p&gt;&lt;\/td&gt;';<br \/>\n    }<br \/>\n    document.getElementById('trd').innerHTML=xcrowd;<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; exemplified in Javascript (DOM) code above that creates a table row (tr) contents of table cells (td) for each player consisting of (CSS style) Emoji &#8220;p&#8221; element definitions, that you can see with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fruits.html_GETME\" title=\"fruits.html\">fruit.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fruits.html\" title=\"Click picture\">live run<\/a> link for you to try yourself.<\/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='#d43152' onclick='var dv=document.getElementById(\"d43152\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/search-engine\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43152' 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='#d43180' onclick='var dv=document.getElementById(\"d43180\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/multiple\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43180' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Fruits Emoji Game Primer Tutorial was a prototype version of a fairly simple quiz presenting Emoji &#8220;p&#8221; Fruit elements to aid with quizzing the user for an English answer. That &#8220;English&#8221; limitation still applies after today&#8217;s developments, and we&#8217;ll &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/fruits-emoji-multiple-player-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,14,15,37],"tags":[103,174,281,354,367,385,448,476,477,513,562,576,652,2092,997,2232,1866,1953,2553,2815],"class_list":["post-43180","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-array","tag-button","tag-css","tag-dom","tag-dropdown","tag-emoji","tag-focus","tag-game","tag-games-2","tag-google","tag-hexadecimal","tag-html","tag-javascript","tag-multiple","tag-programming","tag-property","tag-select","tag-selector","tag-speech-to-text","tag-tutorial-table"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43180"}],"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=43180"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43180\/revisions"}],"predecessor-version":[{"id":43191,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43180\/revisions\/43191"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=43180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=43180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=43180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}