{"id":60630,"date":"2023-09-03T03:01:39","date_gmt":"2023-09-02T17:01:39","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=60630"},"modified":"2023-09-03T19:14:50","modified_gmt":"2023-09-03T09:14:50","slug":"chess-game-check-logic-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/chess-game-check-logic-tutorial\/","title":{"rendered":"Chess Game Check Logic Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php?version=--------\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Chess Game Check Logic Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_check.jpg\" title=\"Chess Game Check Logic Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Chess Game Check Logic Tutorial<\/p><\/div>\n<p>Finally, after the recent <a title='Chess Game Correspondence Tutorial' href='#cgct'>Chess Game Correspondence Tutorial<\/a>, today, we tackle &#8230;<\/p>\n<p><code><br \/>\nChess check logic<br \/>\n<\/code><\/p>\n<p> &#8230; regarding &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/chess-game-practice-basic-moves-tutorial\/'>\n<ul>\n<li><font size=1>castling<\/font><\/li>\n<li>knowing when your King is in check or somebody has put your King in check<\/li>\n<li>knowing when an illegal move has happened regarding leaving your own King in check<\/li>\n<li>knowing when it&#8217;s Checkmate (or perhaps even Stalemate)<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; and the illegal move whereby a King might get too close to the other King, we&#8217;re checking for within the same logic, working it that the Javascript global variable <i>isbad<\/i> is set <i>true<\/i> when a move is illegal because it puts your own King in check ..<\/p>\n<p><code><br \/>\n function anybw(asq, thebrd, bwenemy, alertallowed) {<br \/>\n   thebrd+='&';<br \/>\n   isbad=false;<br \/>\n   iswrong=false;<br \/>\n   var bwfriend=bwenemy.replace('w','!').replace('b','W').replace('!', 'b').toLowerCase();<br \/>\n   var okfornow=true, startat=eval('' + asq), twos=[];<br \/>\n   var startrow=Math.floor(eval(-1 + asq) \/ 8);<br \/>\n   var startcol=Math.floor(eval(-1 + asq) % 8);<br \/>\n   var lastcol=-1, lastrow=-1;<br \/>\n   var kposa=[18,-18,17,-17,15,-15,6,-6,10,10];<br \/>\n   var pposa=[9,7];<br \/>\n   var kgposa=[9,8,7,-1,1,-7,-8,-9];<br \/>\n   var ikposa=0;<br \/>\n   if (asq == thissquare) {<br \/>\n     asq=asq;<br \/>\n   }<br \/>\n   if (bwfriend == 'w') {<br \/>\n     pposa=[-9,-7];<br \/>\n   }<br \/>\n<br \/> <br \/>\n   \/\/alert('Checking ' + bwfriend + ' King at ' + asq);<br \/>\n    <br \/>\n   \/\/ Horizontal check<br \/>\n   startat=eval(-1 + asq);<br \/>\n   while (startat &gt;= 1 && startat &lt;= 64 && startrow == Math.floor(eval(-1 + startat) \/ 8)) {<br \/>\n     if (thebrd.indexOf('_' + startat + 'w') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + 'w');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('R') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(1);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     } else if (thebrd.indexOf('_' + startat + 'b') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + 'b');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('R') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(2);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     } else if (thebrd.indexOf('_' + startat + '&') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + '&');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('R') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(3);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     }<br \/>\n     startat--;<br \/>\n   }<br \/>\n   startat=eval(1 + asq);<br \/>\n   while (startat &gt;= 1 && startat &lt;= 64 && startrow == Math.floor(eval(-1 + startat) \/ 8)) {<br \/>\n     if (thebrd.indexOf('_' + startat + 'w') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + 'w');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('R') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(11);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     } else if (thebrd.indexOf('_' + startat + 'b') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + 'b');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('R') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(12);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     } else if (thebrd.indexOf('_' + startat + '&') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + '&');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('R') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(13);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     }<br \/>\n     startat++;<br \/>\n   }<br \/>\n<br \/>\n   \/\/ Vertical check<br \/>\n   startat=eval(-8 + asq);<br \/>\n   while (startat &gt;= 1 && startat &lt;= 64 && startcol == Math.floor(eval(-1 + startat) % 8)) {<br \/>\n     if (thebrd.indexOf('_' + startat + 'w') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + 'w');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('R') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(21);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     } else if (thebrd.indexOf('_' + startat + 'b') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + 'b');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('R') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(22);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     } else if (thebrd.indexOf('_' + startat + '&') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + '&');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('R') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(23);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     }<br \/>\n     startat-=8;<br \/>\n   }<br \/>\n   startat=eval(8 + asq);<br \/>\n   while (startat &gt;= 1 && startat &lt;= 64 && startcol == Math.floor(eval(-1 + startat) % 8)) {<br \/>\n     if (thebrd.indexOf('_' + startat + 'w') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + 'w');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('R') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(24);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     } else if (thebrd.indexOf('_' + startat + 'b') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + 'b');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('R') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(25);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     } else if (thebrd.indexOf('_' + startat + '&') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + '&');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('R') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(26);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     }<br \/>\n     startat+=8;<br \/>\n   }<br \/>\n<br \/>\n   \/\/ Diagonal check<br \/>\n   lastcol=Math.floor(eval(-1 + asq) % 8);<br \/>\n   lastrow=Math.floor(eval(-1 + asq) \/ 8);<br \/>\n   startat=eval(-9 + asq);<br \/>\n   while (startat &gt;= 1 && startat &lt;= 64 && Math.abs(lastcol - Math.floor(eval(-1 + startat) % 8)) == 1 && Math.abs(lastrow - Math.floor(eval(-1 + startat) \/ 8)) == 1) {<br \/>\n     if (thebrd.indexOf('_' + startat + 'w') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + 'w');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('B') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert('31 ' + bwfriend + ' ' + twos[0].slice(-3) + ' ' + startat + ' ' + asq);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     } else if (thebrd.indexOf('_' + startat + 'b') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + 'b');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('B') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(32);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     } else if (thebrd.indexOf('_' + startat + '&') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + '&');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('B') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(33);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     }<br \/>\n     lastcol=Math.floor(eval(-1 + startat) % 8);<br \/>\n     lastrow=Math.floor(eval(-1 + startat) \/ 8);<br \/>\n     startat-=9;<br \/>\n   }<br \/>\n   lastcol=Math.floor(eval(-1 + asq) % 8);<br \/>\n   lastrow=Math.floor(eval(-1 + asq) \/ 8);<br \/>\n   startat=eval(-7 + asq);<br \/>\n   while (startat &gt;= 1 && startat &lt;= 64 && Math.abs(lastcol - Math.floor(eval(-1 + startat) % 8)) == 1 && Math.abs(lastrow - Math.floor(eval(-1 + startat) \/ 8)) == 1) { \/\/ && startcol == Math.floor(eval(-1 + startat) % 8)) {<br \/>\n     if (thebrd.indexOf('_' + startat + 'w') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + 'w');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('B') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(41);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     } else if (thebrd.indexOf('_' + startat + 'b') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + 'b');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('B') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(42);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     } else if (thebrd.indexOf('_' + startat + '&') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + '&');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('B') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(43);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     }<br \/>\n     lastcol=Math.floor(eval(-1 + startat) % 8);<br \/>\n     lastrow=Math.floor(eval(-1 + startat) \/ 8);<br \/>\n     startat-=7;<br \/>\n   }<br \/>\n   lastcol=Math.floor(eval(-1 + asq) % 8);<br \/>\n   lastrow=Math.floor(eval(-1 + asq) \/ 8);<br \/>\n   startat=eval(9 + asq);<br \/>\n   while (startat &gt;= 1 && startat &lt;= 64 && Math.abs(lastcol - Math.floor(eval(-1 + startat) % 8)) == 1 && Math.abs(lastrow - Math.floor(eval(-1 + startat) \/ 8)) == 1) { \/\/ && startcol == Math.floor(eval(-1 + startat) % 8)) {<br \/>\n     if (thebrd.indexOf('_' + startat + 'w') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + 'w');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('B') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(44);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     } else if (thebrd.indexOf('_' + startat + 'b') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + 'b');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('B') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(45);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     } else if (thebrd.indexOf('_' + startat + '&') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + '&');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('B') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(46);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     }<br \/>\n     lastcol=Math.floor(eval(-1 + startat) % 8);<br \/>\n     lastrow=Math.floor(eval(-1 + startat) \/ 8);<br \/>\n     startat+=9;<br \/>\n   }<br \/>\n   lastcol=Math.floor(eval(-1 + asq) % 8);<br \/>\n   lastrow=Math.floor(eval(-1 + asq) \/ 8);<br \/>\n   startat=eval(7 + asq);<br \/>\n   while (startat &gt;= 1 && startat &lt;= 64 && Math.abs(lastcol - Math.floor(eval(-1 + startat) % 8)) == 1 && Math.abs(lastrow - Math.floor(eval(-1 + startat) \/ 8)) == 1) { \/\/ && startcol == Math.floor(eval(-1 + startat) % 8)) {<br \/>\n     \/\/alert('checking square ' + startat);<br \/>\n     if (thebrd.indexOf('_' + startat + 'w') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + 'w');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('B') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(51);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     } else if (thebrd.indexOf('_' + startat + 'b') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + 'b');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('B') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(52);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     } else if (thebrd.indexOf('_' + startat + '&') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + '&');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         break;<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('Q') != -1 || twos[0].slice(-3).indexOf('B') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(53);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     }<br \/>\n     lastcol=Math.floor(eval(-1 + startat) % 8);<br \/>\n     lastrow=Math.floor(eval(-1 + startat) \/ 8);<br \/>\n     startat+=7;<br \/>\n   }<br \/>\n<br \/>\n   \/\/ Knight check<br \/>\n   for (ikposa=0; ikposa&lt;kposa.length; ikposa++) {<br \/>\n   startat=eval(kposa[ikposa] + asq);<br \/>\n   if (startat &gt;= 1 && startat &lt;= 64 && startrow != Math.floor(eval(-1 + startat) \/ 8) && startcol != Math.floor(eval(-1 + startat) % 8)) {<br \/>\n     if (thebrd.indexOf('_' + startat + 'w') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + 'w');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         twos[0]=twos[0];<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('K1') != -1 || twos[0].slice(-3).indexOf('K2') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(61);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     } else if (thebrd.indexOf('_' + startat + 'b') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + 'b');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         twos[0]=twos[0];<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('K1') != -1 || twos[0].slice(-3).indexOf('K2') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(62);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     } else if (thebrd.indexOf('_' + startat + '&') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + '&');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         twos[0]=twos[0];<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('K1') != -1 || twos[0].slice(-3).indexOf('K2') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(63);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     }<br \/>\n   }<br \/>\n   }<br \/>\n<br \/>\n   \/\/ Pawn check<br \/>\n   for (ikposa=0; ikposa&lt;pposa.length; ikposa++) {<br \/>\n   startat=eval(pposa[ikposa] + asq);<br \/>\n   if (startat &gt;= 1 && startat &lt;= 64 && startrow != Math.floor(eval(-1 + startat) \/ 8) && startcol != Math.floor(eval(-1 + startat) % 8)) {<br \/>\n     if (thebrd.indexOf('_' + startat + 'w') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + 'w');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         twos[0]=twos[0];<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('P') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(71);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     } else if (thebrd.indexOf('_' + startat + 'b') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + 'b');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         twos[0]=twos[0];<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('P') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(72);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     } else if (thebrd.indexOf('_' + startat + '&') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + '&');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         twos[0]=twos[0];<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('P') != -1) {<br \/>\n           isbad=true;<br \/>\n           \/\/alert(73);<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     }<br \/>\n   }<br \/>\n   }<br \/>\n<br \/> <br \/>\n   \/\/ King too near King check<br \/>\n   for (ikgposa=0; ikgposa&lt;kgposa.length; ikgposa++) {<br \/>\n   startat=eval(kgposa[ikgposa] + asq);<br \/>\n   if (startat &gt;= 1 && startat &lt;= 64 && startrow != Math.floor(eval(-1 + startat) \/ 8) && startcol != Math.floor(eval(-1 + startat) % 8)) {<br \/>\n     if (thebrd.indexOf('_' + startat + 'w') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + 'w');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         twos[0]=twos[0];<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('K') != -1 && twos[0].slice(-3).indexOf('K1') == -1 && twos[0].slice(-3).indexOf('K2') == -1) {<br \/>\n           iswrong=true;<br \/>\n           if (alertallowed) { alert('Kings can not be this close together.'); }<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     } else if (thebrd.indexOf('_' + startat + 'b') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + 'b');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         twos[0]=twos[0];<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('K') != -1 && twos[0].slice(-3).indexOf('K1') == -1 && twos[0].slice(-3).indexOf('K2') == -1) {<br \/>\n           iswrong=true;<br \/>\n           if (alertallowed) { alert('Kings can not be this close together.'); }<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     } else if (thebrd.indexOf('_' + startat + '&') != -1) {<br \/>\n       twos=thebrd.split('_' + startat + '&');<br \/>\n       if (twos[0].slice(-3).indexOf(bwfriend) != -1) {<br \/>\n         twos[0]=twos[0];<br \/>\n       } else if (twos[0].slice(-3).indexOf(bwenemy) != -1) {<br \/>\n         if (twos[0].slice(-3).indexOf('K') != -1 && twos[0].slice(-3).indexOf('K1') == -1 && twos[0].slice(-3).indexOf('K2') == -1) {<br \/>\n           iswrong=true;<br \/>\n           if (alertallowed) { alert('Kings can not be this close together.'); }<br \/>\n           return asq;<br \/>\n         }<br \/>\n       }<br \/>\n     }<br \/>\n   }<br \/>\n   }<br \/>\n<br \/>\n   return asq;<br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; for you to involve yourself with in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html------------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html------------------GETME\">experimental_drag_and_drop.htm<\/a> HTML and Javascript and CSS assisting <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php--------GETME\">the unchanged<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php--------GETME\">chess_game.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php?version=--------\" title=\"Click picture\">Chess Practice Game<\/a> for you to better practice your Chess &#8230;<\/p>\n<p><iframe style=\"width:100%;height:900px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php?version=--------\"><\/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\/chess-game-check-logic-tutorial\/'>Chess Game Check Logic Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cgct'>Previous relevant <a target=_blank title='Chess Game Correspondence Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/chess-game-correspondence-tutorial\/'>Chess Game Correspondence 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\/chess_game.php?version=-------\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Chess Game Correspondence Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game_emailcorrespondent.jpg\" title=\"Chess Game Correspondence Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Chess Game Correspondence Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Chess Game Midway Scenario Layout Tutorial' href='#cgmslt'>Chess Game Midway Scenario Layout Tutorial<\/a> &#8220;Midway Layout Scenario&#8221; for our Chess Game Practice was a conduit to another idea.  Any ideas what?  <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>Anyone? Anyone?<\/a> Yes, <a target=_blank title='?' href='https:\/\/en.wikipedia.org\/wiki\/Electrical_conduit'>Con<\/a> <span title='Tee, hee'>Nike<\/span>, we can send off a snapshot of the Chess Game at any point in time, and so this means we can play the game &#8230;<\/p>\n<ul>\n<li>our &#8220;first case&#8221; anticipated way with two players hovering over the one device &#8230; and as of today with &#8230;<\/li>\n<li>two email and\/or SMS correspondents<\/li>\n<\/ul>\n<p> &#8230; and perhaps just one correspondent (though have not worked the practicalities of this in testing).<\/p>\n<p>Luckily, the data requirements of doing this can be handled via URLs with the familiar ? and &#038; argument arrangements, and so we add links into &#8230;<\/p>\n<ul>\n<li>email (via &#8220;a&#8221; element &#8220;mailto:&#8221; links) &#8230; or &#8230;<\/li>\n<li>SMS (via &#8220;a&#8221; element &#8220;sms:&#8221; links)<\/li>\n<\/ul>\n<p> &#8230; helping the transfer of game details onto the Chess Game players.<\/p>\n<p>And what is the conduit for the initial user of our Chess Game Practice web application to make this happen?  Well, as they name the players start using a name such as &#8230;<\/p>\n<p><code><br \/>\nR. Metcalfe [rmetcalfe15@gmail.com]<br \/>\n<\/code><\/p>\n<p> &#8230; for both Black and White players to perform a Chess Game via correspondence.<\/p>\n<p>As such, it&#8217;s definitely worth trying <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-----------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-----------------GETME\">experimental_drag_and_drop.htm<\/a> HTML and Javascript and CSS assisting <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php-------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php-------GETME\">chess_game.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php?version=---------\" title=\"Click picture\">Chess Practice Game<\/a> for you to better practice your Chess &#8230;<\/p>\n<p><iframe style=\"width:100%;height:900px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php?version=-------\"><\/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\/new-chess-game-midway-scenario-layout-tutorial\/'>New Chess Game Midway Scenario Layout Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cgmslt'>Previous relevant <a target=_blank title='Chess Game Midway Scenario Layout Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/chess-game-midway-scenario-layout-tutorial\/'>Chess Game Midway Scenario Layout 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\/chess_game.php?version=------\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Chess Game Midway Scenario Layout Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_midway_layout.gif\" title=\"Chess Game Midway Scenario Layout Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Chess Game Midway Scenario Layout Tutorial<\/p><\/div>\n<p>We are always intrigued by those Chess &#8220;end game scenarios&#8221; that appear in the newspaper.  We&#8217;re guessing to get good at Chess you need to know strategies to adopt for various scenarios.  With that in mind, in addition, onto those &#8230;<\/p>\n<ul>\n<li>drag from an emoji sentence the Chess pieces &#8230; and &#8230;<\/li>\n<li>traditional layout game of Chess &#8230; and &#8230;<\/li>\n<li>weird and random layout game of Chess &#8230; today we&#8217;d like to add &#8230;<\/li>\n<li><font color=purple>scenario descriptor mechanism<\/font> to recreate a Chess endgame or &#8220;midway game&#8221; or even &#8220;near the start game&#8221; set of circumstances (which the user can define)<\/li>\n<\/ul>\n<p>We just added a Javascript prompt popup window means by which we could add this, adding into the PHP parent code the new button &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n&lt;button style=background-color:rgba(255,255,0,0.5); id=chessinitmid onclick=\"location.href=(document.URL.split(String.fromCharCode(35))[0] + ' . \"'&traditional=' + encodeURIComponent(prompt('<font color=purple>Pieces have designations bK wK bQ wQ bR1 wR1 bR2 wR2 bB1 wB1 bB2 wB2 bK1 wK1 bK2 wK2 bP1 wP1 bP2 wP2 bP3 wP3 bP4 wP4 bP5 wP5 bP6 wP6 bP7 wP7 bP8 wP8 ... so example answer bK_25wK_27bQ_32wQ_37&move=wQ_37_39 places the Kings and Queens to squares in the range 1 to 64 (starting top left of board) and the optional but advisable move says move white Queen from square 37 to square 39 ... as an albeit pretty stupid (on so many levels) example!<\/font>','')).replace(encodeURIComponent(String.fromCharCode(38)),String.fromCharCode(38)).replace(encodeURIComponent(String.fromCharCode(61)),String.fromCharCode(61))\" . \").replace('.php&','.php?'\" . ');\"&gt;Midway Start to Game&lt;\/button&gt;<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; and look for the new ($_GET[]) ? and &#038; arguments in the child Javascript &#8230;<\/p>\n<p><code><br \/>\n var trad='';<br \/>\n var amove='';<br \/>\n if (document.URL.indexOf('traditional=') != -1) {<br \/>\n trad=decodeURIComponent(document.URL.split('traditional=')[1].split('&')[0]);<br \/>\n }<br \/>\n if (document.URL.indexOf('move=') != -1) {<br \/>\n amove=decodeURIComponent(document.URL.split('move=')[1].split('&')[0]);<br \/>\n }<br \/>\n var movefrom=-1, moveto=-1, nextmove=-1;<br \/>\n<\/code><\/p>\n<p> &#8230; so that the <i>Chess piece distribution code<\/i> could cater, <font color=blue>in this way<\/font> &#8230;<\/p>\n<p><code><br \/>\n function butwhatifchessgame(inspanstuff) {<br \/>\n   var outspanstuff=inspanstuff, ii=0, thisth='', tnum=0;<br \/>\n   if (document.URL.indexOf('\/chess') != -1 && document.URL.indexOf('traditional=') != -1) {<br \/>\n   var ths=[];<br \/>\n   var ourmap=[];<br \/>\n   var thas=inspanstuff.split('&lt;\/th&gt;');<br \/>\n   for (ii=0; ii&lt;thas.length; ii++) {<br \/>\n      if (thas[ii].trim() != '') {<br \/>\n      thisth='&lt;th' + thas[ii].split('&lt;th')[-1 + eval('' + thas[ii].split('&lt;th').length)] + '&lt;\/th&gt;';<br \/>\n      ths.push(thisth);<br \/>\n      } \/\/ outspanstuff=outspanstuff.replace(thisth, '');<br \/>\n   }<br \/>\n   var outtg=document.getElementById('mytable').innerHTML;<br \/>\n   thas=outtg.split('&lt;\/td&gt;');<br \/>\n  \/\/ouralert(65);<br \/>\n   for (ii=0; ii&lt;thas.length; ii++) {<br \/>\n     <font color=blue>if (trad.indexOf('_') != -1) {<br \/>\n     if (trad.indexOf(cpa[ii] + '_') != -1) {<br \/>\n     ourmap.push(eval(-1 + eval(trad.split(cpa[ii] + '_')[1].split('w')[0].split('b')[0])));<br \/>\n     occupiedlist+='' + eval(-1 + eval(trad.split(cpa[ii] + '_')[1].split('w')[0].split('b')[0])) + ',';<br \/>\n     }<br \/>\n     } else <\/font>if (staidmap[ii] &gt;= 0 && document.URL.indexOf('traditional=mayhem') == -1 && trad.indexOf('_') == -1) {<br \/>\n     ourmap.push(staidmap[ii]);<br \/>\n     occupiedlist+='' + eval(1 + eval('' + staidmap[ii])) + ',';<br \/>\n     } else {<br \/>\n     tnum=Math.floor(Math.random() * 64);<br \/>\n     occupiedlist+='' + eval(1 + tnum) + ',';<br \/>\n     ourmap.push(tnum);<br \/>\n     }<br \/>\n   }<br \/>\n   <font color=blue>if (amove.trim() != '') {<br \/>\n     \/\/alert(amove);<br \/>\n     if (trad.trim().indexOf(amove.split('_')[0] + '_') == -1) {<br \/>\n     ourmap.push(eval(-1 + eval(trad.trim().split(cpa[ii] + '_')[1].split('w')[0].split('b')[0].split('_')[0])));<br \/>\n     occupiedlist+='' + eval(-1 + eval(trad.trim().split(cpa[ii] + '_')[1].split('w')[0].split('b')[0].split('_')[0])) + ',';<br \/>\n     }<br \/>\n     var amvs=amove.split('_');<br \/>\n     if (eval('' + amvs.length) &gt; 2) {<br \/>\n     moveto=eval('' + amvs[2]);<br \/>\n     if (movefrom == -1) {  movefrom=eval('' + amvs[1]); }<br \/>\n     \/\/alert('' + movefrom + ' to ' + moveto);<br \/>\n     }<br \/>\n   }<\/font><br \/>\n   \/\/ouralert(165);<br \/>\n   var preclick='';<br \/>\n   if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n     preclick='data-';<br \/>\n   }<br \/>\n   for (ii=(-1 + eval('' + ths.length)); ii&gt;=0; ii--) {<br \/>\n     \/\/ouralert(thas[ii] + ' ... ' + ths[ii]);<br \/>\n     outtg=outtg.replace(thas[ourmap[ii]], thas[ourmap[ii]] + ths[ii].replace(\/th\/g,'span').replace('&lt;span ', '&lt;span style=font-size:60px; data-ontouchstart=fit(this); onmouseover=fit(this); ' + preclick + 'onclick=fit(this); '));  \/\/ .replace(\/th\/g,'SPAN')<br \/>\n   }<br \/>\n   document.getElementById('mytable').innerHTML=outtg;<br \/>\n   setTimeout(prevl, 500);<br \/>\n     return '&lt;td&gt;&lt;\/td&gt;';<br \/>\n   }<br \/>\n   return outspanstuff;<br \/>\n }<br \/>\n <\/code><\/p>\n<p>And so, further to yesterday&#8217;s <a title='Chess Game Practice Player Commentary Tutorial' href='#cgppct'>Chess Game Practice Player Commentary Tutorial<\/a> &#8230;<\/p>\n<p> &#8230; we have <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html----------------GETME\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html----------------GETME\">experimental_drag_and_drop.htm<\/a> HTML and Javascript and CSS assisting <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php------GETME\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php------GETME\">chess_game.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php?version=------\" title=\"Click picture\">Chess Practice Game<\/a> for you to better practice your Chess &#8230;<\/p>\n<p><iframe style=\"width:100%;height:900px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php?version=------\"><\/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\/chess-game-midway-scenario-layout-tutorial\/'>Chess Game Midway Scenario Layout Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cgppct'>Previous relevant <a target=_blank title='Chess Game Practice Player Commentary Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/chess-game-practice-player-commentary-tutorial\/'>Chess Game Practice Player Commentary 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\/chess_game.php?version=-----\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Chess Game Practice Player Commentary Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game_commentary.jpg\" title=\"Chess Game Practice Player Commentary Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Chess Game Practice Player Commentary Tutorial<\/p><\/div>\n<p>We wanted to start thinking more of the players regarding our recent Chess Game Practice web application, further to yesterday&#8217;s <a title='Chess Game Practice Touchdown Tutorial' href='#cgptt'>Chess Game Practice Touchdown Tutorial<\/a>.<\/p>\n<p>As such, regarding <i>player names in games<\/i> we really admire the &#8230;<\/p>\n<p><code><br \/>\n <a target=_blank title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=true<br \/>\n<\/code><\/p>\n<p> &#8230; global attribute for such tasks, these days, the affect of which <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game_commentary.jpg\" title=\"Tutorial picture\">today&#8217;s tutorial picture<\/a>&#8216;s blue bordered part helps explain.<\/p>\n<p>Once we have collected those optional <sub>non-<\/sub>Black and <sub>non-<\/sub>White names, we concentrate on providing an HTML <i>p<\/i> element as a repository for commentary, whose visibility can be toggled by clicking that <i>versus<\/i> word <a target=_blank title='Claytons ... the drink you are having when you are not having a drink ... and this CSS technique contributes to what we know of as an option element innerText area but is not there in the Javascript DOM (and we are happy about this, being kind of lazy).' href='https:\/\/www.youtube.com\/watch?v=3qf4yUMxnjw'><i>Clayton<\/i><\/a>&#8216;s hardcoding.<\/p>\n<p>That commentary should better explain &#8230;<\/p>\n<ul>\n<li>whose move it is<\/li>\n<li>what was the last move<\/li>\n<li>illegal moves<\/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\/HTMLCSS\/experimental_drag_and_drop.html---------------GETME\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html---------------GETME\">experimental_drag_and_drop.htm<\/a> HTML and Javascript and CSS assisting <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php-----GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php-----GETME\">chess_game.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php?version=-----\" title=\"Click picture\">Chess Practice Game<\/a> for you to better practice your Chess &#8230;<\/p>\n<p><iframe style=\"width:100%;height:900px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php?version=-----\"><\/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\/chess-game-practice-player-commentary-tutorial\/'>Chess Game Practice Player Commentary Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cgptt'>Previous relevant <a target=_blank title='Chess Game Practice Touchdown Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/chess-game-practice-touchdown-tutorial\/'>Chess Game Practice Touchdown 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\/chess_game.php?version=----\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Chess Game Practice Touchdown Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game_touchdown.jpg\" title=\"Chess Game Practice Touchdown Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Chess Game Practice Touchdown Tutorial<\/p><\/div>\n<p>The &#8220;touchdown&#8221; referred to in our blog posting title (further to the work of yesterday&#8217;s <a title='Chess Game Practice Castling Tutorial' href='#cgpct'>Chess Game Practice Castling Tutorial<\/a>) &#8230;<\/p>\n<ul>\n<li>is not a Gridiron score &#8230; but &#8230;<\/li>\n<li>the <a target=_blank title='Event ontouchdown information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/obj_touchevent.asp'>&#8220;touch&#8221; mobile platform event<\/a> which is the &#8220;touch&#8221; equivalent to the &#8220;mouse&#8221; event onmousedown (preceding the onclick event, in the normal flow of events)<\/li>\n<\/ul>\n<p> &#8230; and &#8230; yes &#8230; that&#8217;s worth a <font size=5>yayyyyyy!!!!<\/font> in anyone&#8217;s language.<\/p>\n<p>Why are we needing this?  Well, after the layout posting, populating a traditional Chess board with the default chess player positions, we lost the Drag and Drop &#8220;smarts&#8221; for the tabular span elements.<\/p>\n<p>We asked ourselves &#8230;<\/p>\n<blockquote><p>\nHow best to fix the problem for mobile platforms and minimize the interference to existant non-mobile platform working code?\n<\/p><\/blockquote>\n<p>And we thought &#8230;<\/p>\n<blockquote><p>\nWe could introduce a whole new separate layer of event logic with an event that does not occur in the non-mobile realm &#8230; on<font size=5>touchdown<\/font>\n<\/p><\/blockquote>\n<p>The Javascript code below can populate the elements of interest with new <i>ontouchdown<\/i> (discrete clicking or touching) logic for the chess piece moves.<\/p>\n<p><code><br \/>\n function rejig() {<br \/>\n  if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n    if (document.URL.indexOf('traditional=') != -1) {<br \/>\n    var huhih=document.getElementsByTagName('h1')[0].innerHTML.substring(26);<br \/>\n    if (huhih.indexOf('Discrete Touch') == -1) {<br \/>\n    document.getElementsByTagName('h1')[0].innerHTML=\"Discrete Touch\" + huhih;<br \/>\n    }<br \/>\n    }<br \/>\n    \/\/document.body.addEventListener(\"touchdown\", (ev) => { gev=ev; refit(ev); });<br \/>\n    document.getElementById('mytable').addEventListener(\"click\", (ev) => { gev=ev; if (1 == 1) { setTimeout(delayedrefit, 500); } else { refit(ev); } });<br \/>\n    if (1 == 1) {<br \/>\n    elems=document.getElementsByTagName('td');<br \/>\n    for (ielems=0; ielems<elems.length; ielems++) {\n     if (('' + elems[ielems].className) == 'black' || ('' + elems[ielems].className) == 'white') {\n      \/\/document.title='set1';\n      elems[ielems].addEventListener(\"touchdown\", (ev) => { gev=ev; if (1 == 1) { setTimeout(delayedrefit, 500); } else { refit(ev); } });<br \/>\n     }<br \/>\n    }<br \/>\n    elems=document.getElementsByTagName('span');<br \/>\n    for (ielems=0; ielems<elems.length; ielems++) {\n     if (('' + elems[ielems].className) == 'source') {\n      \/\/if (document.title.replace('set1','') == '') { document.title+='set2'; }\n      elems[ielems].addEventListener(\"touchdown\", (ev) => { gev=ev; if (1 == 1) { setTimeout(delayedrefit, 500); } else { refit(ev); } });<br \/>\n     }<br \/>\n    }<br \/>\n    elems=document.getElementsByTagName('th');<br \/>\n    for (ielems=0; ielems<elems.length; ielems++) {\n     if (('' + elems[ielems].className) == 'source') {\n      \/\/if (document.title.replace('set1set2','') == '') { document.title+='set3'; }\n      elems[ielems].addEventListener(\"touchdown\", (ev) => { gev=ev; if (1 == 1) { setTimeout(delayedrefit, 500); } else { refit(ev); } });<br \/>\n     }<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n }<br \/>\n<\/code><\/p>\n<p> in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html--------------GETME\">the greatly changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html--------------GETME\">experimental_drag_and_drop.htm<\/a> HTML and Javascript and CSS assisting <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php----GETME\">the unchanged<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php----GETME\">chess_game.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php?version=----\" title=\"Click picture\">Chess Practice Game<\/a> for you to better practice your Chess &#8230;<\/p>\n<p><iframe style=\"width:100%;height:900px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php?version=----\"><\/iframe><\/p>\n<p> &#8230; further to yesterday&#8217;s <a title='Chess Game Practice Castling Tutorial' href='#cgpct'>Chess Game Practice Castling Tutorial<\/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\/chess-game-practice-touchdown-tutorial\/'>Chess Game Practice Touchdown Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cgpct'>Previous relevant <a target=_blank title='Chess Game Practice Castling Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/chess-game-practice-castling-tutorial\/'>Chess Game Practice Castling 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\/chess_game.php?version=---\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Chess Game Practice Castling Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game_castling.jpg\" title=\"Chess Game Practice Castling Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Chess Game Practice Castling Tutorial<\/p><\/div>\n<p>Maybe in mathematics, in school, you discussed limits <font size=1>(and\/or perhaps even &#8220;proof by contradiction&#8221; and\/or &#8220;paradoxes&#8221;)<\/font>.  You know, those fancy ways of saying if &#8220;such and such&#8221; you never finish the race, such as in <a target=_blank title=\"Zeno's Paradoxes Wikipedia webpage, thanks\" href='https:\/\/en.wikipedia.org\/wiki\/Zeno%27s_paradoxes'>&#8220;Achilles and the Tortoise&#8221;<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/en.wikipedia.org\/wiki\/Zeno%27s_paradoxes'><p>\nAchilles and the tortoise<br \/>\n<br \/>\nAchilles and the tortoise<br \/>\nIn a race, the quickest runner can never over\u00adtake the slowest, since the pursuer must first reach the point whence the pursued started, so that the slower must always hold a lead.<br \/>\n<br \/>\n\u2014\u200aas recounted by Aristotle, Physics VI:9, 239b15<br \/>\nIn the paradox of Achilles and the tortoise, Achilles is in a footrace with the tortoise. Achilles allows the tortoise a head start of 100 meters, for example. Suppose that each racer starts running at some constant speed, one faster than the other. After some finite time, Achilles will have run 100 meters, bringing him to the tortoise&#8217;s starting point. During this time, the tortoise has run a much shorter distance, say 2 meters. It will then take Achilles some further time to run that distance, by which time the tortoise will have advanced farther; and then more time still to reach this third point, while the tortoise moves ahead. Thus, whenever Achilles arrives somewhere the tortoise has been, he still has some distance to go before he can even reach the tortoise. As Aristotle noted, this argument is similar to the Dichotomy.[14] It lacks, however, the apparent conclusion of motionlessness.\n<\/p><\/blockquote>\n<p>Beware the project that runs the same way, by worrying too much about the one percent<sub>ers<\/sub>. On the other side of the ledger though, is that you learn far less when not trying to tackle any of those one percent<sub>ers<\/sub>.  With these thoughts swirling around we undertook the first of the &#8220;doozies&#8221; <font size=1>(amidst a lot of swearing and &#8220;what have we gotten ourselves into here&#8221; thoughts)<\/font> referenced in yesterday&#8217;s <a title='Chess Game Practice Basic Moves Tutorial' href='#cgpbmt'>Chess Game Practice Basic Moves Tutorial<\/a> &#8230;<\/p>\n<p><code><br \/>\nCastling <font size=1>(between a Rook and a King <a target=_blank title='Useful link, thanks' href='https:\/\/www.chessable.com\/blog\/how-to-castle-in-chess\/'>with a lot of provisos<\/a>)<\/font><br \/>\n<\/code><\/p>\n<p>We learnt things about the interface between &#8220;drag events&#8221; and events like &#8220;onmouseover&#8221;, the latter of which we needed to resort to, alas.  If you didn&#8217;t, life would be much easier, and try to design the initial premise, perhaps, better, so that those two wooooorrrrlllldddsss never have to meet <font size=1>(and just image the in-law get togethers!)<\/font>.<\/p>\n<p>We learnt, <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=e9_7GcQeiqw&#038;t=2m37s'>again<\/a>, that DOM methodology can come undone when there is no time gap between element arrangements that rely on a previous Javascript DOM arranged task.  Take a look at our setInterval Javascript function setup to help here &#8230;<\/p>\n<p><code><br \/>\n var domcmds=[];<br \/>\n<br \/> <br \/>\n function dodoms() {<br \/>\n  var stopit=false;<br \/>\n <font size=1>  # Irrelevant to blurb above ...<br \/>\n  if (document.getElementById('span4') && fouroh == '') { fouroh=document.getElementById('span4').outerHTML;  }<br \/>\n  if (document.getElementById('span5') && wsixoh == '') { wsixoh=document.getElementById('span5').outerHTML;  }<br \/>\n  if (document.getElementById('span6') && sixoh == '') { sixoh=document.getElementById('span6').outerHTML;  }<br \/>\n  if (document.getElementById('span0') && spanzero == '') { spanzero=document.getElementById('span0').outerHTML;  }<br \/>\n  if (document.getElementById('span1') && spanfive == '') { spanfive=document.getElementById('span1').outerHTML;  }<br \/>\n  if (document.getElementById('td22') && tdtte == '') { tdtte=document.getElementById('td22').outerHTML.split('&gt;')[0] + '&gt;&lt;\/td&gt;';  }<br \/>\n  if (document.getElementById('td211') && wtdtte == '') { wtdtte=document.getElementById('td211').outerHTML.split('&gt;')[0] + '&gt;&lt;\/td&gt;';  }<br \/>\n  if (document.getElementById('td193') && wwtdtte == '') { wwtdtte=document.getElementById('td193').outerHTML.split('&gt;')[0] + '&gt;&lt;\/td&gt;';  }<br \/>\n  if (document.getElementById('td11') && wwwtdtte == '') { wwwtdtte=document.getElementById('td11').outerHTML.split('&gt;')[0] + '&gt;&lt;\/td&gt;';  }<br \/>\n  <\/font><br \/>\n  # Relevant below ...<br \/>\n  for (var ikj=0; ikj&lt;domcmds.length; ikj++) {<br \/>\n    if (!stopit && domcmds[ikj] != '') {<br \/>\n     stopit=true;<br \/>\n     \/\/if (prompt(domcmds[ikj], domcmds[ikj])) {<br \/>\n      eval(domcmds[ikj]);<br \/>\n     \/\/}<br \/>\n     domcmds[ikj]='';<br \/>\n    }<br \/>\n   }<br \/>\n   \/\/domcmds=[];<br \/>\n }<br \/>\n<\/code> <\/p>\n<p> &#8230; called into play via &#8220;one only&#8221; call &#8230;<\/p>\n<p><code><br \/>\n  setInterval(dodoms, 1000);<br \/>\n<\/code><\/p>\n<p> &#8230; and given DOM <font size=1>(but doesn&#8217;t have to be)<\/font> jobs to do via Javascript commands, such as a few examples from our &#8220;Castling&#8221; code &#8230;<\/p>\n<p><code><br \/>\n    domcmds.push(\"document.getElementById('td202').innerHTML='\" + wsixoh + \"'; \");<br \/>\n    domcmds.push(\"document.getElementById('td203').innerHTML='\" + spanfive + \"'; \");<br \/>\n    domcmds.push(\"document.getElementById('tr8').innerHTML='\" + wwtdtte + \"' +  document.getElementById('tr8').innerHTML; itisthiscmove='b'; adddrop('\" + lohoh.split(' id=\"')[1].split('\"')[0] + \"'); \");<br \/>\n<\/code><\/p>\n<p> &#8230; the Javascript DOM actions of which would have a one second gap between each domcmds[] array member &#8220;call to action&#8221;.<\/p>\n<p>Again, why not try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-------------GETME\">experimental_drag_and_drop.htm<\/a> HTML and Javascript and CSS assisted <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php---GETME\">&#8220;fourth draft&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php---GETME\">chess_game.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php?version=---\" title=\"Click picture\">Chess Practice Game<\/a> for you to better practice your Chess &#8230;<\/p>\n<p><iframe style=\"width:100%;height:900px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php?version=---\"><\/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\/chess-game-practice-bcastling-tutorial\/'>Chess Game Practice Castling Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cgpbmt'>Previous relevant <a target=_blank title='Chess Game Practice Basic Moves Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/chess-game-practice-basic-moves-tutorial\/'>Chess Game Practice Basic Moves 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\/chess_game.php?version=--\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Chess Game Practice Basic Moves Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_piece_moved.jpg\" title=\"Chess Game Practice Basic Moves Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Chess Game Practice Basic Moves Tutorial<\/p><\/div>\n<p>Adding onto yesterday&#8217;s <a title='Chess Game Practice Layout Tutorial' href='#cgplt'>Chess Game Practice Layout Tutorial<\/a>&#8216;s basis for a more formal Chess game, today we feel like we&#8217;re in the calm &#8230;<\/p>\n<p><code><br \/>\nCoding for the basic pawn and knight and bishop and rook and queen and king chess piece moving rules<br \/>\n<\/code><\/p>\n<p> &#8230; before the storm, into the future, coding for &#8230;<\/p>\n<ul>\n<li>castling<\/li>\n<li>knowing when your King is in check or somebody has put your King in check<\/li>\n<li>knowing when an illegal move has happened regarding leaving your own King in check<\/li>\n<li>knowing when it&#8217;s Checkmate (or perhaps even Stalemate)<\/li>\n<\/ul>\n<p> &#8230; in the category of &#8220;doozy&#8221;.<\/p>\n<p>So, why not try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html------------GETME\">experimental_drag_and_drop.htm<\/a> HTML and Javascript and CSS assisted <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php--GETME\">&#8220;third draft&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php--GETME\">chess_game.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php?version=--\" title=\"Click picture\">Chess Practice Game<\/a> for you to better practice your Chess &#8230;<\/p>\n<p><iframe style=\"width:100%;height:900px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php?version=--\"><\/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\/chess-game-practice-basic-moves-tutorial\/'>Chess Game Practice Basic Moves Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cgplt'>Previous relevant <a target=_blank title='Chess Game Practice Layout Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/chess-game-practice-layout-tutorial\/'>Chess Game Practice Layout 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\/chess_game.php?version=-\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Chess Game Practice Layout Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game_layouts.gif\" title=\"Chess Game Practice Layout Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Chess Game Practice Layout Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='Chess Game Practice Tutorial' href='#cgpt'>Chess Game Practice Tutorial<\/a>&#8216;s Chess Game Practice web application, today, we&#8217;ve developed further, in a &#8220;layout&#8221; sense, to allow for &#8230;<\/p>\n<ul>\n<li>practice via Drag and Drop from the top emojis into your select Chess Board game positions &#8230; (no news there) &#8230; and, today &#8230;<\/li>\n<li>initiate the Chess Board for a traditional game of Chess between black and white players &#8230; and &#8230;<\/li>\n<li>weird layout of Chess Board where pieces are placed randomly and nonsensically<\/li>\n<\/ul>\n<p> &#8230; but no piece move logic yet!  That is for tomorrow, but this &#8220;layout&#8221; logic helped us get to a better piece identification set of protocols to work with.  So, try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-----------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-----------GETME\">experimental_drag_and_drop.htm<\/a> HTML and Javascript and CSS assisted <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php-GETME\">&#8220;second draft&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php-GETME\">chess_game.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php?version=-\" title=\"Click picture\">Chess Practice Game<\/a> for you to &#8230; practice (after choosing a layout) &#8230;<\/p>\n<p><iframe style=\"width:100%;height:900px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php?version=-\"><\/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\/chess-game-practice-layout-tutorial\/'>Chess Game Practice Layout Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cgpt'>Previous relevant <a target=_blank title='Chess Game Practice Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/chess-game-practice-tutorial\/'>Chess Game Practice 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\/chess_game.php?version=_\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Chess Game Practice Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.jpg\" title=\"Chess Game Practice Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Chess Game Practice Tutorial<\/p><\/div>\n<p>Further to the recent <a title='Sentence Shuffle Game Tutorial' href='#ssgt'>Sentence Shuffle Game Tutorial<\/a>&#8216;s concepts regarding &#8230;<\/p>\n<ul>\n<li>Drag and Drop<\/li>\n<li>emojis<\/li>\n<li>pseudo sentences (ie. the chess pieces)<\/li>\n<\/ul>\n<p> &#8230; we present our start to our Chess web application, we&#8217;re calling &#8220;Chess Game Practice&#8221; for now because it will take some time.  In today&#8217;s first draft &#8230;<\/p>\n<ul>\n<li>we assemble the chess pieces in a line (like an emoji sentence) up the top &#8230;<\/li>\n<li>draggable &#8230; onto &#8230;<\/li>\n<li>a black and white squared chess board &#8230; our &#8220;Drop Zone&#8221;<\/li>\n<\/ul>\n<p> &#8230; and the chess pieces can be dragged around the board as well, but no checks on legal or illegal moves yet, nor the default starting positions to a game.  Anyway, <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html----------GETME\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html----------GETME\">experimental_drag_and_drop.htm<\/a> HTML and Javascript and CSS underpins a calling &#8220;first draft&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php_GETME\">chess_game.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php?version=_\" title=\"Click picture\">Chess Practice Game<\/a> for you to &#8230; practice &#8230;<\/p>\n<p><iframe style=\"width:100%;height:900px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/chess_game.php?version=_\"><\/iframe><\/p>\n<p><i><b>Did you know?<\/b><\/i><\/p>\n<p>A little esoteric, we know, but research (thanks to <a target=_blank title='Useful link' href='https:\/\/www.quackit.com\/html\/html_editors\/scratchpad\/?app=charset_ref&#038;entity=nobreak&#038;hexadecimal=02060&#038;decimal=8288&#038;unicodename=word_joiner'>this useful link<\/a>) got us to (<a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=e9_7GcQeiqw&#038;t=2m37s'>finally<\/a>) discover the <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=3qf4yUMxnjw'>Clayton&#8217;s<\/a> emoji.  In other words, an emoji taking no (or little to no) screen display space but differentiates one emoji representation from another when you want to just differentiate via &#8220;innerHTML&#8221; content, for HTML elements.   It&#8217;s (the &#8220;nobreak&#8221;) &#8230;<\/p>\n<p><code><br \/>\n&#8288;<br \/>\n<\/code><\/p>\n<p>You missed it?!  Try &#8230;<\/p>\n<p><code><br \/>\n&amp;#8288;<br \/>\n<\/code><\/p>\n<p>Why, regarding chess, are we interested?  It means regarding the two black rooks, for example, adding a &amp;#8288; to its display contents makes little difference, but we can hone in on an exact black rook, &#8220;innerHTML&#8221; wise, in the code.<\/[><\/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\/chess-game-practice-tutorial\/'>Chess Game Practice Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ssgt'>Previous relevant <a target=_blank title='Sentence Shuffle Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/sentence-shuffle-game-tutorial\/'>Sentence Shuffle Game 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\/experimental_drag_and_drop.htm?sourcenum=#shuffle=\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Sentence Shuffle Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop_shuffle_game.jpg\" title=\"Sentence Shuffle Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Sentence Shuffle Game Tutorial<\/p><\/div>\n<p>More genericization onto yesterday&#8217;s <a title='Numbers Guessing Game Tutorial' href='#nggt'>Numbers Guessing Game Tutorial<\/a>&#8216;s &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/numbers-guessing-game-tutorial\/'>\n<ul>\n<li>allow for the number of table cells to be other than 9 (with <a target=_blank title='Animal Mineral Vegetable Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/animal-mineral-vegetable-game-tutorial' >Animal Mineral Vegetable Game Tutorial<\/a> where it is 3 in total) &#8230; and today &#8230;<\/li>\n<li>allow the number of cells across in a column not be 3<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; has us considering making the drag<sub>ee<\/sub> be made up of more than one part, today, continuing on with our Drag and Drop functionalities of recent times.<\/p>\n<p>The first <i>game<\/i> type of application of this, we sort of stumbled upon, trying it, is to create a &#8230;<\/p>\n<p><code><br \/>\nSentence Shuffle game<br \/>\n<\/code><\/p>\n<p> &#8230; <font size=1>(good for <a target=_blank title='English as a second or foreign language' href='https:\/\/en.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a> perhaps)<\/font> where a sentence&#8217;s words are shuffled and the user &#8220;gets satisfaction&#8221; <font size=1>(euphemism for &#8220;we&#8217;re not keeping score&#8221;)<\/font> from piecing a sentence back together again.  Arguments for this involve &#8230;<\/p>\n<table>\n<tr>\n<th>Get ? or &#038; argument label<\/th>\n<th>Use<\/th>\n<\/tr>\n<tr>\n<td>sourcenum<\/td>\n<td>Count of words in sentence or less than or equal to 0 for web application to count them<\/td>\n<\/tr>\n<tr>\n<td>shuffle<\/td>\n<td>Any mention causes sentence word shuffling to occur <font size=1>&#8230; game on!<\/font><\/td>\n<\/tr>\n<tr>\n<td>yourblurb<\/td>\n<td>Optionally define your own sentence<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; for <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html------GETME\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html------GETME\">experimental_drag_and_drop.htm<\/a> HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm\" title=\"Click picture\">game web application<\/a> basis, is also playable below &#8230;<\/p>\n<p><iframe style=width:100%;height:600px; src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm?sourcenum=&#038;shuffle=&#038;yourblurb=The+quick+brown+fox+jumps+over+the+lazy+dog.'><\/iframe><\/p>\n<p><i><b>Did you know?<\/b><\/i><\/p>\n<p>We wanted to improve functionality, by changing our usual &#8220;-&#8221; hardcoding to a link &#8220;+&#8221; idea whereby the user can enter in their own &#8220;yourblurb&#8221; sentence, as above.   It being collected in a Javascript prompt popup window, the user can enter emojis (via control-command-space for macOS or Mac OS X, logo key + . (period) for Windows, control=space for iOS, top left + for Android keyboard) as part of the sentence mix, the only rule being a space character separates words in a sentence with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html---------GETME\">our further changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html---------GETME\">experimental_drag_and_drop.htm<\/a> HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm?sourcenum=&#038;shuffle=&#038;yourblurb=The+quick+brown+fox+jumps+over+the+lazy+dog.\" title=\"Click picture\">sentence shuffle game web application<\/a>.<\/p>\n<p>And then we thought we should also allow for a Pictogram Puzzle scenario <font size=1>(where every picture is worth a thousand words, they say)<\/font> with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html----------GETME\">our further<sub>er<\/sub> changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html----------GETME\">experimental_drag_and_drop.htm<\/a> HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm?x=x&#038;yourblurb=https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%230%230%23150%23120%23I%23can%23see%23you%20https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%23150%230%23150%23120%20https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%230%23120%23150%23120%20https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%23150%23120%23150%23120&#038;sourcenum=&#038;yourXblurb=https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%230%230%23150%2390%20https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%23150%230%23150%2390%20https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%230%2390%23150%2390%20https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%23150%2390%23150%2390&#038;sourceXnum=&#038;yourXblurb=https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%230%230%23150%23150%20https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%23150%230%23150%23150%20https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%230%23150%23150%23150%20https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%23150%23150%23150%23150&#038;sourceXnum=&#038;yourXblurb=Wow%2C%20I%20had%20no%20idea.&#038;yourXblurb=The%20rain%20in%20Spain%20falls%20mainly%20on%20the%20plain.&#038;x=x&#038;sourceXnum=&#038;shuffle\" title=\"Click picture\">sentence image shuffle game web application<\/a> <font size=1>(thanks to <a target=_blank title='https:\/\/www.puzzles-on-line-niche.com' href='https:\/\/www.puzzles-on-line-niche.com#\/images\/Rebus1pictograph.jpg'>https:\/\/www.puzzles-on-line-niche.com<\/a>)<\/font> &#8230;<\/p>\n<p><iframe style=width:100%;height:900px; src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm?x=x&#038;yourblurb=https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%230%230%23150%23120%23I%23can%23see%23you%20https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%23150%230%23150%23120%20https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%230%23120%23150%23120%20https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%23150%23120%23150%23120&#038;sourcenum=&#038;yourXblurb=https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%230%230%23150%2390%20https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%23150%230%23150%2390%20https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%230%2390%23150%2390%20https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%23150%2390%23150%2390&#038;sourceXnum=&#038;yourXblurb=https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%230%230%23150%23150%20https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%23150%230%23150%23150%20https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%230%23150%23150%23150%20https%3A%2F%2Fwww.puzzles-on-line-niche.com%2Fimages%2FRebus1pictograph.jpg%23150%23150%23150%23150&#038;sourceXnum=&#038;yourXblurb=Wow%2C%20I%20had%20no%20idea.&#038;yourXblurb=The%20rain%20in%20Spain%20falls%20mainly%20on%20the%20plain.&#038;x=x&#038;sourceXnum=&#038;shuffle='><\/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\/sentence-shuffle-game-tutorial\/'>Sentence Shuffle Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='nggt'>Previous relevant <a target=_blank title='Numbers Guessing Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/numbers-guessing-game-tutorial\/'>Numbers Guessing Game 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\/numbers_guessing_game.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Numbers Guessing Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/numbers_guessing_game.jpg\" title=\"Numbers Guessing Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Numbers Guessing Game Tutorial<\/p><\/div>\n<p>We&#8217;ve been working on aspects to the genericity of the table that is &#8230;<\/p>\n<blockquote style=\"font-size:58px;text-shadow:-1px 1px 1px #ff2d95;\"><p>\nThe Drop Zone\n<\/p><\/blockquote>\n<p> &#8230; do do &#8230; do do &#8230; do do &#8230; do do &#8230; do do do do do do do do do do do do &#8230; yesterday&#8217;s threat <font size=1>&#8220;now so yesterday&#8221;<\/font> being &#8230;<\/p>\n<ul>\n<li>allow for the number of table cells to be other than 9 (with <a target=_blank title='Animal Mineral Vegetable Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/animal-mineral-vegetable-game-tutorial' >Animal Mineral Vegetable Game Tutorial<\/a> where it is 3 in total) &#8230; and today &#8230;<\/li>\n<li>allow the number of cells across in a column not be 3<\/li>\n<\/ul>\n<p> &#8230; in a <font size=1>(very difficult)<\/font> Numbers Guessing game for numbers from 1 to 99 that regular readers may be familiar with as the (same content <font size=1>(and mentioned at <a target=_blank title='Useful link, thanks' href='https:\/\/leisureguy.ca\/category\/math\/'>this link<\/a> &#8230; thanks &#8230;)<\/font> as the) Numbers Guessing game at this blog, but presented using a Drag and Drop modus operandi.<\/p>\n<p>Feel free to try our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/numbers_guessing_game.php_GETME\">first draft<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/numbers_guessing_game.php\">game<\/a>, which leans on <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-----GETME\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-----GETME\">experimental_drag_and_drop.htm<\/a> HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm\" title=\"Click picture\">game web application<\/a> basis, is also playable below &#8230;<\/p>\n<p><iframe style=\"width:100%;height:800px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/numbers_guessing_game.php\"><\/iframe><\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>On your smaller devices we found the Numbers Guessing Game a bit hard to use.  As such, <i>we researched and played around with &#8220;drag and drop&#8221; cursor ideas<\/i> unsuccessfully to end up, instead, not thinking about the cursor <font size=1>(albeit, we find that idea cuter)<\/font> but rather styling the target table cell&#8217;s background colour and informing the user of that up at the top button wording in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/numbers_guessing_game.php-GETME\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/numbers_guessing_game.php-GETME\">second draft<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/numbers_guessing_game.php\">game<\/a>, which leans on <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html--------GETME\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html--------GETME\">experimental_drag_and_drop.htm<\/a> HTML and Javascript and CSS <font color=blue>helper<\/font>&#8230;<\/p>\n<p><code><br \/>\nvar lastbco=null;<br \/>\n<br \/>\nconst target = document.querySelector(\"#target\");<br \/>\ntarget.addEventListener(\"dragover\", (ev) => {<br \/>\n  if (lastbco) {  lastbco.style.backgroundColor='white'; lastbco=null;  }<br \/>\n  console.log(\"dragOver \" + ev.target.id + ' ' + ('' + ev.target.style.backgroundColor).replace('white','') + ' ' + document.body.innerHTML.indexOf('tab' + 'lece' + 'llb' + 'c'));<br \/>\n  ev.preventDefault();<br \/>\n  <font color=blue>if (('' + ev.target.id).indexOf('td') == 0 && ('' + ev.target.style.backgroundColor).trim().replace('white','') == '' && document.body.innerHTML.indexOf('Numbe' + 'rs Guessi' + 'ng Ga' + 'me') != -1) {<br \/>\n    \/\/document.getElementById(sourceid).style.opacity='0.6';<br \/>\n    lastbco=ev.target;<br \/>\n    ev.target.style.backgroundColor='pink';<br \/>\n    if (document.getElementById('mybut')) {<br \/>\n      if (document.getElementById('mybut').innerHTML.indexOf(' .. ') == -1) {<br \/>\n        document.getElementById('mybut').innerHTML=document.getElementById('mybut').innerHTML.replace(' Game Game', ' Game');<br \/>\n        document.getElementById('mybut').innerHTML+=' .. current guess is ' + ev.target.innerHTML;<br \/>\n      } else {<br \/>\n        document.getElementById('mybut').innerHTML=document.getElementById('mybut').innerHTML.split(' .. ')[0] + ' .. current guess is ' + ev.target.innerHTML;<br \/>\n      }<br \/>\n    }<br \/>\n  }<\/font><br \/>\n  <i>\/\/document.getElementById(sourceid).style.cursor='progress';<br \/>\n  \/\/ev.target.style.cursor='progress';<br \/>\n  \/\/ev.target.dataTransfer.dropEffect = 'progress';<\/i><br \/>\n});<br \/>\n<\/code><\/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\/numbers-guessing-game-tutorial\/'>Numbers Guessing Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pmgt'>Previous relevant <a target=_blank title='Planet Moon Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/planet-moon-game-tutorial\/'>Planet Moon Game 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\/planet_moon_game.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Planet Moon Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/planet_moon_game.jpg\" title=\"Planet Moon Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Planet Moon Game Tutorial<\/p><\/div>\n<p>Another thing that there is nine of <font size=1>(as contentious as it is regarding Pluto)<\/font> is Planets in the Solar System, revolving around the Sun.  And so, in keeping with a lot of the same design as yesterday&#8217;s <a title='Enneagram Type Game Tutorial' href='#etgt'>Enneagram Type Game Tutorial<\/a> we have a Planet Moon Game to present for you to play around with today.<\/p>\n<p>Again, PHP uses a framework of Experimental Drag and Drop HTML and Javascript and CSS, mainly via one PHP codeline &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n  $templategame=file_get_contents('.\/experimental_drag_and_drop.htm');<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; and, perhaps, your curiosity that we have not &#8220;passed&#8221; data via $_GET[] or $_POST[] arguments, but rather just the simple act of &#8230;<\/p>\n<ul>\n<li>moulding and manipulating (eg. arranging &#8220;callback&#8221; logic means, as used below) that $templategame &#8220;template&#8221; for our purposes <font size=1>&#8230; nga ha ha ha ha ha ha ha ha &#8230;<\/font> but we digress &#8230;<\/li>\n<li>simply &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n  echo $templategame;<br \/>\n<\/code><br \/>\n?&gt;<br \/>\n &#8230; outputs a webpage &#8230; <\/li>\n<li>and on the way back to play again, we use $_GET[&#8216;score&#8217;] and $_GET[&#8216;secs&#8217;] (in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html---GETME\">experimental_drag_and_drop.html<\/a> HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm\" title=\"Click picture\">game web application<\/a>) to keep the ball rolling back to the game specific PHP we use &#8230;<br \/>\n<code><br \/>\n  location.href=document.getElementById('callback').value + '?score=' + score + '&secs=' + secs;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; in our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/planet_moon_game.php-GETME\">first draft<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/planet_moon_game.php\">game<\/a>, which leans on <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-----GETME\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-----GETME\">experimental_drag_and_drop.html<\/a> HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm\" title=\"Click picture\">game web application<\/a> basis, is also playable below &#8230;<\/p>\n<p><iframe style=\"width:100%;height:800px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/planet_moon_game.php\"><\/iframe><\/p>\n<p><i><b>Stop Press<\/b><\/i><\/p>\n<p>We fully concur with any adage that goes &#8230;<\/p>\n<blockquote><p>\nYou learn most from your mistakes\n<\/p><\/blockquote>\n<p> &#8230; just as we&#8217;re curious about &#8220;the things that go wrong&#8221;, and not having them repeat!   Same with pooches!<\/p>\n<p>Take our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/planet_moon_game.php--GETME\">first to<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/planet_moon_game.php--GETME\">second draft<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/planet_moon_game.php\">game<\/a> <font size=1>(to the opera, would be preferable)<\/font>.  We wondered why, occasionally, with the &#8220;first draft&#8221; it would hang.  It took us a half day to realize, as you could yourself have tweaked to a lot quicker if you had followed the adage &#8230;<\/p>\n<p><code><br \/>\nHanging issues mostly team up with code within a loop<br \/>\n<\/code><\/p>\n<p>The situation, we&#8217;ve reasoned, is that we had that PHP $badlist variable store a comma separated list of planets with either zero moons or more than one moon randomly selected representing it.  We&#8217;d assumed, yesterday, not that we&#8217;d put it in words, but in logic, that this list would not <font size=1>(have the same length or)<\/font> be the same as a (new $goodlist variable) list of planets with either zero moons or selected while collecting the random list of Moon\/Planet combinations &#8230; ie. we assumed in the list would be a Planet with only one of its Moons randomly selected &#8230; mistake!!!  <font color=blue>Better<\/font> is &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n  <font color=blue>$goodlist=',Mercury,Venus,';<br \/>\n  $badlist=',Mercury,Venus,';<\/font><br \/>\n<br \/>\n  <font color=blue>while (strlen($goodlist) == strlen($badlist)) {<br \/>\n  $goodlist=',Mercury,Venus,';<\/font><br \/>\n  $badlist=',Mercury,Venus,';<br \/>\n  <br \/>\n  $correctans=rand(0,8);<br \/>\n  $sofar=';';<br \/>\n  for ($i=0; $i&lt;9; $i++) {<br \/>\n    $j=rand(0, (-1 + sizeof($wikidesignations)));<br \/>\n    if ($crandlist == '') {<br \/>\n      $crandlist='' . $j;<br \/>\n      $sofar.=$wikidescriptions[$j] . ';';<br \/>\n      <font color=blue>if (strpos($goodlist, $wikidescriptions[$j]) === false) {   $goodlist.=$wikidescriptions[$j] . ',';     }<\/font><br \/>\n    } else if (strpos((',' . $crandlist . ','), (',' . $j . ',')) !== false) { \/\/ || strpos($sofar, ';' . $wikidescriptions[$j] . ';') !== false) {<br \/>\n      while (strpos((',' . $crandlist . ','), (',' . $j . ',')) !== false) { \/\/ || strpos($sofar, ';' . $wikidescriptions[$j] . ';') !== false) {<br \/>\n        $j=rand(0, (-1 + sizeof($wikidesignations)));<br \/>\n      }<br \/>\n      $crandlist.=',' . $j;<br \/>\n      $sofar.=$wikidescriptions[$j] . ';';<br \/>\n      <font color=blue>if (strpos($goodlist, $wikidescriptions[$j]) === false) {   $goodlist.=$wikidescriptions[$j] . ',';     }<\/font><br \/>\n    } else {<br \/>\n      if (strpos($sofar, ';' . $wikidescriptions[$j] . ';') !== false) { $badlist.=$wikidescriptions[$j] . ','; }<br \/>\n      $crandlist.=',' . $j;<br \/>\n      $sofar.=$wikidescriptions[$j] . ';';<br \/>\n      <font color=blue>if (strpos($goodlist, $wikidescriptions[$j]) === false) {   $goodlist.=$wikidescriptions[$j] . ',';     }<\/font><br \/>\n    }<br \/>\n  }<br \/>\n  <font color=blue>}  <\/font><br \/>\n<\/code><br \/>\n?&gt;<\/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\/new-enneagram-type-game-tutorial\/'>Planet Moon Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='etgt'>Previous relevant <a target=_blank title='Enneagram Type Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/planet-moon-game-tutorial\/'>Enneagram Type Game 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\/enneagram_type_game.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Australian Street Type Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/enneagram_type_game.jpg\" title=\"Australian Street Type Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Enneagram Type Game Tutorial<\/p><\/div>\n<p>A lot of us wonder what goes towards making up our personalities.  We remember doing a <a target=Myers-Briggs href='https:\/\/www.google.com\/search?q=myers-briggs&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=myers-briggs&#038;gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIJCAEQABhDGIoFMgcIAhAAGIAEMgcIAxAAGIAEMgcIBBAAGIAEMgcIBRAAGIAEMg0IBhAuGMcBGNEDGIAEMgcIBxAAGIAEMgcICBAAGIAEMgcICRAAGIAE0gEIMzYzN2owajSoAgCwAgA&#038;sourceid=chrome&#038;ie=UTF-8'>Myers-Briggs<\/a> test for some job as part of the vetting process.  We thought we&#8217;d write another experimental drag and drop game, like yesterday&#8217;s  <a title='Australian Street Type Game Tutorial' href='#astgt'>Australian Street Type Game Tutorial<\/a>, regarding &#8230;<\/p>\n<blockquote><p>\n<a target=_blank href=https:\/\/www.enneagraminstitute.com\/type-descriptions>Enneagram Types<\/a>\n<\/p><\/blockquote>\n<p> &#8230; of human personalities, and we found a webpage <a target=_blank href=https:\/\/www.psychologyjunkie.com\/enneagram-famous-people\/>linking these categorizations to Hollywood Movie Stars<\/a> for you to get the gist of the ideas.  We also thank <a target=_blank href=https:\/\/wikipedia.org>Wikipedia<\/a> as our source for Movie Star images.<\/p>\n<p>It being a topic &#8230;<\/p>\n<ol>\n<li>beyond our ken<\/li>\n<li>outside our usual subject matter<\/li>\n<\/ol>\n<p> &#8230; you may be wondering how we stumbled upon the idea?  We let <a target=_blank title=Google href='https:\/\/google.com'>Google<\/a> autocomplete our &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title=? href='https:\/\/www.google.com\/search?q=nine+types+of+&#038;rlz=1C5CHFA_enAU973AU973&#038;sxsrf=AB5stBgKOZ3R9OfKPslQyEVW_q0hC8SvzA%3A1690497285559&#038;ei=BfHCZJfpIcahseMPu5al8AE&#038;oq=nine+types+of+&#038;gs_lp=Egxnd3Mtd2l6LXNlcnAiDm5pbmUgdHlwZXMgb2YgKgIIATIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAAGIAEMgUQLhiABDIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgARImp4BUABY2DlwAHgBkAEAmAHYAaABoBSqAQYwLjEyLjK4AQHIAQD4AQHCAgcQIxiKBRgnwgIEECMYJ8ICCxAuGIoFGNQCGJECwgIIEAAYigUYkQLCAgsQLhiABBixAxiDAcICCxAAGIAEGLEDGIMBwgIREC4YgAQYsQMYgwEYxwEY0QPCAggQLhiKBRiRAsICExAuGIoFGLEDGIMBGMcBGNEDGEPCAgcQABiKBRhDwgIHEC4YigUYQ8ICDRAAGIoFGLEDGIMBGEPCAgoQABiKBRixAxhDwgIIEAAYgAQYsQPCAgsQLhiKBRixAxiRAsICCBAuGLEDGIAEwgIOEC4YgAQYsQMYgwEY1ALCAhcQLhixAxiABBiXBRjcBBjeBBjgBNgBAeIDBBgAIEGIBgG6BgYIARABGBQ&#038;sclient=gws-wiz-serp'>nine types of <\/a><br \/>\n<\/code><\/p>\n<p> &#8230; search textbox typing, fully expecting &#8220;Carol&#8221;<sub title='Well, you had to be there ...'>?<\/sub> to be at the top of the list when we saw &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title=? href='https:\/\/www.google.com\/search?q=nine+types+of+enneagram&#038;rlz=1C5CHFA_enAU973AU973&#038;sxsrf=AB5stBgcETOXMtG8UFv6DDlokZCzMcVm-A%3A1690514138499&#038;ei=2jLDZJyAHsXQ2roP6b2vuA0&#038;oq=nine+types+of+&#038;gs_lp=Egxnd3Mtd2l6LXNlcnAiDm5pbmUgdHlwZXMgb2YgKgIIATIHECMYigUYJzIHECMYigUYJzIHECMYigUYJzIHEAAYigUYQzIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAuGIAEMgUQABiABEjQrgZQuQZYuQZwAXgBkAEAmAHZAaAB2QGqAQMyLTG4AQHIAQD4AQHCAgoQABhHGNYEGLADwgIUEC4YgAQYlwUY3AQY3gQY4ATYAQHiAwQYACBBiAYBkAYIugYGCAEQARgU&#038;sclient=gws-wiz-serp'>nine types of enneagram<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; to flesh out a family of &#8220;game interest&#8221;, we hope?!<\/p>\n<p>Our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/enneagram_type_game.php-GETME\">first draft<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/enneagram_type_game.php\">game<\/a> is also playable below &#8230;<\/p>\n<p><iframe style=\"width:100%;height:1200px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/enneagram_type_game.php\"><\/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\/enneagram-type-game-tutorial\/'>Enneagram Type Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='astgt'>Previous relevant <a target=_blank title='Australian Street Type Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/australian-street-type-game-tutorial\/'>Australian Street Type Game 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\/street_type_game.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Australian Street Type Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/street_type_game.jpg\" title=\"Australian Street Type Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Australian Street Type Game Tutorial<\/p><\/div>\n<p>The experimental drag and drop theme continues on today, after <a title='Experimental Drag and Drop Game Tutorial' href='#eddgt'>Experimental Drag and Drop Game Tutorial<\/a>&#8216;s debut game application, with a <a target=_blank href=https:\/\/en.wikipedia.org\/wiki\/Street_suffix>Wikipedia<\/a> inspired &#8220;Australian Street Type&#8221; game today.<\/p>\n<p>Huh?!  Well, you know those street names that baffle?  Or are we easily baffleable?!  Anyway, you had to be there.  And if you ever feel you&#8217;re alone with an interest, just look it up in <a target=_blank href=https:\/\/en.wikipedia.org>Wikipedia<\/a> or <a target=_blank href=https:\/\/google.com>Google<\/a> and you&#8217;re almost sure to find out &#8230;<\/p>\n<blockquote><p>\nyou are not alone\n<\/p><\/blockquote>\n<p>Yes, our Wikipedia page mentioned Australian Street Type Designations with their lawyerly Australian Street Type Descriptions.  Who could ask for more?  <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=kTcRRaXV-fg'>Well?!<\/a><\/p>\n<p>To make this happen we wrote some PHP, which leans on <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html---GETME\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html---GETME\">experimental_drag_and_drop.html<\/a> HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm\" title=\"Click picture\">game web application<\/a> basis, or template, to mould and bend towards our purpose <font size=1>&#8230; nga ha ha!<\/font><\/p>\n<p>Our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/street_type_game.php_GETME\">first draft<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/street_type_game.php\">game<\/a> is also playable below &#8230;<\/p>\n<p><iframe style=\"width:100%;height:800px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/street_type_game.php\"><\/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\/new-experimental-drag-and-drop-game-tutorial\/'>New Experimental Drag and Drop Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='eddgt'>Previous relevant <a target=_blank title='Experimental Drag and Drop Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/experimental-drag-and-drop-game-tutorial\/'>Experimental Drag and Drop Game 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\/experimental_drag_and_drop.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Experimental Drag and Drop Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop_game.jpg\" title=\"Experimental Drag and Drop Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Experimental Drag and Drop Game Tutorial<\/p><\/div>\n<p>It can be interesting turning a &#8220;concept&#8221; (or even a &#8220;proof of concept&#8221; web application) into an, on the side, &#8220;game&#8221; web application, and that way, learn what&#8217;s possible via user action.  This is how we felt about yesterday&#8217;s <a title='Experimental Drag and Drop Primer Tutorial' href='#eddpt'>Experimental Drag and Drop Primer Tutorial<\/a> and that teamed with the wonder about how we could add some useful complexity to our &#8220;Experimental Drag and Drop&#8221; web application&#8217;s &#8230;<\/p>\n<blockquote><p>\nDrop Zone\n<\/p><\/blockquote>\n<p>Can &#8220;inheritance&#8221; be harnessed to make it work for some complexity of nested HTML elements inside that &#8220;Drop Zone&#8221; element when the document.body&#8217;s onload event happens?  We wondered whether a Brady Bunch style 3&#215;3 table could be the go?   And whether the nine cells could have a &#8220;score&#8221; associated with them, and that set of scores be changing over time to make the game more challenging and interesting?  Well &#8230;<\/p>\n<blockquote><p>\nYes\n<\/p><\/blockquote>\n<p> &#8230; is the answer <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html--GETME\">regarding making a game out of a proof of concept<\/a> with our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html--GETME\">experimental_drag_and_drop.html<\/a> HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm\" title=\"Click picture\">game web application<\/a> (also shown below) using these techniques, about which we think some of you readers will be interested?!<\/p>\n<p><iframe style=width:100%;height:600px; src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm'><\/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\/experimental-drag-and-drop-game-tutorial\/'>Experimental Drag and Drop Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='eddpt'>Previous relevant <a target=_blank title='Experimental Drag and Drop Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/experimental-drag-and-drop-primer-tutorial\/'>Experimental Drag and Drop 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\/experimental_drag_and_drop.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Experimental Drag and Drop Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.jpg\" title=\"Experimental Drag and Drop Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Experimental Drag and Drop Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve added the word <i>experimental<\/i> into today&#8217;s blog posting title, mainly because our <a target=_blank title='DataTransfer object information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DataTransfer'>first of two inspirational webpage sources<\/a> (last modified on 23\/02\/2023) regarding <font size=1>somewhat<\/font> alternative <a target=_blank title='Drag and Drop information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Drag_and_drop'>&#8220;Drag and Drop&#8221;<\/a> functionalities told us, regarding the <i>DataTransfer<\/i> object informational &#8220;DataTransfer&#8221; webpage &#8230;<\/p>\n<blockquote cite='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DataTransfer'><p>\nExperimental: This is an experimental technology<br \/>\nCheck the Browser compatibility table carefully before using this in production.\n<\/p><\/blockquote>\n<p> &#8230; but our testing of the methodologies on various platforms hasn&#8217;t totally failed yet on any of the several desktop and mobile platform scenarios we&#8217;ve tried.  On mobile, we just held on for a sustained touch (down) to make it possible.  So maybe the industry has caught up with the ideas?  We&#8217;re hoping so, because &#8220;drag and drop&#8221; is a kind of natural thing online users think of to do, and people associate it with &#8220;getting things done&#8221; we reckon.<\/p>\n<p>Anyway, we relied on the great source code of the second of two inspirational webpages <a target=_blank title='DataTransfer: setData() method' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DataTransfer\/setData'>DataTransfer: setData() method<\/a>, thanks &#8230;<\/p>\n<blockquote cite='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DataTransfer\/setData'><p>\nThe DataTransfer.setData() method sets the drag operation&#8217;s drag data to the specified data and type. If data for the given type does not exist, it is added at the end of the drag data store, such that the last item in the types list will be the new type. If data for the given type already exists, the existing data is replaced in the same position. That is, the order of the types list is not changed when replacing data of the same type.\n<\/p><\/blockquote>\n<p> &#8230; to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-GETME\">get us going<\/a> with our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-GETME\">&#8220;proof of concept&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html\" title=\"Click picture\">web application<\/a> (also shown below) using these techniques, about which we think some of you readers will be interested?!<\/p>\n<p><iframe style=width:100%;height:500px; src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html'><\/iframe><\/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='#d60044' onclick='var dv=document.getElementById(\"d60044\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/drag-and-drop\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60044' 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='#d60054' onclick='var dv=document.getElementById(\"d60054\"); 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='d60054' 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='#d60254' onclick='var dv=document.getElementById(\"d60254\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/wikipedia\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60254' 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='#d60263' onclick='var dv=document.getElementById(\"d60263\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/table\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60263' 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='#d60270' onclick='var dv=document.getElementById(\"d60270\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/planet\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60270' 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='#d60469' onclick='var dv=document.getElementById(\"d60469\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/table\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60469' 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='#d60482' onclick='var dv=document.getElementById(\"d60482\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/esl\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60482' 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='#d60556' onclick='var dv=document.getElementById(\"d60556\"); 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='d60556' 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='#d60562' onclick='var dv=document.getElementById(\"d60562\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/board\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60562' 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='#d60569' onclick='var dv=document.getElementById(\"d60569\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/move\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60569' 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='#d60575' onclick='var dv=document.getElementById(\"d60575\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/setInterval\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60575' 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='#d60589' onclick='var dv=document.getElementById(\"d60589\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/touchdown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60589' 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='#d60595' onclick='var dv=document.getElementById(\"d60595\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/contenteditable\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60595' 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='#d60602' onclick='var dv=document.getElementById(\"d60602\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/scene\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60602' 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='#d60614' onclick='var dv=document.getElementById(\"d60614\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60614' 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='#d60630' onclick='var dv=document.getElementById(\"d60630\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/logic\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60630' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Finally, after the recent Chess Game Correspondence Tutorial, today, we tackle &#8230; Chess check logic &#8230; regarding &#8230; castling knowing when your King is in check or somebody has put your King in check knowing when an illegal move has &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/chess-game-check-logic-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,15,37],"tags":[4441,69,1788,1832,85,1885,1835,103,111,1653,3697,2661,4360,183,4444,184,2372,4456,4445,4439,218,222,1604,4033,1709,3136,2370,2442,3928,4452,2369,1654,297,327,2365,349,1750,354,380,2634,385,399,2751,409,418,3336,430,452,2730,476,520,541,2258,576,590,4442,626,629,652,4455,4446,1807,3373,2240,739,1817,795,4447,871,3267,919,1738,932,4448,4440,952,970,2519,2976,997,1761,4453,2210,2254,1083,1094,1095,4451,2175,1841,1114,2435,1119,1125,1133,1137,1784,2272,4068,2740,1159,4454,4449,4443,3325,1294,4450,1319,1345,1404,1411,4031,2257,1481],"class_list":["post-60630","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-actual","tag-ajax","tag-algorithm","tag-annotation","tag-apache","tag-argument","tag-arguments","tag-array","tag-attachment","tag-base64","tag-base64_decode","tag-base64_encode","tag-board","tag-camera","tag-camera-app","tag-canvas","tag-check","tag-checkmate","tag-chess","tag-clicking","tag-code","tag-collaborate","tag-collaboration","tag-commentary","tag-communication","tag-conduit","tag-contain","tag-contenteditable","tag-correspondence","tag-correspondent","tag-cover","tag-data-uri","tag-data-url","tag-did-you-know","tag-dimensions","tag-document","tag-document-root","tag-dom","tag-email","tag-email-address","tag-emoji","tag-eval","tag-exim","tag-external-javascript","tag-file","tag-filename","tag-file_put_contents","tag-form","tag-formdata","tag-game","tag-google-chrome","tag-graphics","tag-height","tag-html","tag-image","tag-image-file","tag-ios","tag-ip-address","tag-javascript","tag-king","tag-layout","tag-link","tag-logic","tag-mail-server","tag-mailto","tag-message","tag-mobile","tag-move-moves","tag-onmouseover","tag-ontouchdown","tag-personalization","tag-photo","tag-php","tag-piece","tag-placement","tag-player","tag-post","tag-postcard","tag-privacy","tag-programming","tag-prompt","tag-recipient","tag-rule","tag-rules","tag-safari","tag-scale","tag-scaling","tag-scenario","tag-scene","tag-scribble","tag-security","tag-send","tag-sentence","tag-setinterval","tag-share","tag-sharing","tag-signature","tag-size","tag-sizing","tag-smart-device","tag-sms","tag-sms-number","tag-strategy","tag-temporary","tag-toggle","tag-touch","tag-touchdown","tag-tutorial","tag-url","tag-web-browser","tag-web-server","tag-web-share-api","tag-width","tag-xmlhttprequest"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60630"}],"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=60630"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60630\/revisions"}],"predecessor-version":[{"id":60668,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60630\/revisions\/60668"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=60630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=60630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=60630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}