一，概述

说起我的编程之路，一直以来都对游戏开发十分感兴趣，虽然不是专门搞这个的，但是无时无刻都关注着它。刚接触到了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的浏览器。

本章就先讲到这里。下一章也许会讲讲如何实现贴图。敬请期待~~

转载于:https://www.cnblogs.com/knightls/p/3280619.html

【HTML5 Canvas游戏开发】笔记(一) 概述和基础讲解相关推荐

HTML5 Canvas游戏开发实战 PDF扫描版
HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读 ...
《HTML5 Canvas游戏开发实战》——2.1　绘制基本图形
本节书摘来自华章计算机<HTML5 Canvas游戏开发实战>一书中的第2章,第2.1节,作者:张路斌著, 更多章节内容可以访问云栖社区"华章计算机"公众号查看. 2. ...
HTML5 Canvas游戏开发（一）基础知识
一.绘制基本图形在每次用canvas画布时,都有几步是"套路" 1.在HTML中创建Canvas画布: <canvas id="mycanvas" wi ...
《HTML5 Canvas游戏开发实战》——3.3　自定义画板
3.3 自定义画板前面的章节已经将Canvas的API大致介绍完毕了,下面我们来制作一个自定义画板,进一步熟悉一下这些API的用法. 3.3.1 画板的建立建立一个画板的步骤如下: (1)当鼠标按 ...
HTML5 Canvas游戏开发（二）高级功能
一.变形 1.放大和缩小 scale(X,Y)函数. 当使用该函数时,其起始坐标值也被放大或缩小.当X.Y为负值时,可以实现翻转. 2.平移变换 translate(X,Y)函数. 表示水平方向向左移 ...
HTML5 canvas游戏开发实战 7 : 是男人就下一百层“游戏
卷轴游戏是因为游戏的背景看起来像是卷轴在滚动而得名,"是男人就下一百层"即为一款2D卷轴游戏.游戏中玩家的任务是让主角持续下落,其过程中会遇到各种麻烦,或地板消失,或地板消失,或地 ...
【Visual C++】游戏开发笔记十四游戏画面绘图(四) 华丽的CImage类
本系列文章由zhmxy555编写,转载请注明出处. http://qianmo.blog.51cto.com/5127279/875711 作者:毛星云邮箱: happylifemxy@qq.com ...
【Visual C++】游戏开发笔记十三游戏输入消息处理（二）鼠标消息处理
本系列文章由zhmxy555编写,转载请注明出处. http://blog.csdn.net/zhmxy555/article/details/7405479 作者:毛星云邮箱: happyl ...
[置顶] 【Visual C++】游戏开发笔记之一——API函数、DirectX的关键系统...
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. http://blog.csdn.net/zhmxy555/article/details/7318264 作者:毛星云邮箱: h ...

【HTML5 Canvas游戏开发】笔记(一) 概述和基础讲解

一，概述

二，游戏的构成

三，游戏引擎

【HTML5 Canvas游戏开发】笔记(一) 概述和基础讲解相关推荐

最新文章

热门文章