{"id":57862,"date":"2022-12-24T03:01:54","date_gmt":"2022-12-23T17:01:54","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=57862"},"modified":"2022-12-24T10:08:05","modified_gmt":"2022-12-24T00:08:05","slug":"htmljavascript-bulls-and-cows-game-mobile-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-bulls-and-cows-game-mobile-tutorial\/","title":{"rendered":"HTML\/Javascript Bulls and Cows Game Mobile Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML\/Javascript Bulls and Cows Game Mobile Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows_mobile.jpg\" title=\"HTML\/Javascript Bulls and Cows Game Mobile Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Bulls and Cows Game Mobile Tutorial<\/p><\/div>\n<p>With yesterday&#8217;s <a title='HTML\/Javascript Bulls and Cows Game Primer Tutorial' href='#html\/jbcgpt'>HTML\/Javascript Bulls and Cows Game Primer Tutorial<\/a> we separated &#8230;<\/p>\n<ul>\n<li>player 1 using mouse (or touch)<\/li>\n<li>player 2 on keyboard<\/li>\n<\/ul>\n<p> &#8230; as the arrangement for two players to use the one computer, playing our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.html\" title=\"Click picture\">Bulls and Cows game<\/a>.   But what if that &#8220;computer&#8221; is a mobile device?  You can&#8217;t decouple &#8220;touch&#8221; from &#8220;keyboard&#8221; using a mobile device.  You&#8217;ll notice writing web applications for mobile devices, their reticence to allow you to programmatically focus to HTML elements.  A lot of this would have to be to do with how the keyboard is presented to a mobile user <font size=1>(usually only)<\/font> when they deliberately focus onto a textbox through a human action, not as readily via a programmatical action.<\/p>\n<p>Does this ruin our game premise, for mobile devices?  Well, it&#8217;s not as strong, but it still works.  It can be a better user experience, though, attending to &#8230;<\/p>\n<ul>\n<li>CSS tweaks &#8230;<br \/>\n&lt;style&gt;<br \/>\n<code><br \/>\n input[type=password] { font-size: 24px;  }<br \/>\n<br \/> <br \/>\n @media only screen and (min-device-width: 320px) and (max-device-width: 765px) and (orientation: portrait) {<br \/>\n  <font color=blue>.tablek { text-align: right; }<br \/>\n  .tablem { text-align: left; }<br \/>\n  #pwd1 { width:50%; text-align:right;  }<br \/>\n  #pwd2 { width:50%; text-align:left;  }<\/font><br \/>\n  input[type=password] { font-size: 24px;  }<br \/>\n }<br \/>\n<br \/> <br \/>\n @media only screen and (min-device-width: 320px) and (max-device-width: 765px) and (orientation: landscape) {<br \/>\n  <font color=blue>.tablek { text-align: right; }<br \/>\n  .tablem { text-align: left; }<br \/>\n  #pwd1 { width:50%; text-align:right;  }<br \/>\n  #pwd2 { width:50%; text-align:left;  }<\/font><br \/>\n  input[type=password] { font-size: 24px;  }<br \/>\n }<br \/>\n<\/code><br \/>\n&lt;\/style&gt;\n<\/li>\n<li><font color=blue>text-align<\/font> settings to help with the narrower devices &#8230;<\/li>\n<li>Javascript use of [element].<a target=_blank title='Element.scrollIntoView information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/met_element_scrollintoview.asp'>scrollIntoView<\/a>() &#8230;<br \/>\n<code><br \/>\nfunction postsiv() {<br \/>\n  document.getElementById('tcell').scrollIntoView();<br \/>\n}<br \/>\n<br \/>\nfunction siv() {<br \/>\n if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPJUNKad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n     setTimeout(postsiv, 2000); \/\/document.getElementById('tcell').scrollIntoView(); \/\/versus=versus;<br \/>\n }<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; called via <font color=blue>tweaked<\/font> HTML &#8230;<br \/>\n<code><br \/>\n&lt;input onblur=\"vstwo=this.value; assesstwo();\" onkeydown=pwdonkd(event); type=password id=pwd2 <font color=blue>onfocus=siv();<\/font> value=''&gt;&lt;\/input&gt;<br \/>\n<\/code>\n<\/li>\n<li>programmatic focus restrictions for mobile devices &#8230;<br \/>\n<code><br \/>\nfunction pfocus() {<br \/>\n if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPJUNKad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n     document.getElementById('tablel').style.align='right'; \/\/versus=versus;<br \/>\n } else {<br \/>\n     document.getElementById('pwd2').focus();<br \/>\n }<br \/>\n}<br \/>\n<\/code><\/p>\n<li>have a set of backup placeholder arrangements in that middle cell of the 3 column table &#8230;<br \/>\n<code><br \/>\n        var versus=\"\", fgo=true; \/\/ global variable initialization ... and then later within the document.body onload linking Javascript function ...<br \/>\n<br \/>\n        if (fgo && versus == \"\") {<br \/>\n         if (document.getElementById('player1').placeholder != '' && document.getElementById('splayer1').innerHTML == 'Player 1 Name') { document.getElementById('splayer1').innerHTML=document.getElementById('player1').placeholder;    }<br \/>\n         if (document.getElementById('player2').placeholder != '' && document.getElementById('splayer2').innerHTML == 'Player 2 Name') { document.getElementById('splayer2').innerHTML=document.getElementById('player2').placeholder;    }<br \/>\n         if (document.getElementById('player1').placeholder == '') { document.getElementById('player1').placeholder=document.getElementById('player1').value; document.getElementById('splayer1').innerHTML=document.getElementById('player1').value; document.getElementById('player1').value='';   }<br \/>\n         if (document.getElementById('player2').placeholder == '') { document.getElementById('player2').placeholder=document.getElementById('player2').value; document.getElementById('splayer2').innerHTML=document.getElementById('player2').value; document.getElementById('player2').value='';   }<br \/>\n        }<br \/>\n<\/code><br \/>\n &#8230; because with the narrower devices the extra textbox view of the emoji Bulls and Cows in the middle can help out the qwerty button pressing users\n<\/li>\n<\/ul>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.html-GETME\" title=\"bullsandcows.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.html-GETME\" title=\"bullsandcows.html\">second draft bullsandcows.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.html\" title=\"Click picture\">Bulls and Cows game<\/a> you can <a href='#mysiframe'>also try below<\/a>.<\/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\/htmljavascript-bulls-and-cows-game-mobile-tutorial\/'>HTML\/Javascript Bulls and Cows Game Mobile Tutorial<\/a>.<\/p-->\n<hr>\n<p id='html\/jbcgpt'>Previous relevant <a target=_blank title='HTML\/Javascript Bulls and Cows Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-bulls-and-cows-game-primer-tutorial\/'>HTML\/Javascript Bulls and Cows 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\/Games\/Bullsandcows\/bullsandcows.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML\/Javascript Bulls and Cows Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.jpg\" title=\"HTML\/Javascript Bulls and Cows Game Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Bulls and Cows Game Primer Tutorial<\/p><\/div>\n<p>Today we&#8217;ve got an inhouse version of a well known word <font size=1>(but you don&#8217;t have to be a wordsmith to play)<\/font> game called <a target=_blank title='Bulls and Cows' href='https:\/\/www.dailywritingtips.com\/list-50-word-games\/'>Bulls and Cows<\/a> which we used to play in lunchtimes at school, a bit like the Word Guessing game of <a title='Word Guessing or Synonym Game Right Click Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/word-guessing-or-synonym-game-right-click-tutorial\/'>Word Guessing or Synonym Game Right Click Tutorial<\/a> times past.<\/p>\n<p>Again, best as a game for two &#8230;<\/p>\n<blockquote cite='https:\/\/www.dailywritingtips.com\/list-50-word-games\/'><p>\nThis game, which can also be called \u201cMastermind\u201d or \u201cJotto\u201d involves one player thinking up a secret word of a set number of letters. The second player guesses a word; the first player tells them how many letters match in the right position (bulls) and how many letters are correct but in the wrong position (cows).\n<\/p><\/blockquote>\n<p> &#8230; that we encourage players to play around the one computer, where one player is at a mouse (or touch) and one is on the keyboard, trying to guess the same computer generated (rather than &#8220;the other player setting&#8221;) 4 to 9 length English word.<\/p>\n<p>Feel free to try our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.html_GETME\" title=\"bullsandcows.html\">first draft bullsandcows.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.html\" title=\"Click picture\">Bulls and Cows game<\/a> you can try in a new window, or below &#8230;<\/p>\n<p><iframe id=mysiframe src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Bullsandcows\/bullsandcows.html\" style=\"width:100%;height:900px;\"><\/iframe><\/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\/htmljavascript-sudoku-game-primer-tutorial\/'>HTML\/Javascript Bulls and Cows Game 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='#d57844' onclick='var dv=document.getElementById(\"d57844\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/word-game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57844' 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='#d57862' onclick='var dv=document.getElementById(\"d57862\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/focus\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d57862' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>With yesterday&#8217;s HTML\/Javascript Bulls and Cows Game Primer Tutorial we separated &#8230; player 1 using mouse (or touch) player 2 on keyboard &#8230; as the arrangement for two players to use the one computer, playing our Bulls and Cows game. &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-bulls-and-cows-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":[72,3372,4185,281,326,388,448,476,477,3922,4184,576,652,795,997,3896,3003,1319,1350,1356,1452,1453],"class_list":["post-57862","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-align","tag-computer","tag-computer-generated","tag-css","tag-dictionary","tag-english","tag-focus","tag-game","tag-games-2","tag-guess","tag-guessing","tag-html","tag-javascript","tag-mobile","tag-programming","tag-scrollintoview","tag-text-align","tag-tutorial","tag-user-experience","tag-ux","tag-word","tag-word-game"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57862"}],"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=57862"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57862\/revisions"}],"predecessor-version":[{"id":57874,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/57862\/revisions\/57874"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=57862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=57862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=57862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}