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

最新推荐文章于 2024-04-23 10:04:21 发布

weixin_30808575

最新推荐文章于 2024-04-23 10:04:21 发布

阅读量103

点赞数

文章标签：开发工具 java 游戏

原文链接：http://www.cnblogs.com/knightls/p/3280619.html

版权

本系列文章由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的浏览器。

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

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

weixin_30808575

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【HTML5 Canvas游戏开发】笔记(一) 概述和基础讲解

本系列文章由Shin-Knight编写，转载需注明出处。作者：Shin-Knight邮箱：[email protected]　文章链接：http://www.cnblogs.com/knightls/p/3280619.html一，概述说起我的编程之路，一直以来都对游戏开发十分感兴趣，虽然不是专门搞这个的，但是无时无刻都关注着它。刚接触到了html5的时候，网上到处都是关于它...
复制链接

扫一扫