{"id":24840,"date":"2016-09-10T03:01:44","date_gmt":"2016-09-09T17:01:44","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=24840"},"modified":"2016-11-10T13:19:22","modified_gmt":"2016-11-10T03:19:22","slug":"image-in-nine-game-hide-and-seek-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/image-in-nine-game-hide-and-seek-tutorial\/","title":{"rendered":"Image in Nine Game Hide and Seek Tutorial"},"content":{"rendered":"
\"Image<\/a>

Image in Nine Game Hide and Seek Tutorial<\/p><\/div>\n

Our “Image in Nine Game” from yesterday’s Image in Nine Game Primer Tutorial<\/a> as shown below, was a bit lacking as a “game” in real world terms. But what if we added a “Hide and Seek” element to it? Lots of people in the world know the idea of “Hide and Seek” as a game. But doesn’t “Hide and Seek” involve at least two players? Yes, that is so, and we don’t go inventing some new game console functionality here to add this new “Hide and Seek” functionality to our game today. Instead, we rely on user goodwill and sense, as we so often do at this blog. We have a “Hiding Player” and a “Finding Player” and just ask that the “Finding Player” turns away when the “Hiding Player” is selecting something to hide and using two document.body<\/i> onclick<\/i><\/a> events to define top left and bottom right co-ordinates respectively, in time for the overlayed images to “cloud” the issue for the “Finding Player”, who will have to use scrolling techniques and clues from the name left by the “Hiding Player” as to what was hidden to …<\/p>\n

    \n
  1. pick the correct square of nine (parts to the background image of game)<\/li>\n
  2. make the hidden thing go up to the top left of that square via scrolling techniques<\/li>\n<\/ol>\n

    … to succeed with their game quest. Again, we show a time taken aspect to how the “Finding Player” does. After any one finding, the game is totally reworked, and presumably, this could be the chance for the players to swap roles, perhaps … but that is up to them?!<\/p>\n

    Along the way here you’ll have seen that a new component to our web application, which still can do all yesterday’s ideas as well, is that document.body<\/i> onclick<\/i> event, used exclusively in the game by the “Hiding Player”, which is made to work via a document.body<\/i> onload<\/i> scenario as per bold<\/b> bits of HTML and Javascript code below …<\/p>\n


    \n<head>
    \n\/\/ Lots of CSS styling code and title
    \n\/\/ ...
    \n\/\/ End of CSS styling code and title
    \n<script type='text\/javascript'>
    \nvar i, j, imgw=0, imgh=0, factor=1.0, x=0, y=0, tlx=0, tly=0, brx=0, bry=0, squarethingison=-1, rtlx=0, rtly=0, rbrx=0, rbry=0<\/b>;
    \n\/\/ Lots of other Javascript code
    \n\/\/ ...
    \n\/\/ End of lots of other Javascript code
    \nfunction oc(event) {
    \n if (event.clientX || event.clientY) {
    \n x = event.clientX;
    \n y = event.clientY;
    \n } else {
    \n x = event.pageX;
    \n y = event.pageY;
    \n }
    \n if (!tl_click && thing != '') {
    \n tl_click=true;
    \n tlx=x;
    \n tly=y;
    \n document.title=\"Got that, 'Hiding Player', thanks. Now the bottom right? After that, call in 'Finding Player', quickly to see a message and to find your hidden \" + thing + \".\";
    \n document.getElementById('custom-alert-1').innerHTML=\"Got that, 'Hiding Player', thanks. Now the bottom right? After that, call in 'Finding Player', quickly to see a message and to find your hidden \" + thing + \".\";
    \n document.getElementById('custom-alert-1').style.visibility='visible';
    \n setTimeout(andt, hiding_fourfivehundred);
    \n } else if (!br_click && thing != '') {
    \n br_click=true;
    \n brx=x;
    \n bry=y;
    \n squarethingison=whichsquare();
    \n var imgs=document.getElementsByTagName('img');
    \n for (var m=0; m<imgs.length; m++) {
    \n if (imgs[m].id != 'myimg' && thing != '') imgs[m].style.display=dmode;
    \n }
    \n document.title=\"Okay 'Finding Player', over to you to find the \" + thing + \" that 'Hiding Player' has hidden, by scrolling \" + thing + \" into the top left of relevant of Nine Parts of Image square. The correct square must be the one scrolled in to succeed.\";
    \n document.getElementById('custom-alert-1').innerHTML=\"Okay 'Finding Player', over to you to find the \" + thing + \" that 'Hiding Player' has hidden, by scrolling \" + thing + \" into the top left of relevant of Nine Parts of Image square. The correct square must be the one scrolled in to succeed.\";
    \n document.getElementById('custom-alert-1').style.visibility='visible';
    \n setTimeout(andt, finding_eightfivehundred);
    \n setTimeout(secondstaken, 1000);
    \n }
    \n}<\/b>
    \n<\/script>
    \n<\/head>
    \n<body onload='pregetwh();' onclick=' oc(event); ' ontouchstart=' oc(event); '<\/b>>
    \n<\/code><\/p>\n

    We channelled our temporary dialog (like Android “toast”) functionality we talked about at Web Slideshow Like PowerPoint Hashtag Navigation Tutorial<\/a> to place some temporary “overlayed” advice for the Hide and Seek players as the game progresses.<\/p>\n

    So what’s the opening “blurb” of the web application game now …<\/p>\n

    \nWelcome to our Image in Nine Games … firstly, one player mode game is a bit like a jigsaw game, with the 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<\/a> and you can practice or give up by using http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/scroll_touch.htm?goes=1<\/a> URL in order to specify your own URL image as required, or enter your own image URL below, or as a collaborative game for two (Hiding Player and Finding Player), enter name of Thing You Want Other Player to Find or [image URL]&thing=[Thing You Want Other Player to Find]\n<\/p><\/blockquote>\n

    And here is the new live run<\/a> link to the “Image in Nine Game” including a “Hide and Seek” component, that has this HTML and Javascript and CSS programming source code you could call scroll_touch.htm<\/a> that changed from yesterday in this way<\/a>.<\/p>\n

    We’ll leave you with a fairly obvious theme of usage of this game with a Where’s Wally<\/a> scenario, the image for which we’d like to thank the imgur<\/a> website.<\/p>\n

    Did you know?<\/i><\/b><\/p>\n

    Sometimes, as with today’s game, but not always, with web applications, if you’ve forgotten to “test mobile” … how sinful … you’ll find that wherever you have some onclick<\/i> event code you can just double up the same logic for an ontouchstart<\/i><\/a> event, and have your web application burst to life in the mobile wooooooorrrrrrlllld.<\/p>\n

    \n

    Previous relevant Image in Nine Game Primer Tutorial<\/a> is shown below.<\/p>\n

    \"Image<\/a>

    Image in Nine Game Primer Tutorial<\/p><\/div>\n

    Today we’ve written a web application game that really benefits, in its mobile device incarnations, by “touch scrolling” or momentum-based scrolling<\/a> techniques.<\/p>\n

    We found lots of great advice for today’s game from the Open Source community on the net, and give thanks to …<\/p>\n