本系列文章由Shin-Knight编写，转载需注明出处。
作者：Shin-Knight
邮箱：shinknight@163.com
文章链接：http://www.cnblogs.com/knightls/p/3280619.html
一，概述
说起我的编程之路，一直以来都对游戏开发十分感兴趣，虽然不是专门搞这个的，但是无时无刻都关注着它。刚接触到了html5的时候，网上到处都是关于它的说法，说它能替代flash，做跨平台游戏什么的。我当时出于兴趣，就开始学习它，毕竟看到了能它做游戏，我还能善罢甘休吗。
当初我学习的时候，就以为html5游戏开发就是指纯粹的html标签结合js，dom进行游戏开发。到了后面。我才明白，原来是指操控Canvas进行开发。不过，无论是纯粹的html标签结合js，dom开发，还是操控Canvas进行开发，只要思路和设计思想是对的，都是一样的。不过在本系列文章中，我们还是讲讲利用canvas进行开发吧，因为这个更有研究的价值。
二，游戏的构成
一般对于一款游戏来说，主要有这几个成分构成：显示层，图片，动画，文字，绘图。
1.显示层
顾名思义，就是用来显示图片文字动画的一个层。在一款有人物，背景的游戏中，我们的人物应该是在背景上方的，要实现这个效果必须要用到层这个概念。实现这个效果的时候，我们可以先在canvas上画一张背景，然后再画人物就能搞定。也就是说，层次化效果是由绘画先后顺序实现的。具体的实现方法会在接下来的几篇文章中讲到。
2.图片
图片是游戏中必不可少的元素。它决定着游戏的美观性。如果图片画得很丑，相信无论游戏再有创意，也不会吸引太多玩家去玩。在html5 canvas中，贴图很简单，在接下来的几篇文章中都会讲到。
3.动画
动画的存在能增添游戏的趣味性，让界面达到更绚丽的效果。动画在游戏中也很常见，如RPG，SLG，横板格斗中都是比不可少的元素。
4.文字
文字是最基本的元素，在游戏中通常用来描述情况，显示分数，为游戏作说明等。是非常常见的，也是最平凡不过的了。
5.绘图
这里的绘图是指在界面上画线，画圆什么的。在html5 canvas中有专门的API负责绘图。在以后的讲解中会提到。
三，游戏引擎
制作一款中大型游戏，游戏引擎是不可少的。游戏引擎一般是把反复的代码进行封装，让游戏实现起来更简单。现在使用起来比较方便的html5游戏引擎有：Cocos2D-html5，lufylegend等，以后随着html5的壮大，或许还有其他更方便的引擎出现。不过总的来说，html5做游戏实在不是很方便，但是如果用到了引擎，那就方便多了。
四，创建项目&运行程序
编写html5没有特定的工具，用记事本就能开发。不过为了方便开发，我们一般要选择一些编辑器。常见的几款如下：
1.dreamweaver
Dreamweaver是个原本由Macromedia公司所开发的著名网站开发工具。它使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。随Macromedia被Adobe收购后，Adobe也开始计划开发Linux版本的Dreamweaver了。 Dreamweaver自MX版本开始，使用了Opera的排版引擎"Presto" 作为网页预览。
2.eclipse
Eclipse 是一个开放源代码的、基于Java的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。幸运的是，Eclipse 附带了一个标准的插件集，包括Java开发工具（Java Development Kit，JDK）。尽管 Eclipse 是使用Java语言开发的，但它的用途并不限于 Java 语言；例如，支持诸如C/C++、COBOL、PHP等编程语言的插件已经可用，或预计将会推出。Eclipse 框架还可用来作为与软件开发无关的其他应用程序类型的基础，比如内容管理系统。
3.notepad++
Notepad++是一套非常有特色的自由软件的纯文字编辑器(许可证:GPL)，有完整的中文化接口及支援多国语言撰写的功能(UTF8 技术)。它的功能比 Windows 中的 Notepad(记事簿)强大，除了可以用来制作一般的纯文字说明文件，也十分适合当作撰写电脑程序的编辑器。Notepad++ 不仅有语法高亮度显示，也有语法折叠功能，并且支援宏以及扩充基本功能的外挂模组。
选择一款适合自己的开发工具就可以开始编写了。不过，要运行html5需要支持html5的浏览器，比如chrome，firefox，safari，opera，IE9等。
注意：IE只有在IE9以上的版本才能运行html5。
要检查你的浏览器是否支持html5，运行以下代码就能知晓：
1 <!DOCTYPE HTML> 2 <html> 3 <body> 4 5 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 6 Your browser does not support the canvas element. 7 </canvas> 8 9 <script type="text/javascript"> 10 11 var c=document.getElementById("myCanvas"); 12 var cxt=c.getContext("2d"); 13 cxt.moveTo(10,10); 14 cxt.lineTo(150,50); 15 cxt.lineTo(10,50); 16 cxt.stroke(); 17 18 </script> 19 20 </body> 21 </html>
如果界面上显示的是一串英文字母：Your browser does not support the canvas element.说明就不支持canvas标签，得重新下载一个支持html5的浏览器。
本章就先讲到这里。下一章也许会讲讲如何实现贴图。敬请期待~~