HTML and CSS Reference
In-Depth Information
Unfortunately, there is not much you can do about it in code. However, by taking motion blur into account at
the design stage you can mitigate its effects, for instance by avoid high scrolling speed or using sprites with enough
contrast so they don't smudge into the background when moving.
Unwanted Behaviors
Unlike native games, ours live in the browser. With this comes pesky gestures like pinch zoom and constrains like the
inability to lock the device display to a given orientation.
Disabling Zoom
When playing a game it's very easy to trigger the pinch zoom gesture by accident. To disable zooming, you can use the
following line in the <head> of the HTML document:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Here you declare the viewport, which is the area where your page is being drawn, to be the same width as the
device, set zoom or scale to 1.0, and remove the user's ability to zoom your page.
Device Orientation
Your game is probably designed to work in landscape or portrait mode, but not both. Currently a lockOrientation
method is suggested in the Screen Orientation API draft. Unfortunately, browsers except for Firefox haven't
implemented it, and it is only available there for fullscreen or packaged web apps.
Since you cannot lock orientation, you have to tell the users how they should rotate their devices and prevent
them from using the game until their devices are in the right orientation. To do so, you can use window.orientation
to determine the current orientation, as shown in Listing 15-6.
Listing 15-6. Using window.orientation
checkOrientation = function(){
if( window.orientation === 90 || window.orientation === -90 ){
// handle portrait mode
else if( window.orientation === 0 || window.orientation === 180 ){
// handle landscape mode
// handle not supported device orientation, probably a desktop
If you want your game to be played in landscape mode, you can pause the game when in portrait and prompt
the users to rotate their devices. Obviously you need to know when the orientation changes, so you need to listen for
orientationchange , like so:
window.addEventListener("orientationchange", function() {
}, false);
Search WWH ::

Custom Search