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. prepare—Article【准备篇】之SSH_tool#PuTTY

    第一:下载PuTTY: url :     http://www.openssh.com/ 下载界面: 安装后: 详解以上命令 ① ② PuTTYgen is a key generator. It ...

  2. 用gtest实现数据驱动的单元测试

    //使用gtest进行数据驱动的单元测试 #include <gtest/gtest.h> #include <iostream> #include <vector> ...

  3. UltraEdit软件破解方法

    一.说明 UltraEdit破解软件虽然带有“安装说明.txt”,但是我并没有弄懂--安装说明太模糊.经过一番摸索,找到了破解方法,现记录于此. 二.操作步骤 1.断开网络 2.安装软件 3.打开软件 ...

  4. java入门（与C++的不同之处）封装篇

    初学java,总是想将它与之前的C++做比较,看了慕客网的java入门视频,一直觉得在面向对象方面,它和C++有太多相同的地方,结果今天学到了两点不同之处,现在将它记录下来: 1.  java的访问修 ...

  5. 从UI Automation看Windows平台自动化测试原理

    前言 楼主在2013年初研究Android自动化测试的时候,就分享了几篇文章 Android ViewTree and DecorView Android自动化追本溯源系列(1): 获取页面元素 An ...

  6. linux RWT

    http://www.cnblogs.com/qlwy/archive/2011/06/26/2121919.html#undefined

  7. Ubuntu 12安装Virtualbox

    用aptitude或者apt-get安装Virtualbox,安装过程中会报:”No suitable module for running kernel found [fail]“,安装未成功. 在 ...

  8. 同样版本的jstl,都是jstl1.2版本，有个有问题，另一个没有问题

    问题是这样的,最近部署一个项目,发现每次访问首页的时候老是报如下的错误: org.springframework.web.util.NestedServletException: Handler pr ...

  9. Xstream之常用方式与常用注解

    示例代码 Blog teamBlog = new Blog(new Author("Guilherme Silveira")); teamBlog.add(new Entry(&q ...

  10. 7.微软AJAX的解决方案

    Asp.net中内置的简化AJAX开发的控件UpdatePanel非常方便,但是它会带了许多viewstate,所以高手们并不喜欢它.但它开发在内网应用时可以考滤 放入ScriptManager,将要 ...