lufylegend教程：如何创建循环移动的背景

最新推荐文章于 2024-04-17 09:44:36 发布

码农下的天桥

最新推荐文章于 2024-04-17 09:44:36 发布

阅读量2k

点赞数

分类专栏：前端 Html5游戏开发

前端同时被 2 个专栏收录

243 篇文章 2 订阅

订阅专栏

Html5游戏开发

20 篇文章 0 订阅

订阅专栏

lufylegend教程：如何创建循环移动的背景

发布时间：2014-09-26 关键字： lufylegend教程

开发游戏的过程中，常常需要循环移动的背景。

类似下面这两种游戏，背景就是循环移动的：

接下来我们来看一下如何使用 lufylegend实现循环移动的背景效果吧。

首先准备一张图：

background.js文件的代码如下：

//背景类
  function Background(){
   base(this,LSprite,[]);
   var self = this;
   self.bitmapData = new LBitmapData(imglist["back"]);
   self.bitmap1 = new LBitmap(self.bitmapData);
   self.addChild(self.bitmap1);
   self.bitmap2 = new LBitmap(self.bitmapData);
   self.bitmap2.y = self.bitmap1.getHeight();
   self.addChild(self.bitmap2);
   self.bitmap3 = new LBitmap(self.bitmapData);
   self.bitmap3.y = self.bitmap1.getHeight()*2;
   self.addChild(self.bitmap3);
  }
  Background.prototype.run = function(){
   var self = this;
   self.bitmap1.y -= STAGE_STEP;
   self.bitmap2.y -= STAGE_STEP;
   self.bitmap3.y -= STAGE_STEP;
   if(self.bitmap1.y < -self.bitmap1.getHeight()){
    self.bitmap1.y = self.bitmap2.y;
    self.bitmap2.y = self.bitmap1.y + self.bitmap1.getHeight();
    self.bitmap3.y = self.bitmap1.y + self.bitmap1.getHeight()*2;
   }
  }

index.html文件的代码如下：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>循环移动的背景</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no,target-densitydpi=device-dpi"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="full-screen" content="true"/>
    <meta name="screen-orientation" content="portrait"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="360-fullscreen" content="true"/>
    <style>
  *{margin:0;padding:0}
    </style>
</head>
<body>
 <div id="mylegend">loading...</div>
 <script src="lufylegend-1.7.6.min.js" language="javascript" type="text/javascript" ></script>
 <script src="background.js" language="javascript" type="text/javascript"></script>
 <script>
  init(30,"mylegend",320,480,main);
  var loadingLayer,backLayer,background;
  var MOVE_STEP = 2, STAGE_STEP = 2;
  var loadData = [
   {name:"back",path:"images/back.jpg"}
  ];
  function main(){
   loadingLayer = new LoadingSample1();
   addChild(loadingLayer);
   LLoadManage.load(
    loadData,
    function(progress){
     loadingLayer.setProgress(progress);
    },
    gameInit
   );
  }
  function gameInit(result){
   imglist = result;
 
   removeChild(loadingLayer);
   loadingLayer=null;
 
   backLayer = new LSprite();
   addChild(backLayer);
 
   //实例化Background类
   background = new Background();
   backLayer.addChild(background);
 
   //绑定循环事件
   backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
  }
  function onframe(){
   //执行背景移动
   background.run();
  }
 </script>
</body>
</html>

用这个案例前，请确认两点：

1、lufylegend.js文件被正确引入；

2、作为背景的图片路径是正确的。

确认这两点后直接运行上述代码，就可以看到背景自下而上不断地移动了。

码农下的天桥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
lufylegend教程：如何创建循环移动的背景

lufylegend教程：如何创建循环移动的背景发布时间：2014-09-26 关键字：lufylegend教程开发游戏的过程中，常常需要循环移动的背景。类似下面这两种游戏，背景就是循环移动的：接下来我们来看一下如何使用 lufylegend实现循环移动的背景效果吧。首先准备一张图：background.js文件的代码如下：
复制链接

扫一扫

专栏目录