为大家推荐12款经常会用到的html5开发工具。
1、Adobe Dreamweaver CS6
Dreamweaver CS6是世界顶级软件厂商Adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。由于Dreamweaver支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，对于初级人员，你可以无需编写任何代码就能快速创建Web页面。其成熟的代码编辑工具更适用于Web开发高级人员的创作！
2、Adobe Edge
Adobe Edge是一个用HTML5、CSS、Java开发动态互动内容的设计工具。它的一个重要功能是web工具包界面，用于方便确保在不同浏览器中架构的一致性，此外，Adobe Edge还将整合TypeKit这样的字体服务。通过Edge设计的内容可以兼容iOS和Android设备，也可以运行在火狐、Chrome、Safari和IE9等主流浏览器上。
3、DevExtreme
DevExtreme Complete Subion是性能最优的HTML5,CSS和Java移动开发框架，可以直接在Visual Studio集成开发环境，构建iOS，Android，Tizen和Windows Phone 8应用程序。DevExtreme包含 PhoneJS 和 ChartJS 两个原生UI组件，并且提供源代码。目前，DevExtreme支持VS2010/2012/2013集成开发环境，兼容Android 4+、iOS5+、Windows 8、Window Phone 8、Tizen五大移动平台，是Visual Studio开发人员开发跨平台移动产品的首选工具。
4、JetBrains WebStorm
WebStorm 是jetbrains公司旗下一款JS开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaS IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。
5、Sencha Architect
在开发移动和桌面应用的工具中，Sencha的定位是HTML5可视化应用开发。开发团队可以在一个单一集成的环境中完成应用的设计、开发和部署。开发者还可以开发Sencha Touch2和Ext JS4 Java应用，并实时预览。
6、Initializr
Initializr 是制作 HTML5 网站最好的入门辅助开发工具，你可以使用提供的特色模板快速生成网站，也可以自定义，Initializr 会为你生成代码简洁的可定制的网页模板。
7、HTML5demos
想知道你的浏览器是否支持 HTML5 Canvas 吗？想知道 Safari 是否可以运行简单的 HTML5 聊天客户端吗？HTML5demos 会告诉你每一个HTML5特性在哪些浏览器中支持。
8、HTML5 Tracker
想了解 HTML5的最新动向吗? 使用 HTML5 Tracker 吧，它可以跟踪 HTML5 最新修订信息。
9、HTML5 visual cheat sheet
想要快速超找一个标签或者属性吗？看看这个非常酷的速查手册吧，每个Web开发人员的必备。
10、Switch To HTML5
Switch To HTML5 是一个基础而实用的模板生成工具。如果你开始一个新项目，可以到这里获取免费的 HTML5 网站模板。
11、HTML5 Test
你浏览器准备好迎接 HTML5 革命了吗？HTML5 Test 将告诉你。这个网站会为你当前使用的浏览器生成一份对video、audio、canvas等等特性的支持情况的完整报告。
12、Lime JS
LimeJS 是一个 HTML5 游戏开发框架，用于快速构建运行于触屏设备和桌面浏览器的游戏。非常棒的HTML5开发工具，一定要用用试试。
Egret Wing是一款开源免费的HTML5游戏开发工具，Egret Wing支持目前市面主流的开发语言和技术，作为一款可视化编辑器，它可以帮你提高开发效率。这款工具还支持 Node.js 开发扩展插件，可以让你更好的定制化自有内容。
渲染模式：dom，cavase，webGL
不同的地图、不同的元素，好玩的道具（充值付费获得道具、融合形成新的道具）
创建项目->资源（json/png）resDepot->模块game
地图、步数、道具、消除
1.地图：元素按照地图排列
最大宽高格子数为8
形状可配置
包含自己的背景图
不同关卡背景图不同
无论地图形状如何改变，尺寸不变
2.步数：
不同关卡步数不同
步数为0时，游戏结束
3.道具
一共五种道具，道具功能不同，使用道具时候不消耗步数，来源于游戏奖励
4.消除：
三个及以上相同元素可消除
元素随机出现
初局开始时，不可有消除元素
没有可消除元素时，自动乱序
数据：地图数据、基础数据、关卡数据、道具数据
视图：元素、背景、关卡、道具
逻辑：主逻辑控制器、数据解析器、地图数据控制器、算法控制器、视图控制器
mapData:
一维数组：数据整理方便，下标
二维数组：空间表示方便，获取位置方便
index = row * 8 + column
json数据描述
地图配置信息如何描述
{"map": [0,1,8,9,6,7,14,15]} 一维数组记录不展示以及不可放置元素的方格
游戏元素数据设计
元素：type、ID（唯一）、location
eg:
mapData[3][6] = element.ID
elements[mapData[3][6]] 元素对象池 访问想要的数据
ID:45
location:30
public static unmapnum: number = 0//空白地图块数量
public static mapData: number[][]//游戏地图,-1表示块地图不能使用，－2表示，此地图没有元素
public static stepNum: number = 0//玩家剩余步数
public static levelStepNum: number = 0//当前关卡步数
public static elementTypes: number[]//当前关卡出现的元素类型
public static unusedElements: number[]//游戏中未使用得元素，仅记录元素ID
public static levelBackgroundImageName = ""//当前关卡背景图资源名
public static MaxRow: number = 8//最大的行
public static MaxColumn: number = 8//最大的列
public static currentElementNum: number = 0//当前关卡游戏中地图可用元素数量
public static levelReq: LevelRequire//当前关卡过关条件
public static elements: GameElement[]//游戏中出现得元素数据池，最多为64个，因为8*8
//舞台宽高，此封装为了方便调用
public static stageW: number = 0
public static stageH: number = 0
DisplayObjectContainer
public constructor() {
super()
this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this)
}
Sprite 类是基本显示列表构造块：一个可包含所有子项的显示列表节点
Sprite() 实例化一个容器
1.背景
var gbg:GameBackGround = new GameBackGround()
this._gameStage.addChild(gbg)
gbg.changeBackground()
2.地图
this.mapc = new MapControl()
this.mapc.createElementAllMap()
3.过关条件
let lec:egret.Sprite = new egret.Sprite()
this._gameStage.addChild(lec)
this.levm = new LevelReqViewManage(lec)
this.levm.createCurrentLevelReq()
4.元素
let cc:egret.Sprite = new egret.Sprite()
this._gameStage.addChild(cc)
this.evm = new ElementViewManage(cc)
this.evm.showAllElements()
1.寻找可消除元素
2.预检索可消除元素算法设计与实现
3.是否可以互相交换
交换后是否可以消除
