{"id":24823,"date":"2016-09-09T03:01:32","date_gmt":"2016-09-08T17:01:32","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=24823"},"modified":"2016-09-08T21:34:39","modified_gmt":"2016-09-08T11:34:39","slug":"image-in-nine-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/image-in-nine-game-primer-tutorial\/","title":{"rendered":"Image in Nine Game Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_touch.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Image in Nine Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_touch.jpg\"  \/><\/a><p class=\"wp-caption-text\">Image in Nine Game Primer Tutorial<\/p><\/div>\n<p>Today we&#8217;ve written a web application game that really benefits, in its mobile device incarnations, by &#8220;touch scrolling&#8221; or <a target=_blank title='Momentum-based scrolling information' href='https:\/\/css-tricks.com\/snippets\/css\/momentum-scrolling-on-ios-overflow-elements\/'>momentum-based scrolling<\/a> techniques.<\/p>\n<p>We found lots of great advice for today&#8217;s game from the Open Source community on the net, and give thanks to &#8230;<\/p>\n<ul>\n<li>CSS <a target=_blank title='Useful link' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/-webkit-overflow-scrolling'>momentum-based scrolling<\/a> setting for touch devices advice<\/li>\n<li>great CSS <a target=_blank title='Useful link' href='http:\/\/www.css3.info\/preview\/multiple-backgrounds\/'>multiple background image<\/a> advice<\/li>\n<li>use of CSS <a target=_blank title=\"CSS overflow:hidden idea information from w3schools ... thanks\" href=\"http:\/\/www.w3schools.com\/cssref\/pr_pos_overflow.asp\"><i>overflow: scroll<\/i> property<\/a> in a &#8220;reveal&#8221; themed approach<\/li>\n<li>good general use of <a target=_blank title='Useful link' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Canvas_API\/Tutorial\/Using_images'>images<\/a> webpage<\/li>\n<li>Javascript <a target=_blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/2950382\/onscroll-for-div'>scrolling<\/a> event advice<\/li>\n<li>helped with <a target=_blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/442404\/retrieve-the-position-x-y-of-an-html-element'>scrolling event co-ordinate definition<\/a> via the Javascript <a target=_blank title='Useful link' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect'>element.getBoundingClientRect<\/a>() function<\/li>\n<li>set us right to <a target=_blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/18564561\/how-to-specify-how-many-pixels-scroll-moves-on-each-step'>stop thinking that it would be a good idea to try to control the smallest scrolling resolution unit<\/a><\/li>\n<li>the CSS &#8220;overlay&#8221; usual suspects coming into play were <a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> property and <a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a> and <a target=_blank title='CSS opacity information from w3schools' href='http:\/\/www.w3schools.com\/css\/css_image_transparency.asp'>opacity<\/a><\/li>\n<\/ul>\n<p>So what is our game?  Here&#8217;s the opening &#8220;blurb&#8221; for it &#8230;<\/p>\n<blockquote><p>\nWelcome to our Image in Nine Game &#8230; bit like a jigsaw game with top left of nine filled in (they have a yellow border when fitting nicely &#8230; though there is a tolerance) &#8230; and help for others via faint underneath image and getting numbers up in the title close to zero &#8230; once you move the other eight pieces around via one finger swipe gesture for mobile or scrolling for non-mobile.  This starting image is <a target=_blank title='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/your_acronyms.jpg' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/your_acronyms.jpg'>http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/your_acronyms.jpg<\/a> and you can practice or give up by using <a target=_blank title='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_touch.html?goes=1' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_touch.html?goes=1'>http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_touch.html?goes=1<\/a> URL in order to specify your own URL image as required, or enter your own image URL below.\n<\/p><\/blockquote>\n<p>It&#8217;s a simple premise.  An image gets cut evenly up into nine equal area pieces, a bit like a jigsaw.  We add this to a table of HTML div elements including the <i>game&#8217;s image<\/i> as a background image with a defined <a target=_blank title='CSS background-position property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_background-position.asp'>background-position<\/a> property, within HTML table td cells.  Those HTML div elements &#8220;reveal&#8221; the <i>game image<\/i> again overlayed on top, but with no offsets in positioning, so you end up with the top left cell&#8217;s HTML div element being totally fine, and so showing a yellow border to indicate this.  But the mobile user will need to use <i>momentum-based scrolling<\/i> and the non-mobile user can use normal scrolling techniques to pull the &#8220;overlayed&#8221; image back into the correct &#8220;jigsaw&#8221; position, and get a yellow border, to succeed at the game.  There is a numerical reporting helper in <i>document.title<\/i> that when creeping towards zero helps the user out with their positioning.  We time the user doing this, should they want to try the game again to try to improve, perhaps with their own image URL in mind.<\/p>\n<p>Here is the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_touch.html\">live run<\/a> link to the &#8220;Image in Nine Game&#8221; that has this HTML and Javascript and CSS programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_touch.html_GETME\">scroll_touch.html<\/a> and here for your perusal. And here is a <a target=_blank title='Live run for an Australian Lighthouses' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_touch.html?image=http%3A%2F%2Fwww.rjmprogramming.com.au%2FPHP%2Faustralian_lighthouses.jpg'>live run for an Australian Lighthouses<\/a> image.<\/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='#d24823' onclick='var dv=document.getElementById(\"d24823\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/scrolling\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d24823' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today we&#8217;ve written a web application game that really benefits, in its mobile device incarnations, by &#8220;touch scrolling&#8221; or momentum-based scrolling techniques. We found lots of great advice for today&#8217;s game from the Open Source community on the net, and &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/image-in-nine-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":[281,342,476,477,576,590,652,1610,2006,894,997,1063,1917,1107,1238,1319],"class_list":["post-24823","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-css","tag-div","tag-game","tag-games-2","tag-html","tag-image","tag-javascript","tag-lighthouse","tag-momentum-based-scrolling","tag-overlay","tag-programming","tag-reveal","tag-scroll","tag-scrolling","tag-table","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24823"}],"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=24823"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24823\/revisions"}],"predecessor-version":[{"id":24832,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24823\/revisions\/24832"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=24823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=24823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=24823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}