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

时间 2019-11-13

标签 html5 html canvas 游戏开发笔记概述基础讲解栏目 HTML5 繁體版

原文原文链接

本系列文章由Shin-Knight编写，转载需注明出处。javascript

做者：Shin-Knighthtml

邮箱：shinknight@163.comhtml5

　文章连接：http://www.cnblogs.com/knightls/p/3280619.htmljava

一，概述

提及个人编程之路，一直以来都对游戏开发十分感兴趣，虽然不是专门搞这个的，可是无时无刻都关注着它。刚接触到了html5的时候，网上处处都是关于它的说法，说它能替代flash，作跨平台游戏什么的。我当时出于兴趣，就开始学习它，毕竟看到了能它作游戏，我还能善罢甘休吗。chrome

当初我学习的时候，就觉得html5游戏开发就是指纯粹的html标签结合js，dom进行游戏开发。到了后面。我才明白，原来是指操控Canvas进行开发。不过，不管是纯粹的html标签结合js，dom开发，仍是操控Canvas进行开发，只要思路和设计思想是对的，都是同样的。不过在本系列文章中，咱们仍是讲讲利用canvas进行开发吧，由于这个更有研究的价值。编程

二，游戏的构成

通常对于一款游戏来讲，主要有这几个成分构成：显示层，图片，动画，文字，绘图。canvas

1.显示层浏览器

顾名思义，就是用来显示图片文字动画的一个层。在一款有人物，背景的游戏中，咱们的人物应该是在背景上方的，要实现这个效果必需要用到层这个概念。实现这个效果的时候，咱们能够先在canvas上画一张背景，而后再画人物就能搞定。也就是说，层次化效果是由绘画前后顺序实现的。具体的实现方法会在接下来的几篇文章中讲到。框架

2.图片dom

图片是游戏中必不可少的元素。它决定着游戏的美观性。若是图片画得很丑，相信不管游戏再有创意，也不会吸引太多玩家去玩。在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的浏览器。

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