技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> JavaScript --> 使用JavaScript和Canvas开发游戏（四）

使用JavaScript和Canvas开发游戏（四）

浏览:1485次  出处信息
;     @param xScroll x轴的全局滚动值
        @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;
  if (this.x >= 450)
  {
   this.x = 450;
   this.xDirection = -1;
  }
  else if (this.x <= 0)
  {
   this.x = 0;
   this.xDirection = 1;
  }
  if (this.y >= 250)
  {
   this.y = 250;
   this.yDirection = -1;
  }
  else if (this.y <= 0)
  {
   this.y = 0;
   this.yDirection = 1;
  }
 }
}
Bounce.prototype = new VisualGameObject;
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来初始化这个基本的类。


/**
       初始化对象
       @return 对初始化对象的引用
   */
this.startupBounce = function(image)
{
 this.startupVisualGameObject(image, 0, 0, 0);
 return this;
}
1 /**
2     初始化对象
3     @return 对初始化对象的引用
4 */
5 this.startupBounce = function(image)
6 {
7     this.startupVisualGameObject(image, 0, 0, 0);
8     return this;
9 }

而update函数（将被GameObjectManager在渲染期间调用）会更新图像的位置，在图像到达画布边缘时反转方向。


 /**
       更新对象
        @param dt 自上一帧绘制起经过的秒数
        @param context 绘制上下文
        @param xScroll x轴的全局滚动值
        @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;
  if (this.x >= 450)
  {
   this.x = 450;
   this.xDirection = -1;
  }
  else if (this.x <= 0)
  {
   this.x = 0;
   this.xDirection = 1;
  }
  if (this.y >= 250)
  {
   this.y = 250;
   this.yDirection = -1;
  }
  else if (this.y <= 0)
  {
   this.y = 0;
   this.yDirection = 1;
  }
 }
}
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

建议继续学习：

  1. 《部落冲突》的设计    (阅读：3550)
  2. Canvas学习教程 : Canvas介绍    (阅读：3168)
  3. 手机游戏设计初体验    (阅读：3060)
  4. 游戏多服务器架构的一点想法    (阅读：2866)
  5. 使用canvas绘制时钟    (阅读：2866)
  6. 使用JavaScript和Canvas开发游戏    (阅读：2709)
  7. HTML5 Canvas(画布)教程    (阅读：2622)
  8. 游戏程序守护进程-Windows版    (阅读：2537)
  9. 游戏动作感设计初探    (阅读：2456)
  10. 网络游戏的社会化    (阅读：2343)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：使用JavaScript和Canvas开发游戏（三）
后一篇：使用JavaScript和Canvas开发游戏（五） >>
文章信息
建议继续学习
近3天十大热文
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1