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. （Step1-500题）UVaOJ+算法竞赛入门经典+挑战编程+USACO

    http://www.cnblogs.com/sxiszero/p/3618737.html 下面给出的题目共计560道,去掉重复的也有近500题,作为ACMer Training Step1,用1年 ...

  2. 40个Android问题

    1. Android的四大组件是哪些,它们的作用? 答:Activity:Activity是Android程序与用户交互的窗口,是Android构造块中最基本的一种,它需要为保持各界面的状态,做很多持 ...

  3. 0x1L

    整形常量的后缀表示其类型,包括如下后缀,其中U和L的大小写通用 后缀        类型L           long int LL         long long int U          ...

  4. bzoj 3545&&3551: [ONTAK2010]Peaks &&加强版 平衡树&&并查集合并树&&主席树

    3545: [ONTAK2010]Peaks Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 635  Solved: 177[Submit][Stat ...

  5. JSTL详解

    一.理论准备         JSP 标准标记库( Standard Tag Library , JSTL) 是一组以标准化格式实现许多通用的 Web 站点功能的定制标记,主要是为了方便页面的编写. ...

  6. Netflix工程总监眼中的分类算法：深度学习优先级最低

    Netflix工程总监眼中的分类算法:深度学习优先级最低 摘要:不同分类算法的优势是什么?Netflix公司工程总监Xavier Amatriain根据奥卡姆剃刀原理依次推荐了逻辑回归.SVM.决策树 ...

  7. js backbone

    http://www.the5fire.com/backbone-js-tutorials-pdf-download.html http://www.infoq.com/cn/articles/mob ...

  8. 【HDU3341】 Lost's revenge （AC自动机+状压DP）

    Lost's revenge Time Limit: 5000MS Memory Limit: 65535KB 64bit IO Format: %I64d & %I64u Descripti ...

  9. OnScroll与OnTouchEvent方法的区别与联系

    onScroll()方法和onTouchEvent()方法的执行过程应该是,先onTouchEvent()的ACTION_DOWN,然后是ACTION_MOVE和onScroll()方法同时进行,最后 ...

  10. iPhone之Quartz 2D系列--图形上下文（2）(Graphics Contexts)

    以下几遍关于Quartz 2D博文都是转载自:http://www.cocoachina.com/bbs/u.php?action=topic&uid=38018 iPhone之Quartz ...