本节书摘来自华章出版社《HTML5 2D游戏编程核心技术》一书中的第3章，第3.9节使用视差产生视深的假象，作者［美］　戴维·吉尔里，更多章节内容可以访问云栖社区“华章计算机”公众号查看。

3.9　使用视差产生视深的假象

如果你曾在行驶中的汽车座椅上观察到自己的手相对于电线杆在高速运动，你就会知道，接近你的物体比远离你的物体移动得快。这种现象称为视差。Snail Bait游戏是一个二维平台游戏，但它也应用了一些视差特效，使得游戏中的平台看起来比游戏背景更接近跑步小人。Snail Bait游戏是通过让平台比背景滚动的速率更快来实现这种视差的，如图3.10所示。顶部截图显示了在特定时间点的背景，底部截图显示了经过一些游戏帧后的背景。从这两个截图中你可以看到，在相同的时间内，平台移动的速度要比背景快得多。

图3.10　视差：平台（近的）滚动比背景（远的）滚动快

为了实现视差，我们需要做的是要修订drawPlatforms()函数，如程序清单3.18所示。

程序清单3.18　修订后的drawPlatforms()函数

原始版本的drawPlatforms()函数简单地遍历平台数据，对每一个数据实例调用drawPlatforms()函数，如程序清单3.3所示。修订后的drawPlatforms()函数将游戏canvas元素的坐标系向左平移platformOffset个像素点，遍历数据，然后再将坐标系平移回调用drawPlatforms()函数之前所处的位置。

修订后的drawPlatforms()函数在实现滚动平台时，同程序清单3.14中列出的函数drawBackground()滚动背景类似。Snail Bait游戏使用两个偏移量来分别滚动背景和平台：一个用于背景，另一个用于平台。既然要使用平台偏移量来滚动平台，就必须计算该数值。程序清单3.19显示了Snail Bait游戏中setPlatformOffset()函数的实现，该函数计算平台偏移量的方法同程序清单3.15中setBackgroundOffset()函数计算背景偏移量的方法类似。程序清单3.19　设置平台速度和偏移量

视差效果的最后一个问题是如何更新draw()函数，来完成滚动平台。修订版本的draw()函数如程序清单3.20所示。

程序清单3.20　修改过的draw()函数

对于每一个动画帧来说，draw()函数通过setPlatformVelocity()函数设置平台的移动速率，接着设置偏移量，然后绘制背景、跑步小人以及平台。