HTML and CSS Reference
In-Depth Information
}
$("#game").attr(newDim)
// Let the game know the page has resized.
// Game.resize(newDim);
}
$(window).bind('resize',handleResize);
handleResize();
});
</script>
The updated code now has an
else
condition to allow it to swap between either the full page or the centered
state. To do this, the code stores the initial width and height of the Canvas and, if the width is larger than the
predetermined max width, changes the element back to relative positioning and its original size. You can try this
out by resizing your browser window up and down.
A binding to the window's resize event makes sure the
handleResize()
method is called every time the
browser is resized.
You need to consider one more facet with resizing. Because the game has already been initialized with a
specific size, it must resize itself mid-game. How easy this is to do depends on the game you create, but it's
something you need to think about from the start to either make a decision to support or not support. What res-
izing involves is very game dependent. A platformer might just show more or less of the surrounding area while
a card game would need to zoom the entire view in and out.
Preventing Scrolling and Zooming
To make up for limited screen sizes, surfing the web on a mobile browser involves a lot of scrolling. For web-
sites that aren't set up with a mobile version, it also generally involves pinching to zoom in and out. Allowing
either of these actions during normal gameplay would be disastrous.
If you load up
resize.html
from the previous section on a mobile device and slide your fingers over the
Canvas area, you notice the entire page performs as you might expect a web page to: It scrolls. If you double-
click the green Canvas area, it zooms in.
The workaround to prevent this from happening is simple: Bind to the
touchMove
event and call
event.preventDefault()
. Add the following to the bottom of the resize code from the last section (still
in the jQuery
document.ready
section):
$(document).on("touchmove",function(event) {
event.preventDefault();
});
Now reload the page and try again. The page should stop in its tracks if you try to scroll around. If you don't
want to be quite as greedy (for example, you've been tasked with creating one of those interactive ads polluting
sidebars everywhere), you could limit the handler to only your Canvas object:
$("#game").on("touchmove",function(event) {
event.preventDefault();
});
This code enables the player to manipulate the rest of the page, zoom in on your game, and then play it
without fear of scrolling or zooming.
