基于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:; padding:; 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:; padding:;}
input {font-family:"Microsoft Yahei",Arial,Helvetica,sans-serif,"宋体"; color:#dfd9c2; cursor:default}
canvas,input,button,select,textarea{outline:none;} canvas{position: absolute; left:; top:;}

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

基于HTML5的SLG游戏开发( 二):创建HTML5页面

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

上一篇:我眼中的CLR、CLI 以及他们之间的关系


下一篇:IL合集二