{"id":47232,"date":"2019-11-24T03:01:33","date_gmt":"2019-11-23T17:01:33","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=47232"},"modified":"2019-11-23T13:00:33","modified_gmt":"2019-11-23T03:00:33","slug":"mobile-swipe-gesture-name-game-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-name-game-tutorial\/","title":{"rendered":"Mobile Swipe Gesture Name Game Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Mobile Swipe Gesture Name Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures_name_game.jpg\" title=\"Mobile Swipe Gesture Name Game Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Mobile Swipe Gesture Name Game Tutorial<\/p><\/div>\n<p>Today&#8217;s extension of mobile device &#8220;swipe gesture&#8221; event functionality onto yesterday&#8217;s <a title='Mobile Swipe Gesture Detection Primer Tutorial' href='#msgdpt'>Mobile Swipe Gesture Detection Primer Tutorial<\/a> is to turn the &#8220;proof of concept&#8221; feel into an optional Name Game for Two Players web application.<\/p>\n<p>In this Name Game a &#8230;<\/p>\n<ul>\n<li>first player asks the second player to turn away &#8230;<\/li>\n<li>first player starts up <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html-GETME\" title=\"Click picture\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html-GETME\" title=\"mobile_gestures.htm\">mobile_gestures.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\" title=\"Click picture\">Two Player Name Game<\/a> &#8230;<\/li>\n<li>first player clicks the one button of the web application, and, in so doing &#8230;<\/li>\n<li>first player is prompted for a user entry such as &#8230;<br \/>\n<code><br \/>\n[1,2,3,4] Cate<br \/>\n<\/code><br \/>\n &#8230; as an example to have second player Cate be sent to [URL1, URL2, URL3, URL4] as Cate respectively swipes [Up, Down, Left, Right] &#8230; noting here that first player can define their own URL suggestions where any &#8220;~&#8221; character is replaced by the second player&#8217;s name &#8230; and then &#8230;<\/li>\n<li>first player calls in second player so that &#8230;<\/li>\n<li>second player swipes wherever they wish &#8230; and depending on swipe type &#8230;<\/li>\n<li>second player can see the first player&#8217;s (tailored) surprises as they play (and swipe)<\/li>\n<\/ul>\n<p>Pretty simple game, huh?!<\/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\/mobile-swipe-gesture-name-game-tutorial\/'>Mobile Swipe Gesture Name Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='msgdpt'>Previous relevant <a target=_blank title='Mobile Swipe Gesture Detection Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-detection-primer-tutorial\/'>Mobile Swipe Gesture Detection 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\/mobile_gestures.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Mobile Swipe Gesture Detection Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.jpg\" title=\"Mobile Swipe Gesture Detection Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Mobile Swipe Gesture Detection Primer Tutorial<\/p><\/div>\n<p>Have you ever been curious about &#8220;the behind the scenes&#8221; detection of &#8220;swipe&#8221; gestures on mobile platforms, whether that be&#8230;<\/p>\n<ul>\n<li>swipe right<\/li>\n<li>swipe left<\/li>\n<li>swipe down<\/li>\n<li>swipe up<\/li>\n<\/ul>\n<p>?  The answer for us is &#8220;yes&#8221;.  So we decided to start down a road of discovery largely with the help of <a target=_blank title='Swipe advice, thanks' href='https:\/\/stackoverflow.com\/questions\/2264072\/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android'>this useful link<\/a>, thanks.<\/p>\n<p>This research led us to write an &#8220;in all innocence&#8221; &#8220;proof of concept&#8221; &#8220;gesture playground&#8221; HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html_GETME\" title=\"mobile_gestures.html\">mobile_gestures.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html\" title=\"Click picture\">live run<\/a> for you to swipe away, and be detected!  It may be all you need to dive into some mobile web application development!<\/p>\n<p><!--p>You can also see this play out at WordPressa 4.1.1's <a target=_blank title='Mobile Swipe Gesture Detection Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-detection-primer-tutorial'>Mobile Swipe Gesture Detection 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='#d47228' onclick='var dv=document.getElementById(\"d47228\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/swipe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47228' 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='#d47232' onclick='var dv=document.getElementById(\"d47232\"); 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='d47232' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today&#8217;s extension of mobile device &#8220;swipe gesture&#8221; event functionality onto yesterday&#8217;s Mobile Swipe Gesture Detection Primer Tutorial is to turn the &#8220;proof of concept&#8221; feel into an optional Name Game for Two Players web application. In this Name Game a &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-name-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,37],"tags":[400,476,485,576,652,795,2505,2723,873,952,997,1229,1294,1319],"class_list":["post-47232","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-event","tag-game","tag-gesture","tag-html","tag-javascript","tag-mobile","tag-name","tag-ontouchmove","tag-ontouchstart","tag-player","tag-programming","tag-swipe","tag-touch","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47232"}],"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=47232"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47232\/revisions"}],"predecessor-version":[{"id":47234,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47232\/revisions\/47234"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=47232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=47232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=47232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}