Yesterdayโs Mobile Swipe Gesture Name Game Tutorial was collaborative in its Name Game functionality for โฆ
- two players within calling distance and able to get to the same device (
/
) โฆ and today we cover โฆ
- two players not within calling distance and not able to get to the same device (
)
โฆ and we think, considering this, that Shirleysurely this would just involve an email link, Shirleysurely?! Yes, that would do it, but it would also give away (to a savvy user) the innards of the game, and yet, we were envisaging the game as a surprise for the second player. But this conundrum is exactly where an Inline HTML Email (via PHP mail) email can come in really handy because it is another level of savvy again for your user to see any of the โbusiness logicโ involved in the game when you present them with an Inline HTML Email button (actually an โaโ link with style=โtext-decoration:none;โ โฆ
<a target=_blank style='text-decoration: none; border:3px solid red; padding: 15px 15px 15px 15px; background-color: yellow; height: 60px; border-radius: 40px;' id=aclick href='//www.rjmprogramming.com.au/HTMLCSS/mobile_gestures.htm?name=&array='>Name Game for ~ Courtesy of `</a>
) to click with some short โdoes not give the game awayโ text. Why an โaโ element here? Well, as you would glean when reading our โearly daysโ (for us) discussion on this, with PDF Slideshow and Form Creation Helper Inline Email Tutorial, that the Javascript โonclickโ logic of another approach would be rejected by Email Clients like Gmail, as one example. You will notice, though, from snippet of โInline HTML Emailโ HTML above, that inline CSS of the <body> </body> section is fine. Hence our ability to make an โaโ tag resemble a โbuttonโ.
And back at the supervisor we just add another HTML โbuttonโ element to allow for this. This allows for an HTML form method=POST navigation to a PHP email helper (via an HTML iframe) be called into play.
Why a โbuttonโ element, rather than an โinput type=โbutton'โ element?
<!--input onclick="genask('');" type=button value="Two Player Game ... You Set It Up for Other Player who Turns Away Now"></input-->
<button style="height:90px;" onclick="genask('');">Two Player Name Game 🐵 / 🙈 ... <br>You 🐵 Set It Up for Other <br>Player 🙈 who Turns Away Now</button><br><br>
<button style="height:90px;" onclick="drest(); genask('');">Two Player Name Email Game 🐵 📧 🐵 ... <br>You 🐵 Set It Up for Other <br>Player 🐵 via Email 📧</button>
Well, at least for non-mobile platforms, a button with complex wording, weโd like to spread over a few lines of height (as a โbuttonโ element can, defining this wording via its innerHTML property which can contain <br> line feeds). And what helps with mobile platforms that still only show the top line of the innerHTML property of a โbuttonโ element? Well, we start to involve emojis, and a means of brevity for your more complex concepts you want explained in a web application.
If you want to try thechanged mobile_gestureshtmโs Two
Player Name Game, feel free! Or try it below โฆ
Previous relevant Mobile Swipe Gesture Name Game Tutorial is shown below.
Todayโs extension of mobile device โswipe gestureโ event functionality onto yesterdayโs Mobile Swipe Gesture Detection Primer Tutorial is to turn the โproof of conceptโ feel into an optional Name Game for Two Players web application.
In this Name Game a โฆ
- first player asks the second player to turn away โฆ
- first player starts up thechanged mobile_gestures
htmโs Two
Player Name Game โฆ
- first player clicks the one button of the web application, and, in so doing โฆ
- first player is prompted for a user entry such as โฆ
[1,2,3,4] Cate
โฆ as an example to have second player Cate be sent to [URL1, URL2, URL3, URL4] as Cate respectively swipes [Up, Down, Left, Right] โฆ noting here that first player can define their own URL suggestions where any โ~โ character is replaced by the second playerโs name โฆ and then โฆ - first player calls in second player so that โฆ
- second player swipes wherever they wish โฆ and depending on swipe type โฆ
- second player can see the first playerโs (tailored) surprises as they play (and swipe)
Pretty simple game, huh?!
Previous relevant Mobile Swipe Gesture Detection Primer Tutorial is shown below.
Have you ever been curious about โthe behind the scenesโ detection of โswipeโ gestures on mobile platforms, whether that beโฆ
- swipe right
- swipe left
- swipe down
- swipe up
? The answer for us is โyesโ. So we decided to start down a road of discovery largely with the help of this useful link, thanks.
This research led us to write an โin all innocenceโ โproof of conceptโ โgesture playgroundโ HTML and Javascript mobile_gestureshtml live
run for you to swipe away, and be detected! It may be all you need to dive into some mobile web application development!
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.