基于HTML5的SLG游戏开发( 二）：创建HTML5页面

HTML5游戏的开发过程中是在浏览器上进行运行调试的，所以首先我们需要建立一个html页面。其中，我们把所有的canvas都放到一个viewporter（视图）里面，因此，在body中放置了一个id为viewporter的div中。

具体代码如下：

①index_src.html页面

<!DOCTYPE html>
<html>
<head>
    <title>SLG Game</title>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
<div id="viewporter"></div>
</body>
</html>

②其中，我们需要基本设置一些页面，不然页面光秃秃的，很难看，开发过程中影响心情，所以我们插入了css文件。

@charset "utf-8";
html { -webkit-text-size-adjust: 100%; }
body{ font-family:"Microsoft Yahei",Arial,Helvetica,sans-serif,"宋体";font-size:12px;color:#dfd9c2; margin:0; padding:0; background: #000; outline:none; cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
div, h1, h2, h3, h4, p, form, label, input, textarea, img, span{margin:0; padding:0;}
input {font-family:"Microsoft Yahei",Arial,Helvetica,sans-serif,"宋体"; color:#dfd9c2; cursor:default}
canvas,input,button,select,textarea{outline:none;}

canvas{position: absolute; left: 0; top: 0;}

最后，我们启动Apache,在chrome浏览器中看一下运行效果:

index_src.html中设置到一些meta，具体的一些用途可以去查些资料。