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浏览器中看一下运行效果:

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

基于HTML5的SLG游戏开发( 二）：创建HTML5页面的更多相关文章

  1. 基于HTML5的SLG游戏开发(序）

          2012年前后,HTML5游戏凭借跨平台.易移植.部署简单.节省成本等优点被炒的火热,经过一两年的快速发展,市场出现了一些成功地HTML5游戏产品,像磊友的<修仙三国>,神奇时 ...

  2. 基于HTML5的SLG游戏开发( 三）：认识PureMVC

    在游戏开发中,对于一般网络游戏,由于需要多人协同开发,每个人负责不同的模块开发,为了减少耦合,需要用来一些MVC框架,减少模块之间的耦合.我们现在使用的mvc框架是pureMVC.pureMVC的官网 ...

  3. 基于HTML5的SLG游戏开发(一）：搭建开发环境(2)

          游戏开发过程中经常需要处理各种事件,而HTML5游戏开发中,所有的场景和UI面板都是绘制在Canvas上面,假设需要对某一UI面板上的关闭按钮添加事件监听,采取的方法是对关闭按钮图片资源进 ...

  4. 基于HTML5的SLG游戏开发(一）：搭建开发环境(1)

    开发环境: 1.操作系统:MacOS 10.8.5 2.本地web服务器:Apache 2.2.24 (Window环境推荐使用WampServer) 3.编码工具:WebStrom 7.0 4.调试 ...

  5. 转: Orz是一个基于Ogre思想的游戏开发架构

    Orz是一个基于Ogre思想的游戏开发架构,好的结构可以带来更多的功能.Orz和其他的商业以及非商业游戏开发架构不同.Orz更专著于开发者的感受,简化开发者工作.Orz可以用于集成其他Ogre3D之外 ...

  6. HTML5 2D平台游戏开发#4状态机

    在实现了<HTML5 2D平台游戏开发——角色动作篇之冲刺>之后,我发现随着角色动作的增加,代码中的逻辑判断越来越多,铺天盖地的if() else()语句实在让我捉襟见肘: 这还仅仅是角色 ...

  7. HTML5面向对象的游戏开发简单实例总结

    在阅读一本HTML5游戏开发相关书籍时发现一个很好的例子,通过这个例子可以对面向对象的开发进行更深入的理解.这个对象要实现的是:将一个CSS sprite中的图像绘制到canvas中.首先创建一个Sp ...

  8. HTML5 2D平台游戏开发#6地图绘制

    此前已经完成了一部分角色的动作,现在还缺少可以交互的地图让游戏看起来能玩.不过在开始之前应当考虑清楚使用什么类型的地图,就2D平台游戏来说,一般有两种类型的地图,Tile-based和Art-base ...

  9. java游戏开发杂谈 - 创建一个窗体

    package game1; import javax.swing.JFrame; /** * java游戏开发杂谈 * ---demo1:创建一个窗体 * * @author 台哥 * @date ...

随机推荐

  1. BZOJ 3994 约数个数和

    Description 设\(d(x)\)为\(x\)的约数个数,给定\(N,M\),求\[\sum_{i=1}^{N}\sum_{j=1}^{M}d(ij)\]. Input 输入文件包含多组测试数 ...

  2. [HDOJ 5183] Negative and Positive (NP) 【Hash】

    题目链接:HDOJ - 5183 题目分析 分两种情况,奇数位正偶数位负或者相反. 从1到n枚举,在Hash表中查询 Sum[i] - k ,然后将 Sum[i] 加入 Hash 表中. BestCo ...

  3. 关于 width；height

    IE Firefox Chrome Safari window(width|height)   no yes yes document.body document.documentElement 网页 ...

  4. 李洪强iOS开发之-环信01_iOS SDK 前的准备工作

    李洪强iOS开发之-环信01_iOS SDK 前的准备工作 1.1_注册环信开发者账号并创建后台应用 详细步骤:  注册并创建应用 注册环信开发者账号 第 1 步:在环信官网上点击“即时通讯云”,并点 ...

  5. LeetCode_3 sum closet

    Given an array S of n integers, find three integers in S such that the sum is closest to a given num ...

  6. hibernate异常：Could not determine type for: java.util.Set

    根本原因:我实体类中的类型是raw,没法直接实例化的类型.private List<String> rightChoices;private Set<String> multi ...

  7. Qt 窗体的模态与非模态（setWindowFlags(Qt::WindowStaysOnTopHint);比较有用，还有Qt::WA_DeleteOnClose）

    概念 模态对话框(Modal Dialog)与非模态对话框(Modeless Dialog)的概念不是Qt所独有的,在各种不同的平台下都存在.又有叫法是称为模式对话框,无模式对话框等. 1. 模态窗体 ...

  8. android--使用Struts2服务端与android交互

    一,服务器端: web.xml文件: <?xml version="1.0" encoding="UTF-8"?> <web-app vers ...

  9. div+css页面居中代码

    普通div和html混写可以这样写,设置 text-align:center, margin:0px auto 最简单的方法就是 把你的body这样设置: <body style="t ...

  10. 【HDOJ】1686 Oulipo

    kmp算法. #include <cstdio> #include <cstring> ], des[]; ], total; void kmp(char des[], cha ...