随着 HTML5 标准最终敲定,HTML5 将有望成为游戏开发领域的的热门平台。HTML5 游戏能够运行于包括 iPhone 系列和 iPad 系列在内的计算机、智能手机以及平板电脑上,是目前跨平台应用开发的最佳实施方案。本文系根据 《HML5 Canvas 游戏开发实战》 一书中的内容整理而成,是了解和学习 HTML5 游戏开发的基础内容,希望能够帮助到那些和博主一样致力于游戏开发的朋友们!
JavaScript 中的面向对象编程
对于游戏开发来说,面向对象编程(OOP)是一种重要而且必要的方法,所以在了解 HTML5 游戏开发前,首先应该了解 JavaScript 中的面向对象编程。JavaScript 是一种基于对象的语言,可它并不是一种真正的面向对象的编程语言,因为在 JavaScript 的语法中不存在类(Class)的概念。下面我们将分析和解决在 JavaScript 中实现封装、继承等面向对象的问题。
在 JavaScript 中函数(function)就是就是一个类(class)
1//声明一个函数
2function MyClass(){}
3//实例化一个对象
4var cls1 = new MyClass();
使用 this 关键字就可以为类增加属性
1//声明一个类并定义其构造函数
2function MyClass(name,age)
3{
4 this.name = name;
5 this.age = age;
6};
7//实例化一个对象
8var cls1 = new MyClass("张三",20)
9//输出cls1的两个属性值
10alert("name=" + cls1.name + "&" + cls1.age)
使用 prototype 属性可以为类添加方法
1//声明一个类并定义其构造函数
2function MyClass(name,age)
3{
4 this.name = name;
5 this.age = age;
6};
7//为MyClass增加方法
8MyClass.prototype=
9{
10 toString:function()
11 {
12 alert("name=" + this.name + "&" + this.age)
13 },
14 getName:function()
15 {
16 alert("name=" + this.name)
17 },
18 getAge:function()
19 {
20 alert("age=" + this.age)
21 }
22};
使用 apply 方法实现属性和方法的继承
1//定义一个父类People
2function People()
3{
4 this.type="人"
5};
6//为父类定义一个方法
7People.prototype=
8{
9 getType:function()
10 {
11 alert("type=" + this.type)
12 }
13};
14
15//定义一个子类Student
16function Student(name,age,sex)
17{
18 //继承父类的属性type
19 People.apply(this,arguments);
20 this.name = name;
21 this.age = age;
22 this.sex = sex;
23};
24
25//声明一个Student实例
26var stu = new Student("张三",20,"男");
27//输出type
28alert(stu.type)
29
30//下面我们来了解下如何继承父类的方法,继承父类方法主要通过循环使用父对象的prototype进行复制来实现,如
31//重新定义子类Student
32function Student(name,age,sex)
33{
34 //继承父类的属性type
35 People.apply(this,arguments);
36 //继承父类的方法,略显抽象
37 var prop;
38 for(prop in People.prototype)
39 {
40 var proto = this.constructor.prototype;
41 if(!proto[prop])
42 {
43 proto[prop] = People.prototype[prop];
44 }
45 proto[prop]["super"] = People.prototype;
46 }
47 //属性定义
48 this.name = name;
49 this.age = age;
50 this.sex = sex;
51};
52
53//实例化Student对象
54var stu = new Student("张三",20,"男");
55stu.getType();
静态类的实现
1function staticClass()
2{
3 staticClass.name = "张三";
4 staticClass.toString=function
5 {
6 alert("name=" + staticClass.name )
7 };
8};
9
10alert(staticClass.name);
11staticClass.toString();
Canvas 绘图基础
HTML5 提供了图像、视频、音频、表单、位置、本地数据库、离线存储、websocket 等各种全新的特性,对于 HTML 游戏开发而言,我们主要关注图像、音频、本地数据库以及 websocket 等,首先我们来了解下 Canavs 绘图的基础内容。
Canvas 是 HTML5 为我们提供的一张画布,可以让我们在 HTML 上直接绘制图形,因此 Canvas 可以作为 HTML5 游戏开发的基本元素,即 HTML5 游戏引擎的底层都是以 Canvas 元素来驱动的。Canvas 本身没有绘图的能力,需要借助于 JavaScript 来实现绘图的功能。使用 Canvas 元素只需要在网页中添加 canvas 标记即可,如
1<canvas id="myCanavs" width="800" height="480"></canvas>
接下来我们通过 JavaScript 来获取这个 Canvas 并通过相关 API 实现绘图环境的初始化
1//获取Canvas元素
2var canvas = document.getElementById('myCanvas');
3//检查canvas合法性
4if(canvas && canvas.getContext)
5{
6 //获取当前上下文
7 var ctx = canvas.getContext('2d')
8}
因为目前 Canvas 只支持 2D 绘图,因此,这里的参数暂时只能为 2d。因为 Cnavas 绘图的 API 都封装在 ctx 这个实例中,因此下面的所有操作都是基于 ctx 来实现的:
使用 Canvas 绘制线
1//设置线宽
2ctx.lineWidth = 10;
3//设置画笔颜色
4ctx.strokeStyle = "red";
5//创建一个路径
6ctx.beginPath();
7//路径起点
8ctx.moveTo(10,10);
9//路径终点
10ctx.lineTo(150,50);
11//绘制路径
12ctx.stroke();
使用 Cnavas 绘制矩形
1//设置线宽
2ctx.lineWidth=5;
3//设置画笔颜色
4ctx.strokeStyle-"red"
5//创建路径
6ctx.beginPath();
7//绘制矩形
8ctx.strokeRect(10,10,70,40);
或者
1//定义矩形
2ctx.rect(10,10,70,40);
3//绘制矩形
4ctx.stroke();
如果需要对矩形进行填充
1//创建路径
2ctx.beginPath()
3//绘制矩形
4ctx.fillRect(10,10,70,40)
使用 Canvas 绘制圆
1//创建路径
2ctx.beginPath();
3//定义圆
4ctx.arc(100,100,50,0,360*Math.PI/180,true);
5//绘制圆
6ctx.stroke();
同样地,可以使用 fill 进行填充绘制
1//创建路径
2ctx.beginPath();
3//定义圆
4ctx.arc(100,100,50,0,360*Math.PI/180,true);
5//绘制圆
6ctx.fill();
使用 Canvas 绘制圆角矩形
绘制圆角矩形需要 arcTo 函数配合 lineTo 来完成
1//创建路径
2ctx.beginPath();
3ctx.moveTo(40,20);
4ctx.lineTo(100,20);
5ctx.arcTo(100,20,120,40,20);
6ctx.lineTo(120,70);
7ctx.arcTo(120,90,100,90,20);
8ctx.lineTo(40,90);
9ctx.arcTo(20,90,100,70,20);
10ctx.lineTo(20,40);
11ctx.arcTo(20,20,40,20,20);
12//绘制圆角矩形
13ctx.stroke();
使用 Canvas 绘制复杂图形
在 HTML5 中可以通过 quadraticCurveTo 函数绘制二次贝塞尔曲线,通过 bezierCurveTo 函数绘制三次贝塞尔曲线,具体代码请参考 API 文档。
使用 Canvas 绘制文字
1//设置字体
2ctx.font="30px Arial";
3//绘制文字
4ctx.strokeText("Hello HTML5",100,50);
使用 Canvas 绘制图片
绘制图片使用 drawImage 函数,其函数原型如下:
1drawImage(image,dx,dy);
其中 image 可以是 HTML 中的标签或者是 JavaScript 中的 Image 对象。如
1//定义一个img标签
2<img id="img_source" src="source.jpg" width="240" height="240"/>
接下来通过 getElementById 来取得图像数据,并将其绘制出来
1var img=document.getElementById("img_source");
2ctx.draw(img,200,200);
如果直接使用 JavaScript 代码
1var img=new Image();
2img.src="source.jpg";
3ctx.draw(img,200,200)
图形的平移操作
使用 translate 函数实现在水平和垂直方向上的平移
图形的旋转操作
使用 rotate 函数实现旋转,需要注意的是传入的参数是弧度
图形的伸缩操作
使用 scale 函数实现伸缩,当参数为负值时表示在该方向上翻转
图形高级特效
这里主要介绍线性渐变、径向渐变、颜色反转、灰度。
- 线性渐变
1//创建一个线性渐变容器
2var grd=ctx.createLinearGradient(0,0,200,0);
3//添加颜色
4grd.addColorStop(0.2,"#00ff00");
5grd.addColorStop(0.8,"#ff0000");
6//应用渐变
7ctx.fillStyle=grd;
- 径向渐变
1//创建一个径向渐变容器
2var grd=ctx.createRadialGradient(100,100,10,100,100,50);
3//添加颜色
4grd.addColorStop(0,"#00ff00");
5grd.addColorStop(,"#ff0000");
6//应用渐变
7ctx.fillStyle=grd;
- 颜色反转 遍历每个像素并对 RGB 值进行取反
- 灰度 灰度计算公式:gary = red * 0.3 + green * 0.59 + blue * 0.11
基础的内容就是这些了,以后如果碰到需要 HTML5 的地方可以回过头来看看。