HTML and CSS Reference
In-Depth Information
Adding a Launcher
If the game is supposed to be embedded within other content on the page, you may want to add a “launcher” step
to your game where you wait for an action from the user before you start loading the game.
Desktops, however, have different considerations. In general, you want to put a limit on the size of the game
versus the size of screen. For example, maxing out the screen on a 24" desktop monitor is most likely too slow
for the current generation of browsers and hardware and will also make your artwork too pixelated for bitmap-
based games. The other alternative is to dramatically increase the viewable area of the game on the desktop, but
this can cause additional problems. You also generally want your game to play similarly whether it's played on
the desktop or a mobile device.
The solution most engines have come up with is to maximize the game to a certain size when it's on a mobile
device but leave it in a container of fixed size when users play your game on the desktop.
Ideally, you should develop your game in such a way that the exact dimensions and aspect ratio don't matter.
This is easier said than done, depending on the genre. For a platformer or a role-playing game (RPG), you
should build your game in such a way that the amount of the level visible on the screen shifts depending on the
screen size and dimensions. Things are more difficult when you have a fixed play area that needs to be fully
onscreen at all times. In this case you need to ensure you maximize the size of the playable area while keeping
the aspect ratio constant.
Using a fixed aspect ratio can lead to some less-than-ideal situations because many devices have vastly dif-
fering aspect ratios for landscape and portrait mode. In general if you need to keep your game area to a fixed
aspect ratio, you can optimize only for one view—either portrait or landscape—and then either ask the user to
rotate the device (you don't have the ability to lock screen rotation in HTML5) or accept that your game lives
in a smaller box than is ideal.
Resizing Canvas to Fit
In this section, you look at some code that handles the screen adjustment for you. In each case you start with
some boilerplate HTML and a
<canvas>
element that's 480 pixels by 480 pixels centered on the page:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Page Resize</title>
<link rel="stylesheet" href="lib/base.css" type="text/css" />
<script src='lib/jquery.min.js'></script>
</head>
<body>
<div id='container'>
<canvas id='game' width='480' height='480'></canvas>
</div>
</body>
</html>
