Image in Nine Game Primer Tutorial
Today we’ve written a web application game that really benefits, in its mobile device incarnations, by “touch scrolling” or momentum-based scrolling techniques.
We found lots of great advice for today’s game from the Open Source community on the net, and give thanks to …
- CSS momentum-based scrolling setting for touch devices advice
- great CSS multiple background image advice
- use of CSS overflow: scroll property in a “reveal” themed approach
- good general use of images webpage
- Javascript scrolling event advice
- helped with scrolling event co-ordinate definition via the Javascript element.getBoundingClientRect() function
- set us right to stop thinking that it would be a good idea to try to control the smallest scrolling resolution unit
- the CSS “overlay” usual suspects coming into play were position:absolute property and z-index and opacity
So what is our game? Here’s the opening “blurb” for it …
Welcome to our Image in Nine Game … bit like a jigsaw game with top left of nine filled in (they have a yellow border when fitting nicely … though there is a tolerance) … and help for others via faint underneath image and getting numbers up in the title close to zero … once you move the other eight pieces around via one finger swipe gesture for mobile or scrolling for non-mobile. This starting image is http://www.rjmprogramming.com.au/HTMLCSS/your_acronyms.jpg and you can practice or give up by using http://www.rjmprogramming.com.au/HTMLCSS/scroll_touch.html?goes=1 URL in order to specify your own URL image as required, or enter your own image URL below.
It’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 game’s image as a background image with a defined background-position property, within HTML table td cells. Those HTML div elements “reveal” the game image again overlayed on top, but with no offsets in positioning, so you end up with the top left cell’s HTML div element being totally fine, and so showing a yellow border to indicate this. But the mobile user will need to use momentum-based scrolling and the non-mobile user can use normal scrolling techniques to pull the “overlayed” image back into the correct “jigsaw” position, and get a yellow border, to succeed at the game. There is a numerical reporting helper in document.title 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.
Here is the live run link to the “Image in Nine Game” that has this HTML and Javascript and CSS programming source code you could call scroll_touch.html and here for your perusal. And here is a live run for an Australian Lighthouses image.
If this was interesting you may be interested in this too.
