HTML and CSS Reference
In-Depth Information
(see Figure
13-3
). This is good for puzzle/casual games. You could use this approach for shooting games and
platformers, though we don't believe that would be the best solution. In this example, 500 represents the height of the
playable portion of the game. The code listed here configures the position of your canvas to float toward the vertical
middle of the screen:
function floatMiddle() {
var screenTop = (window.innerHeight) / 2 + "px";
document.getElementById('playablePortion').style.top = screenTop;}
Figure 13-3.
Float middle example
Fit Inside Screen
Letting the gameplay fit inside the screen is a little obtrusive to the user but is still a pretty good way of dealing with
this issue, as shown in Figure
13-4
. Basically, the game will always be displayed at the ratio at which you developed
it, but black bars will appear on the left and right or top and bottom, depending on the height of the screen on which
it's being played. The code that follows accomplishes this by calculating the scale amount for each dimension and
determining what the minimum scaled amount should be before applying the transform to the
canvas
object:
var scaleX = canvas.width / window.innerWidth;
var scaleY = canvas.height / window.innerHeight;
var scaleToFit = Math.min(scaleX, scaleY);
stage.style.transformOrigin = "0 0"; //scale from top left
stage.style.transform = "scale(" + scaleToFit + ")";
Figure 13-4.
Example of gameplay fitted inside a screen
