{"id":43152,"date":"2019-01-24T03:01:50","date_gmt":"2019-01-23T17:01:50","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=43152"},"modified":"2019-01-24T19:19:24","modified_gmt":"2019-01-24T09:19:24","slug":"fruits-emoji-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/fruits-emoji-game-primer-tutorial\/","title":{"rendered":"Fruits Emoji Game Primer Tutorial"},"content":{"rendered":"<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","protected":false},"excerpt":{"rendered":"<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; CSS &#8230; and &#8230; SVG &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/fruits-emoji-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,37],"tags":[103,281,354,385,476,477,562,576,652,997,2232,1953,2815],"class_list":["post-43152","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-array","tag-css","tag-dom","tag-emoji","tag-game","tag-games-2","tag-hexadecimal","tag-html","tag-javascript","tag-programming","tag-property","tag-selector","tag-tutorial-table"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43152"}],"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=43152"}],"version-history":[{"count":12,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43152\/revisions"}],"predecessor-version":[{"id":43170,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43152\/revisions\/43170"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=43152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=43152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=43152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}