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. 2016030101 - ubuntu15.1上安装git客户端

    使用ubutun15.1安装git客户端. 根据git官网提示内容(参考http://git-scm.com/download/linux) 1.使用命令:sudo apt-get install g ...

  2. 去除UINavigationBar默认透明度的方法

    UINavigationbar的属性translucent,用来控制导航条的透明度的: iOS7+版本后,navigationbar的translucent属性默认为YES,及默认带有透明度 [sel ...

  3. 日期相关---SimpleDateFormat的setLenient(true/false)-----自动计算日期

    有时候我们需要判断用户的日期格式是否正确, 虽然绝大多数会在前台处理,但是也有需要从文件流读入的情况,如果日期不合格就需要抛异常,这时候就需要禁止SimpleDateFormat的自动计算功能. 这时 ...

  4. Android应用自杀和干掉其它进程

    // 自杀(这种方式只能杀掉自己的进程,其它进程无法杀死) int pid = Process.myPid(); android.os.Process.killProcess(pid); // 或者 ...

  5. Contest20140705 testA 二分

    testA 输入文件: testA.in 输出文件testA.out 时限2000ms 问题描述: 有一个城市拥有N个节点,被M条有权无向路径连接.现在你要在一个地方(可以在路径上当然也可以在节点上) ...

  6. [BZOJ 1086] [SCOI2005] 王室联邦 【树分块】

    题目链接:BZOJ - 1086 题目分析 这道题要求给树分块,使得每一块的大小在 [B, 3B] 之间,并且可以通过一个块外的节点(块根)使得整个块联通. 那么我们使用一种 DFS,维护一个栈,DF ...

  7. In machine learning, is more data always better than better algorithms?

    In machine learning, is more data always better than better algorithms? No. There are times when mor ...

  8. German Collegiate Programming Contest 2013:B

    一个离散化的简单题: 我用的是STL来做的离散化: 好久没写离散化了,纪念一下! 代码: #include<cstdio> #include<cstring> #include ...

  9. 孤陋寡闻又一遭：ReportEvent API函数（有微软Service官方例子为例）

    API 详解: https://msdn.microsoft.com/en-us/library/windows/desktop/aa363679(v=vs.85).aspx 使用例子: https: ...

  10. OS X Lion版 如果我忘记了我的账户密码 我该怎么办?

    来到了 mac os x lion 10.7 上. 忘记密码的朋友不会减少. 除了努力回忆和询问自己的老婆外还有其他办发不? 那是自然有的. 帐户密码很重要虽然有时候我们设置了帐户自动登陆但是如果您需 ...