您现在的位置:首页 --> JavaScript --> 使用JavaScript和Canvas开发游戏(四)
使用JavaScript和Canvas开发游戏(四)
浏览:1440次 出处信息
@param yScroll y轴的全局滚动值
*/
this.update = function (/**Number*/ dt, /**CanvasRenderingContext2D*/context, /**Number*/ xScroll, /**Number*/ yScroll)
{
this.x += dt * this.speed * this.xDirection;
this.y += dt * this.speed * this.yDirection;
01 |
/** |
02 |
测试类,用于演示VisualGameObject类的用法 |
03 |
@class |
04 |
*/ |
05 |
function Bounce() |
06 |
{ |
07 |
/** x轴的运动方向 |
08 |
@type Number |
09 |
*/ |
10 |
this .xDirection = 1; |
11 |
/** y轴的运动方向 |
12 |
@type Number |
13 |
*/ |
14 |
this .yDirection = 1; |
15 |
/** 运动速度 |
16 |
@type Number |
17 |
*/ |
18 |
this .speed = 10; |
19 |
|
20 |
/** |
21 |
初始化对象 |
22 |
@return 对初始化对象的引用 |
23 |
*/ |
24 |
this .startupBounce = function (image) |
25 |
{ |
26 |
this .startupVisualGameObject(image, 0, 0, 0); |
27 |
return this ; |
28 |
} |
29 |
|
30 |
/** |
31 |
更新对象 |
32 |
@param dt 自上一帧绘制起经过的秒数 |
33 |
@param context 绘制上下文 |
34 |
@param xScroll x轴的全局滚动值 |
35 |
@param yScroll y轴的全局滚动值 |
36 |
*/ |
37 |
this .update = function ( /**Number*/ dt, /**CanvasRenderingContext2D*/ context, /**Number*/ xScroll, /**Number*/ yScroll) |
38 |
{ |
39 |
this .x += dt * this .speed * this .xDirection; |
40 |
this .y += dt * this .speed * this .yDirection; |
41 |
|
42 |
if ( this .x >= 450) |
43 |
{ |
44 |
this .x = 450; |
45 |
this .xDirection = -1; |
46 |
} |
47 |
else if ( this .x <= 0) |
48 |
{ |
49 |
this .x = 0; |
50 |
this .xDirection = 1; |
51 |
} |
52 |
|
53 |
if ( this .y >= 250) |
54 |
{ |
55 |
this .y = 250; |
56 |
this .yDirection = -1; |
57 |
} |
58 |
else if ( this .y <= 0) |
59 |
{ |
60 |
this .y = 0; |
61 |
this .yDirection = 1; |
62 |
} |
63 |
} |
64 |
} |
65 |
Bounce.prototype = new VisualGameObject; |
Bounce是第二个应用类,它扩展了VisualGameObject类,并将把自己绘制到屏幕上。Bounce类会显示一幅在屏幕上反弹的图像,效果非常类似第一篇文章中举的例子。这个类是在前面所有类的基础上实现最终动画的关键。
startupBounce函数接受一幅图像,通过调用startupVisualGameObject来初始化这个基本的类。
1 |
/** |
2 |
初始化对象 |
3 |
@return 对初始化对象的引用 |
4 |
*/ |
5 |
this .startupBounce = function (image) |
6 |
{ |
7 |
this .startupVisualGameObject(image, 0, 0, 0); |
8 |
return this ; |
9 |
} |
而update函数(将被GameObjectManager在渲染期间调用)会更新图像的位置,在图像到达画布边缘时反转方向。
01 |
/** |
02 |
更新对象 |
03 |
@param dt 自上一帧绘制起经过的秒数 |
04 |
@param context 绘制上下文 |
05 |
@param xScroll x轴的全局滚动值 |
06 |
@param yScroll y轴的全局滚动值 |
07 |
*/ |
08 |
this .update = function ( /**Number*/ dt, /**CanvasRenderingContext2D*/ context, /**Number*/ xScroll, /**Number*/ yScroll) |
09 |
{ |
10 |
this .x += dt * this .speed * this .xDirection; |
11 |
this .y += dt * this .speed * this .yDirection; |
12 |
|
13 |
if ( this .x >= 450) |
14 |
{ |
15 |
this .x = 450; |
16 |
this .xDirection = -1; |
17 |
} |
18 |
else if ( this .x <= 0) |
19 |
{ |
20 |
this .x = 0; |
21 |
this .xDirection = 1; |
22 |
} |
23 |
|
24 |
if ( this .y >= 250) |
25 |
{ |
26 |
this .y = 250; |
27 |
this .yDirection = -1; |
28 |
} |
29 |
else if ( this .y <= 0) |
30 |
{ |
31 |
this .y = 0; |
32 |
this .yDirection = 1; |
33 |
} |
34 |
} |
35 |
} |
就这些了。你可能会想,怎么没有与绘制这个对象有关的代码呢?相应的代码都在VisualGameObject类的draw函数中了。而且,由于VisualGameObject类扩展了GameObject类,所以我们知道每渲染一帧都会调用一次update和draw函数。Bounce类中的所有代码只跟让图像反弹有关,也就是修改变量x和y。
好啦,我们已经创建了一批类,基于这些类也实现了与第一个示例相同的效果。而有了这个框架,再创建游戏就不必因为绘制画布等底层逻辑以及管理游戏对象等问题而重复编码了。
看看示例Demo吧。http://webdemos.sourceforge.net/jsplatformer3/jsplatformer3.html
建议继续学习:
- 《部落冲突》的设计 (阅读:3181)
- Canvas学习教程 : Canvas介绍 (阅读:3112)
- 使用canvas绘制时钟 (阅读:2815)
- 手机游戏设计初体验 (阅读:2772)
- 游戏多服务器架构的一点想法 (阅读:2750)
- 使用JavaScript和Canvas开发游戏 (阅读:2582)
- HTML5 Canvas(画布)教程 (阅读:2555)
- 游戏程序守护进程-Windows版 (阅读:2419)
- 游戏动作感设计初探 (阅读:2249)
- 使用JavaScript和Canvas开发游戏(一) (阅读:2251)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习