{"id":31773,"date":"2017-07-29T03:01:32","date_gmt":"2017-07-28T17:01:32","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=31773"},"modified":"2017-07-29T09:11:00","modified_gmt":"2017-07-28T23:11:00","slug":"htmljavascript-guided-snake-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-guided-snake-game-primer-tutorial\/","title":{"rendered":"HTML\/Javascript Guided Snake Game Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/snakes_via_cursor.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML\/Javascript Guided Snake Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/snakes_via_cursor.jpg\" title=\"HTML\/Javascript Guided Snake Game Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Guided Snake Game Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve got a new (web application) game today that reminds us of our previous <a title='HTML\/Javascript Scrabbling Snakes Game Email Tutorial' href='#html\/jssget'>HTML\/Javascript Scrabbling Snakes Game Email Tutorial<\/a> in that it snakes around, the user guided by one or both of &#8230;<\/p>\n<ul>\n<li>CSS <a target=_blank title='CSS cursor property information from w3schools' href='https:\/\/www.w3schools.com\/css\/tryit.asp?filename=trycss_cursor'>cursor<\/a> property<\/li>\n<li>CSS <a target=_blank title='CSS linear gradient information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/func_linear-gradient.asp'>linear gradient<\/a> functionality<\/li>\n<\/ul>\n<p> &#8230; the latter useful for the reasons that the <i>onmouseover<\/i> event (&#8220;on hover&#8221;) necessary for <i>cursor<\/i> property &#8220;usefulness&#8221; is not available to mobile platforms, but <i>linear gradients<\/i> are universal in application.<\/p>\n<p>So, from what we&#8217;ve said and linked to above, you&#8217;d have guessed, in all likelihood, that the CSS <i>cursor<\/i> property is the symbology shown to you on non-mobile platforms when you hover over the HTML element involved.  The default <i>cursor<\/i> is like a capital &#8220;I&#8221;, but, know it or not, if you use laptops or other non-mobile platform web browsers a lot, you&#8217;ll be familiar with many of these <i>cursor<\/i> types, which we&#8217;ll discuss more in blog postings to come, but for today, we concentrate on the &#8220;directional&#8221; <i>cursor<\/i> property types (or values) &#8230;<\/p>\n<ul>\n<li style='cursor:e-resize;'>e-resize<\/li>\n<li style='cursor:n-resize;'>n-resize<\/li>\n<li style='cursor:ne-resize;'>ne-resize<\/li>\n<li style='cursor:nw-resize;'>nw-resize<\/li>\n<li style='cursor:s-resize;'>s-resize<\/li>\n<li style='cursor:se-resize;'>se-resize<\/li>\n<li style='cursor:sw-resize;'>sw-resize<\/li>\n<li style='cursor:w-resize;'>w-resize<\/li>\n<\/ul>\n<p> &#8230; and, as you might imagine, you as a non-mobile platform user using today&#8217;s (web application) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/snakes_via_cursor.html\" title='Click picture'>live run<\/a> can &#8220;hover&#8221; over the last &#8220;snake&#8221; square to see where your &#8220;snake&#8221; goes next, the faster you make your &#8220;snake&#8221; move, the better your score.<\/p>\n<p>Now considering mobile (and non-mobile) platforms, these users can use our tailored linear gradients to know where your &#8220;snake&#8221; goes next.<\/p>\n<p>Here is the HTML and Javascript and CSS source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/snakes_via_cursor.html_GETME\" title='snakes_via_cursor.html'>snakes_via_cursor.html<\/a> and download as required.<\/p>\n<hr>\n<p id='html\/jssget'>Previous relevant <a target=_blank title='HTML\/Javascript Scrabbling Snakes Game Email Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-scrabbling-snakes-game-email-tutorial\/'>HTML\/Javascript Scrabbling Snakes Game Email 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\/hj.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML\/Javascript Scrabbling Snakes Game Email Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_jumble-43of.jpg\" title=\"HTML\/Javascript Scrabbling Snakes Game Email Tutorial\"  style=\"float:left;\" id='ioqw' onmouseover=\" this.src=this.src.replace('-38of.j','-39of.xj').replace('-39of.j','-40of.xj').replace('-40of.j','-41of.xj').replace('-41of.j','-42of.xj').replace('-42of.j','-43of.xj').replace('-43of.j','-44of.xj').replace('-44of.j','-38of.xj').replace('.xj','.j'); \"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Scrabbling Snakes Game Email Tutorial<\/p><\/div>\n<p>Scrabbling Snakes, as we explained yesterday with <a target=_blank title='HTML\/Javascript Scrabbling Snakes Game Primer Tutorial' href='#hjssgpt'>HTML\/Javascript Scrabbling Snakes Game Primer Tutorial<\/a> as shown below, is a hybrid game combining the <a target=_blank title='Scrabble home page' href='http:\/\/www.hasbro.com\/scrabble\/en_US\/'>Scrabble<\/a> board with styling to look a bit like snakes (well, you had to be there) and with a word scramble game feel.  It could do well as a vocabulary improvement game for an <a target=_blank title='ESL information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a> student, as the dictionary used is in English, using the web server&#8217;s wordlist arrangements.<\/p>\n<p>It&#8217;s a funny thing with programming that refinements often take longer to do than the original &#8220;crux&#8221; of the program, and it often feels like this for me perhaps, because am so keen to get that &#8220;crux&#8221; settled as quickly as possible, else you can lose impetus.  Another funny thing is how little time you spend on mathematical endeavours.  It seems counter-intuitive, but most of the time is spent organizing to get to some of that pure mathematical work, and by the time you get there, the thing you&#8217;ve been aiming for &#8230; the actual thing &#8230; can be done very quickly.  This, of course, is just a subjective observation &#8230; for example, there&#8217;ll be some programmers who never touch the code until they know they can spend more time at the proper endeavours.  Each approaches has its merits and its fallbacks.<\/p>\n<p>&#8220;Collaboration&#8221; work with game programs has a parallel &#8220;feel&#8221; for me, in that it seems to take more time than the &#8220;crux&#8221; of the program.  Generally speaking input\/output work does, as it (usually) introduces second and third parties and interfacing to other systems &#8230; and the part Y part (it comes after part X).<\/p>\n<p>Being such a fan of email, still think in terms of it as far as &#8220;collaboration&#8221; on a game is concerned, but if you are into mobile technology or if you breathe (remember to breathe), you&#8217;ll be thinking of so much more perhaps &#8230; SMS, video, chat, podcast, social media, the cloud (in that generic sense) &#8230; or the other way, sending a letter via snail mail &#8230; people communicate in lots of different ways.<\/p>\n<p>It wasn&#8217;t just some form of collaboration we thought about in &#8220;round two&#8221; &#8230; where we had &#8220;Bugs&#8221; reeling against the ropes and down for a count of 4 &#8230; not 8 &#8230; eternal vigilance &#8230; anyway we addressed &#8230;<\/p>\n<ol>\n<li>&#8220;collaboration&#8221; (ie. being able to share a snapshot of the game with someone else) via email (via the <a target=_blank title='mailto link information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tryit.asp?filename=tryhtml_link_mailto'>mailto<\/a> link &#8230; and it would be useful to read up on Javascript <a target=_blank title='Javascript encodeURIComponent method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_encodeURIComponent.asp'>encodeURIComponent<\/a> and <a target=_blank title='Javascript decodeURIComponent method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_decodeURIComponent.asp'>decodeURIComponent<\/a>)<\/li>\n<li>add in concept of a Player (or user) &#8230; and with this game it makes sense to allow as many as you like (less than 15&#215;15 &#8230; we don&#8217;t code for that)<\/li>\n<li>adjust the concept of Score and Goes to Score<font color=red>s<\/font> and Goes<font color=red size=0>ies<\/font> (Moses supposes his goesies are rosies but Moses supposes erroneously)<\/li>\n<li>weight the letter choice on the grid (inversely) reflecting more what Scrabble uses as a value of that letter &#8230; in other words, among the pool of letter choices we&#8217;ll have only one Q or Z (worth 10 (in Scrabble) each) but have, in that same pool, 10 (ie. 10 &#8211; 1 + 1) of any letters with a Scrabble value of 1 (like all the vowels for example) &#8230; so that the grid ends up with more accessible chances to form words<\/li>\n<\/ol>\n<p>Now the HTML and Javascript code looks like <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_jumble.html-GETME\" title='word_jumble.html'>word_jumble.html<\/a> (which supervises (the unchanged) PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_jumble.php_GETME\" title='word_jumble.php'>word_jumble.php<\/a> to validate the words) and changed from yesterday&#8217;s &#8220;crux&#8221; code as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_jumble.html-GETME\" title='word_jumble.html'>word_jumble.html<\/a>.<\/p>\n<p>Have fun playing (and hopefully collaborating) with this word game, today, with our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_jumble.html\" title='click picture'>live run<\/a> (or watch a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/hj.htm\" title='Click picture'>slideshow<\/a>).<\/p>\n<p><b>Stop Press<\/b><\/p>\n<p>We&#8217;ve been relooking at some ESL web applications like &#8220;Scrabbling Snakes&#8221; here late in February 2016 because the advent of our supervisory <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-themed-supervision-sixth-genericization-tutorial\/' title='PHP Themed Supervision Sixth Genericization Tutorial'>PHP Themed Supervision Sixth Genericization Tutorial<\/a> threw up into focus <i>&#8220;a trap for young players&#8221;<\/i> perhaps.  In &#8220;Scrabbling Snakes&#8221; we use <i>document.title<\/i> as a shared &#8220;resource&#8221; for (this new <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_jumble.html--GETME'>changed<\/a>) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_jumble.html--GETME\" title='word_jumble.html'>word_jumble.html<\/a> to be able to &#8220;talk&#8221; with the (unchanged) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_jumble.php_GETME\" title='word_jumble.php'>word_jumble.php<\/a> regarding whether the PHP validates a word, or not. However, the way <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-themed-supervision-sixth-genericization-tutorial\/' title='PHP Themed Supervision Sixth Genericization Tutorial'>PHP Themed Supervision Sixth Genericization Tutorial<\/a> works is that web applications like &#8220;Scrabbling Snakes&#8221; are &#8220;encased&#8221; in an HTML iframe element and so when the PHP mentions <i>top.document.title<\/i> in its thinking, that no longer corresponds to the <i>document.title<\/i> thinking that the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_jumble.html-GETME\" title='word_jumble.html'>old<\/a> HTML was full of, and so it was amended so that all its <i>document.title<\/i> references are now, instead, mapped to <i>top.document.title<\/i> so that the HTML and PHP can resume their Fred and Ginger arrangements, even when its <a target=_blank title='Fred and Ginger' href='https:\/\/www.youtube.com\/watch?v=83wO3RcxGCc'>stormy<\/a>?!<\/p>\n<hr>\n<p id='hjssgpt'>Previous relevant <a target=_blank title='HTML\/Javascript Scrabbling Snakes Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-scrabbling-snakes-game-primer-tutorial\/'>HTML\/Javascript Scrabbling Snakes Game Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_jumble.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML\/Javascript Scrabbling Snakes Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_jumble.jpg\" title=\"HTML\/Javascript Scrabbling Snakes Game Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Scrabbling Snakes Game Primer Tutorial<\/p><\/div>\n<p>Scrabbling Snakes is a hybrid game combining the <a target=_blank title='Scrabble home page' href='http:\/\/www.hasbro.com\/scrabble\/en_US\/'>Scrabble<\/a> board with styling to look a bit like snakes (well, you had to be there) and with a word scramble game feel.  It could do well as a vocabulary improvement game for an <a target=_blank title='ESL information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/English_as_a_second_or_foreign_language'>ESL<\/a> student, as the dictionary used is in English, using the web server&#8217;s wordlist arrangements.<\/p>\n<p>Am sure if you are interested how we created this game you would not have too much trouble seeing what we did by examining the HTML and Javascript code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_jumble.html_GETME\" title='word_jumble.html'>word_jumble.html<\/a> (which supervises PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_jumble.php_GETME\" title='word_jumble.php'>word_jumble.php<\/a> to validate the words).<\/p>\n<p>Scrabbling Snakes consists of a grid (ours is 15&#215;15 like Scrabble uses) of letters (from a to z) not repeated horizontally nor vertically within that grid, if that is possible.<\/p>\n<p>The grid tiles show the letters with a <a target=_blank title='HTML sup tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_sub.asp'>sub<\/a> tag showing the letter score value, and we have Scrabble background tile colours as in &#8230;<\/p>\n<ul>\n<li><font color=red>Red<\/font> triple word score<\/li>\n<li><font color=pink>Pink<\/font> double word score<\/li>\n<li><font color=blue>Blue<\/font> triple letter score<\/li>\n<li><font color=lightblue>Light blue<\/font> double letter score<\/li>\n<\/ul>\n<p>Hope you get some HTML and Javascript ideas about games, and have fun playing this word game, today, with our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_jumble.html\" title='click picture'>live run<\/a>.<\/p>\n<p> &#8230; and the tile text colour is <font color=black>Black<\/font> before (double) clicking, before turning <font color=orange>Orange<\/font> on a successfully registered (double) click.<\/p>\n<p>So words can be three or more characters &#8230; no plurals, no proper nouns, no apostrophies or non alpha characters.<\/p>\n<p>There is no surprise with the HTML &#8220;grid&#8221; being composed of an HTML <a target=_blank title='HTML table information from w3schools' href='http:\/\/www.w3schools.com\/html\/html_tables.asp'>table<\/a> element.<\/p>\n<p>Hope you get some HTML and Javascript ideas about games, and have fun playing this word game, today, with our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/word_jumble.html\" title='click picture'>live run<\/a>.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d15741' onclick='var dv=document.getElementById(\"d15741\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=word-game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d15741' 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='#d15752' onclick='var dv=document.getElementById(\"d15752\"); 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='d15752' 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='#d31773' onclick='var dv=document.getElementById(\"d31773\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/linear-gradient\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d31773' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve got a new (web application) game today that reminds us of our previous HTML\/Javascript Scrabbling Snakes Game Email Tutorial in that it snakes around, the user guided by one or both of &#8230; CSS cursor property CSS linear gradient &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-guided-snake-game-primer-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":[126,2127,476,477,1608,576,652,2020,812,861,871,997,2282,1319],"class_list":["post-31773","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-background","tag-cursor","tag-game","tag-games-2","tag-hover","tag-html","tag-javascript","tag-linear-gradient","tag-mouse","tag-onclick","tag-onmouseover","tag-programming","tag-snake","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/31773"}],"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=31773"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/31773\/revisions"}],"predecessor-version":[{"id":31785,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/31773\/revisions\/31785"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=31773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=31773"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=31773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}