使用JavaScript和Canvas开发游戏(四)
2011年08月15日 Web开发, 编程技术, 翻译
原文作者:Matthew Casperson • 编辑:Michele McDonough
原文链接: Game Development with JavaScript and the Canvas element
1、认识一下Canvas
2、在Canvas上绘图
3、通过Canvas元素实现高级图像操作
4、写一个游戏框架(一)
5、写一个游戏框架(二)
6、通过Canvas实现视差滚动
7、动画
8、JavaScript键盘输入
9、综合运用
10、定义级别
11、跳跃与坠落
12、添加道具
13、加载资源
14、添加主菜单
4、写一个游戏框架(二)
在这篇文章里,我们继续介绍构成这个基本JavaScript游戏框架的其他必要的类。
前一篇文章介绍了GameObjectManager类,该类负责画布的渲染并允许GameObject类更新和删除它们自己。下面就来看一看GameObject类。
GameObject.js
/**
游戏中出现的所有元素的基类
@class
*/
function GameObject()
{
/** 显示的深度次序。较小的zOrder值表示先渲染,因而会在背景中。
@type Number
*/
this.zOrder = 0;
/**
x轴的坐标
@type Number
*/
this.x = 0;
/**
y轴的坐标
@type Number
*/
this.y = 0;
/**
初始化游戏对象,并将其添加到GameObjectManager维护的对象列表中
@param x x轴的坐标
@param y y轴的坐标
@param z 元素的z次序(背景元素的z值较小)
*/
this.startupGameObject = function(/**Number*/ x, /**Number*/ y, /**Number*/ z)
{
this.zOrder = z;
this.x = x;
this.y = y;
g_GameObjectManager.addGameObject(this);
return this;
}
/**
清理当前对象,将其从GameObjectManager维护的对象列表中删除
*/
this.shutdownGameObject = function()
{
g_GameObjectManager.removeGameObject(this);
}
}
这个GameObject类(是一个引擎类)的目的,是为游戏中将会出现的所有对象定义一些共有的属性,包括它们的位置(x和y)和深度(z)。需要注意的是,我们不会直接创建GameObject类的实例,而是会再创建一个类来扩展它。
这个类的x和y坐标值没有什么好说的——就是相应对象左上角位置在画布上的坐标。关键是GameObject中的z值,这个值定义的是对象的深度。理解这个值很重要,这个值较小的GameObject会先绘制到画布上。换句话说,z值较大的GameObject将被绘制到z值较小的GameObject上面。
查看全文 »
为之漫笔(李松峰),本博客专注于Web前后端技术、移动平台开发技术、交互设计和技术翻译。声明一下,因为时常需要外出审稿,而且基本不带笔记本,所以有时可能会迟一点回复大家的留言。