{"id":52969,"date":"2021-08-10T03:01:47","date_gmt":"2021-08-09T17:01:47","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=52969"},"modified":"2021-08-10T16:04:13","modified_gmt":"2021-08-10T06:04:13","slug":"emoji-in-sector-game-mobile-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-in-sector-game-mobile-tutorial\/","title":{"rendered":"Emoji in Sector Game Mobile Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji in Sector Game Mobile Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/emoji_in_sector_mobile.jpg\" title=\"Emoji in Sector Game Mobile Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji in Sector Game Mobile Tutorial<\/p><\/div>\n<p>We&#8217;ve bitten the bullet!  We admit, for mobile platforms, involving the keyboard in any programmatic way, is difficult to work.  And so, yesterday&#8217;s <a title='Emoji in Sector Game Resize Tutorial' href='#esgrt'>Emoji in Sector Game Resize Tutorial<\/a>&#8216;s web application has had two changes &#8230;<\/p>\n<ul>\n<li>for mobile platforms (or when there are more than 2 players), offer grid cell clicks as a new (additional) player modus operandi &#8230;<br \/>\n<code><br \/>\n  if (eval('' + numplayers) > 2 || navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n    ocb=\" onclick=append(this); \";<br \/>\n    octb=\" onclick=append(this); \";<br \/>\n    via=' grid cell clicks below';<br \/>\n  }<br \/>\n<\/code>\n<\/li>\n<li>default game speed is that &#8220;Difficult&#8221; one we&#8217;ve started with but slow the emojis down in &#8220;Easier&#8221; and &#8220;Easy&#8221; new game modes of use<\/li>\n<li>two player game button options now allow for &#8220;onmouseover&#8221; usage (for your non-mobile players)<\/li>\n<\/ul>\n<p> &#8230; applied to it for today&#8217;s improvements.<\/p>\n<p>Yet again, feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html--GETME\" title=\"emoji_in_sector.html\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html--GETME\" title=\"emoji_in_sector.html\">emoji_in_sector.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-in-sector-game-mobile-tutorial\/'>Emoji in Sector Game Mobile Tutorial<\/a>.<\/p-->\n<hr>\n<p id='esgrt'>Previous relevant <a target=_blank title='Emoji in Sector Game Resize Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-in-sector-game-resize-tutorial\/'>Emoji in Sector Game Resize 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\/emoji_in_sector.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji in Sector Game Resize Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/emoji_in_sector_resize.jpg\" title=\"Emoji in Sector Game Resize Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji in Sector Game Resize Tutorial<\/p><\/div>\n<p>We find the &#8220;onresize&#8221; event one of the most interesting to code for with web applications.  It can be a minor tweak right through to scenarios where it is just too hard not to &#8230;<\/p>\n<p><code><br \/>\nlocation.href=document.URL;  \/\/ the onresize coward's way out<br \/>\n<\/code><\/p>\n<p>.  And so, onto yesterday&#8217;s <a title='Emoji in Sector Game Primer Tutorial' href='#esgpt'>Emoji in Sector Game Primer Tutorial<\/a> we have a reasonably complex scenario catering for this &#8220;web browser window size change via user means&#8221; event (logic) &#8230; HTML <font color=blue>change<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;body onload='wwt=window.innerHeight; onl();' onkeypress=\"vslast(event);\"<font color=blue> onresize=\"pretwf();\"<\/font>&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; using Javascript &#8220;onresize&#8221; event logic &#8230;<\/p>\n<p><code><br \/>\nfunction pretwf() {<br \/>\n  myt=null;<br \/>\n  myz=null;<br \/>\n  thetds=[];<br \/>\n  thetdareas=[];<br \/>\n  \/\/thetdids=[];<br \/>\n  \/\/theclasses=[];<br \/>\n  thels=[];<br \/>\n  thets=[];<br \/>\n  thegridtdareas=[];<br \/>\n  thegridtdihs=[];<br \/>\n  obr=true;<br \/>\n  document.getElementById('emj').innerHTML='';<br \/>\n  for (var iij=0; iij&lt;numplayers; iij++) {<br \/>\n  document.getElementById('t' + iij).style.height='calc(60vh ' + ('- ' + eval(wwt - window.innerHeight)).replace('- -','+ ') + 'px)';<br \/>\n  }<br \/>\n  setTimeout(twf, 700);<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Adding to our interest <font size=1>(and smug satisfaction, let&#8217;s face it)<\/font> is anytime we can involve CSS <a target=_blank title='CSS3 calc information' href='https:\/\/www.htmlgoodies.com\/html5\/css\/using-the-css3-calc-function.html'>calc<\/a> and the height <a target=_blank title='CSS vh unit' href='https:\/\/www.google.com\/search?q=vh+unit+css&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=vh+unit+css&#038;aqs=chrome.0.0i512j0i22i30l2.4356j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>vh<\/a> unit.<\/p>\n<p>Again, feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html-GETME\" title=\"emoji_in_sector.html\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html-GETME\" title=\"emoji_in_sector.html\">emoji_in_sector.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-in-sector-game-resize-tutorial\/'>Emoji in Sector Game Resize Tutorial<\/a>.<\/p-->\n<hr>\n<p id='esgpt'>Previous relevant <a target=_blank title='Emoji in Sector Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-in-sector-game-primer-tutorial\/'>Emoji in Sector 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\/emoji_in_sector.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji in Sector Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/emoji_in_sector.jpg\" title=\"Emoji in Sector Game Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji in Sector Game Primer Tutorial<\/p><\/div>\n<p>We&#8217;re continuing on with the <i>&#8220;style=position:fixed&#8221;<\/i> theme of recent times.  We&#8217;ve got for you a first draft of a &#8220;reactions game&#8221; called &#8220;Emojis in Section&#8221; where up to 5 players are presented with &#8230;<\/p>\n<ul>\n<li>a 5&#215;5 grid of interest for each (up to five) player(s)<\/li>\n<li>overlayed by a fast moving fruit emoji <font siez=1>(as you would)<\/font> via <i>&#8220;style=position:fixed&#8221;<\/i> &#8230; and &#8230;<\/li>\n<li>the player scores by timing their nomination of a grid rectangle letter name with when the fruit emoji is within that grid rectangle, else use &#8220;z&#8221; for the slivers of area not within the grid rectangles<\/li>\n<\/ul>\n<p>Just the one computer or device, so how can two or more (we allow for up to five) play?   Well, on non-mobile we allow a button press versus keyboard paradigm for a two player game, else all keyboard accesses for users.  We&#8217;ll see about other scenarios as the days go on.<\/p>\n<p>Feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html_GETME\" title=\"emoji_in_sector.html\">emoji_in_sector.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_in_sector.html\" title=\"Click picture\">live run<\/a> link.<\/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='#d52953' onclick='var dv=document.getElementById(\"d52953\"); 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='d52953' 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='#d52953' onclick='var dv=document.getElementById(\"d52953\"); 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='d52953' 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='#d52969' onclick='var dv=document.getElementById(\"d52969\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mobile\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52969' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve bitten the bullet! We admit, for mobile platforms, involving the keyboard in any programmatic way, is difficult to work. And so, yesterday&#8217;s Emoji in Sector Game Resize Tutorial&#8216;s web application has had two changes &#8230; for mobile platforms (or &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-in-sector-game-mobile-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":[626,630,631,673,3720,795,871,885,2766,2013,1294,1319],"class_list":["post-52969","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-ios","tag-ipad","tag-iphone","tag-keyboard","tag-keyborad-split","tag-mobile","tag-onmouseover","tag-operating-system-2","tag-setting","tag-split","tag-touch","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52969"}],"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=52969"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52969\/revisions"}],"predecessor-version":[{"id":52977,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52969\/revisions\/52977"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=52969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=52969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=52969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}