8.4 Example: Click to tick! 229_get('updateButton').style.visibility = 'visible';
}
else {
_get('onlineStatus').innerHTML = 'Offline';
_get('onlineStatus').className = 'offline';
_get('updateButton').style.visibility = 'hidden';
}
}
A check of the variable navigator.online (see section 8.2.2, Offline Status and
Events) decides if the button for updating the application will be displayed. To
ensure the online status is always up-to-date, event listeners are defined for both
switching to and from offline mode:
// control online-status
window.addEventListener("online", function() {
setOnlineStatus();
}, false);
window.addEventListener("offline", function() {
setOnlineStatus();
}, false);
8.4.4 Expansion Options
To make the game more attractive, you could try adding the following optional
expansions:
z Select difficulty level. The valid area of objects is defined in pixels in the
image. The default setting of 15 pixels is suitable for average difficulty. You
could make this area variable via an input field using the new HTML5 form
element range. The level of difficulty would of course have to be taken into
account in the high score list.
z Incorporate variable sizes/shapes of target. Because the objects to
be located often have different sizes, an additional parameter for each
target object might be conceivable, specifying the radius of the area to be
searched. If a circle is not accurate enough as a target object, you could
integrate other geometric forms as targets.
z Include score by distance. You could incorporate the distance to the target
into the scoring: the closer a player’s mouse click was to the desired target
on the map, the higher the score the player gets for being right.
z Add online high score. An extension in connection to offlineStorage would
be integrating the application into an online high score list. You would
require an application with access to the database on the web server.