10-开发全屏游戏

10.3.1　开发全屏游戏

首先，需要将HTML和CSS调整为全屏模式，此处的代码修改与BS Bingo游戏中的修改是一样的。这里需要做的一个修改是将游戏画面的横纵比设置为480×320，这样可以与各种设备的横屏模式相匹配。

1．Canvas元素

HTML Canvas元素的代码如下所示。

<div style="top: 0px; left: 0px; height: 100%; width: 100%;">
<canvas id="canvas" width="480" height="320" >
 Your browser does not support the HTML 5 Canvas.
</canvas>

注意，此处设置了DIV元素的top和left样式，将它的位置从GeoBlaster游戏中的（50x,50y）移动到了（0,0）点。

2．meta标签

为了使得从主屏幕点击图标后能够在移动版Safari中以全屏模式运行游戏，必须添加一系列的meta标签。

<meta name="viewport" content="initial-scale=1 maximum-scale=1
　　　user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes">
<link rel="apple-touch-icon" href="icon.png" >

需要注意的是，这里添加了icon.png文件的引用。因此，当用户单击“添加到主屏幕”按钮时，就会使用该图片为图标。

3．样式表

接下来，需要为Canvas添加样式，这与BSBing游戏中的使用的样式一样。

<style type="text/css">
　　　　html, body {
　　　　　　background-color: #2f9acc;
　　　　　　margin: 0px;
　　　　　　padding: 0px;
　　　　　　color: #fff;
　　　　　　　height: 100%;
　　　　　　　overflow: hidden;
　　　　}
　　　　#canvas {
　　　　　　overflow: hidden;
　　　　　　image-rendering: optimizeSpeed;
　　　　　　-ms-interpolation-mode: nearest-neighbor;
　　　　　　-webkit-optimize-contrast;
　　　　　　　width:100%;
　　　　　　　height:100%;
　　　　　　　}
　　　　　　:webkit-full-screen {
　　　　　　　　width: 100%;
　　　height: 100%;
　　　}
</style>

虽然这些代码可以使游戏在全屏模式中运行，但是不论在桌面浏览器中还是移动版Safari浏览器中，这些代码既不支持鼠标移动，也不支持触摸控制。接下来，添加触摸控制功能。