IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者
首页 / 前端

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

为之漫笔 2011-08-21 10:35:52 累计浏览 2,374 次
本机暂存
标签 Canvas Game Development JavaScript Parallax Scrolling
nbsp;           if (y==0) newScrollPosition[1] = yScroll * this.scrollFactor;
24             areaDrawn = this.drawRepeat(canvas, newPosition, newFillArea, newScrollPosition);
25         }
26     }
27 }
28 this.drawRepeat = function(canvas, newPosition, newFillArea, newScrollPosition)
29 {
30     // 找到重复绘制纹理图像的起点（左上角）
31     var xOffset = Math.abs(newScrollPosition[0]) % this.image.width;
32     var yOffset = Math.abs(newScrollPosition[1]) % this.image.height;
33     var left = newScrollPosition[0]<0?this.image.width-xOffset:xOffset;
34     var top = newScrollPosition[1]<0?this.image.height-yOffset:yOffset;
35     var width = newFillArea[0] < this.image.width-left?newFillArea[0]:this.image.width-left;
36     var height = newFillArea[1] < this.image.height-top?newFillArea[1]:this.image.height-top;
37     // 绘制图像
38     canvas.drawImage(this.image, left, top, width, height, newPosition[0], newPosition[1], width, height);
39     return [width, height];
40 }

ApplicationManager.js


/**
    ApplicationManager用于管理应用
    @class
*/
function ApplicationManager()
{
    /**
        初始化对象
        @return A 对初始化对象的引用
    */
    this.startupApplicationManager = function()
    {
        this.startupGameObject();
 this.background3 = new RepeatingGameObject().startupRepeatingGameObject(g_back2, 0, 100, 3, 600, 320, 1);
        this.background2 = new RepeatingGameObject().startupRepeatingGameObject(g_back1, 0, 100, 2, 600, 320, 0.75);
        this.background = new RepeatingGameObject().startupRepeatingGameObject(g_back0, 0, 0, 1, 600, 320, 0.5);
        return this;
    }
 /**
        更新当前对象
        @param dt 自上一帧绘制起经过的秒数
        @param context 绘制上下文
        @param xScroll x轴的全局滚动值
        @param yScroll y轴的全局滚动值
    */
    this.update = function(/**Number*/ dt, /**CanvasRenderingContext2D*/ context, /**Number*/ xScroll, /**Number*/ yScroll)
    {
  g_GameObjectManager.xScroll += 50 * dt;
 }
}
ApplicationManager.prototype = new GameObject
01 /**
02     ApplicationManager用于管理应用
03     @class
04 */
05 function ApplicationManager()
06 {
07     /**
08         初始化对象
09         @return A 对初始化对象的引用
10     */
11     this.startupApplicationManager = function()
12     {
13         this.startupGameObject();
14     this.background3 = new RepeatingGameObject().startupRepeatingGameObject(g_back2, 0, 100, 3, 600, 320, 1);
15         this.background2 = new RepeatingGameObject().startupRepeatingGameObject(g_back1, 0, 100, 2, 600, 320, 0.75);
16         this.background = new RepeatingGameObject().startupRepeatingGameObject(g_back0, 0, 0, 1, 600, 320, 0.5);
17         return this;
18     }
19   
20     /**
21         更新当前对象
22         @param dt 自上一帧绘制起经过的秒数
23         @param context 绘制上下文
24         @param xScroll x轴的全局滚动值
25         @param yScroll y轴的全局滚动值
26     */
27     this.update = function(/**Number*/ dt, /**CanvasRenderingContext2D*/ context, /**Number*/ xScroll, /**Number*/ yScroll)
28     {
29         g_GameObjectManager.xScroll += 50 * dt;
30     }
31 }
32 ApplicationManager.prototype = new GameObject

在这里，我们通过ApplicationManager创建了三个RepeatingGameObject类的实例，每个实例分别显示为一个图层，使用z（深度）和scrollFactor值来创造RepeatingGameObject 渐远和渐慢的效果。

最终结果很不错。视差滚动为画布赋予了完美的纵深感，而整个效果只多编写了一个类就实现了。

看一看视差滚动的Demo吧。http://webdemos.sourceforge.net/jsplatformer4/jsplatformer4.html

同分类推荐文章

  1. translateZ() （2026-06-25 21:18:56）
  2. translateY() （2026-06-25 21:17:56）
  3. translateX() （2026-06-25 21:16:01）

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 （累计阅读 48,352）
  2. 深入理解Javascript之执行上下文(Execution Context) （累计阅读 18,411）
  3. 从输入 URL 到页面加载完成的过程中都发生了什么事情？ （累计阅读 15,938）
  4. 图片动态局部毛玻璃模糊效果的实现 （累计阅读 14,849）
  5. 天朝第二代身份证号码的验证机制 （累计阅读 14,764）
  6. HTML 5 的data-* 自定义属性 （累计阅读 14,353）
  7. 分享一个JQUERY颜色选择插件 （累计阅读 14,225）
  8. 什么是全栈工程师？ （累计阅读 14,041）
  9. 快速排序（Quicksort）的Javascript实现 （累计阅读 11,737）
  10. 7 天打造前端性能监控系统 （累计阅读 11,193）