背景图无缝连接滚动

 

  背景图无缝连接滚动——在游戏进行的过程,我们希望通背景的移动来产生一个场景动态变化的效果,从而让玩家感觉到游戏是正在进行中。

  而这个背景图移动的方法,我们可以通过一张很大的图片进行移动来产生动态效果,但是,图片很大的话就会占用相当多的资源,所以,对于手持设备来说,这样不太可行。

  所以,为了节省设备的资源,我们可以通过另一种方法来实现,就是通过一张背景图来进行滚动,而滚动的过程中,再通过程序对图片进行无缝链接,这样,就可以不断循环地移动背景图来产生场景动态效果。

 

  另外,大家可能会提出一个问题,就是为什么要进行无缝连接?

  其实,原因就是,为了节省资源,我们所使用的背景图的大小与手机屏幕是一样大,而当背景图移动以后,背景就不能再完全覆盖手机屏幕,从而在手机屏幕上出现了没有背景覆盖的空白部分。

  为了解决这个问题,我们就需要通过程序把移出手机屏幕的那个部分的背景图取出来,填充到空白的部分中,这样,玩家就看不到空白部分出现,从而形成了背景滚动的无缝连接。

 

 

   当我们了解完这些理论知识以后,就可以进入到游戏中,然后,立即通过动手实践把相关的代码实现出来,并显示通过一张背景图进行无缝连接滚动的效果。

 

(通过游戏模式学习与训练,需要在电脑上运行)

 

进入游戏学习与训练

 

 

 

 

本章学习后的代码运行效果如下:(可在手机上查看)

 

Please use a browser that supports "canvas"