Adapting to Different Devices - Building JavaScript Games for Phones, Tablets, and Desktop - page 166

Chapter 13
Adapting to Different Devices
This chapter deals with adapting games to different devices. Until now, you've been developing
examples that will only work on devices that have a keyboard and a mouse, such as laptop or desktop
machines. One of the nice things about JavaScript programs is that they also run on smartphones and
tablets, which currently is a booming market. Making your games run on such platforms will result in
a lot of extra players for your games. In order to play games on smartphones or tablets, you need to
handle touch input, in a way very similar to dealing with keyboard and mouse input.
Another thing you need to take care of is the variety of screen sizes on the devices for which you
want to make games. This chapter shows you how to create games that automatically adapt to any
screen size, whether it's a huge 24-inch desktop monitor or a tiny smartphone screen.
Allowing the Canvas to Change Size
The first thing you need to do to allow for automatic screen-size adaptation is place the canvas
element in such a way that the canvas automatically scales to the size of the page. Once that is
done, you can retrieve the size of the canvas, compare it with the actual size of the game screen,
and perform a scaling operation. In Painter, this is how you placed the canvas element on the
HTML page:
<div id="gameArea">
<canvas id="mycanvas" width="800" height="480"> </canvas>
</div>
As you can see, you define a div element called gameArea . In this div element is a single canvas
element. In order to let the canvas element scale automatically, you need to set its width and height
to 100% of the browser window width and height. That way, when the browser window changes
size, the canvas element is resized as well. Furthermore, you make the page you're displaying as
clean as possible (no margins). In order to do this, you use style sheets . Style sheets are a nice way
171