葡京娱乐场官网经文的推箱子

正文转自:http://blog.csdn.net/lufy_legend/article/details/8607933

开言:

开言:

lufylegend.js引擎已经更新到1.6上述了,固然本人时有时无发表了一部分学科,也提供了一些轻巧易行的娱乐示例,可是一贯以来也不曾创立四款完整的小说来,实在也是协和壹个人岁月太单薄了,接下去的日子,笔者会尽量的选择lufylegend.js引擎开辟两款完整的著述,来扩充一下那几个引擎的说服力,希望喜欢html5,喜欢嬉水开辟的恋人多提些观念。

那三次先来看贰个精粹的推箱子游戏,相信我们也都晓得这款游戏,推箱子游戏最早源于扶桑,是一款特别训练逻辑考虑才具的游乐,箱子只好推无法拉,游戏的使用者必须在一个星星的上空里,将有着的箱子归位,如下图所示。

葡京娱乐场官网 1

图1

那是本人用前卫版lufylegend.js引擎开拓的,想挑衅一下的朋友,能够点击下边包车型客车游戏链接试一下温馨能经过几关。

http://lufylegend.com/demo/box

娱乐一共6关,作者在娱乐里参预了排名系统,每过一关能够上传自个儿的成就,跟我们比拼一下,只怕您也足以将自身的合格方法心得等回复到小说下边。

 

lufylegend.js引擎已经更新到1.6之上了,即便笔者时断时续发表了有的课程,也提供了一部分简易的游乐示例,不过一直以来也尚无创设四款完整的创作来,实在也是团结壹位岁月太单薄了,接下去的日子,我会尽量的采纳lufylegend.js引擎开采两款完整的著述,来充实一下这几个引擎的说服力,希望喜欢html5,喜欢嬉水开拓的爱侣多提些理念。

制作起来

好了,废话说完了,今后来探望怎样来制作这款游戏。

那三回先来看二个杰出的推箱子游戏,相信大家也都了然那款游戏,推箱子游戏最早源于扶桑,是一款特别磨炼逻辑思量技术的嬉戏,箱子只好推不可能拉,游戏者必须在贰个点滴的空间里,将全数的箱子归位,如下图所示。

一,首先,你须求下载lufylegend.js引擎

上边是本人在博客的lufylegend-1.6.0揭橥帖

http://blog.csdn.net/lufy\_legend/article/details/8593968

 

上面一步步来进入开辟正题。

葡京娱乐场官网 2

二,绘制背景和箱子

咱俩先来图谋一张图,

葡京娱乐场官网 3

图2

借使大家将上边的图平均分割成5份,那么他们的序号分别为0,1,2,3,4。

咱俩采纳方面5个小图片就可以凑合狂妄的房间以及房间内箱子的布阵。

举例说,笔者博客一同头的亲自去做图1,它是玩玩首先关的截图,要绘制那么些房间,首先要知道这几个图片应该摆放的职位,大家先行盘算一个数组。

 

[javascript] view
plain
copyprint?

  1. var stage01 = [  
  2. [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],  
  3. [-1,-1, 1, 1, 1, 1, 1, 1,-1,-1,-1],  
  4. [-1,-1, 1, 0, 0, 0, 0, 1, 1,-1,-1],  
  5. [-1,-1, 1, 0, 0, 4, 0, 0, 1,-1,-1],  
  6. [-1,-1, 1, 4, 4, 0, 4, 4, 1,-1,-1],  
  7. [-1,-1, 1, 0, 0, 4, 0, 0, 1,-1,-1],  
  8. [-1,-1, 1, 1, 0, 0, 0, 0, 1,-1,-1],  
  9. [-1,-1,-1, 1, 1, 1, 1, 1, 1,-1,-1],  
  10. [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]  
  11. ];  

    var stage01 = [
    [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
    [-1,-1, 1, 1, 1, 1, 1, 1,-1,-1,-1],
    [-1,-1, 1, 0, 0, 0, 0, 1, 1,-1,-1],
    [-1,-1, 1, 0, 0, 4, 0, 0, 1,-1,-1],
    [-1,-1, 1, 4, 4, 0, 4, 4, 1,-1,-1],
    [-1,-1, 1, 0, 0, 4, 0, 0, 1,-1,-1],
    [-1,-1, 1, 1, 0, 0, 0, 0, 1,-1,-1],
    [-1,-1,-1, 1, 1, 1, 1, 1, 1,-1,-1],
    [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]
    ];

上边包车型的士-1意味不布署,然后0,1,4等分别对应着图第22中学的序号。

 

安分守己这几个数组来绘制房间就归纳了,看下边包车型地铁函数

 

[javascript] view
plain
copyprint?

  1. function drawFloor(x,y){  
  2.     if(list[y][x] < 0)return;  
  3.     var bitmap = new LBitmap(bitmapDataList[list[y][x]]);  
  4.     bitmap.x = x*STEP;  
  5.     bitmap.y = y*STEP;  
  6.     boxLayer.addChild(bitmap);  
  7. }  

    function drawFloor(x,y){

    if(list[y][x] < 0)return;
    var bitmap = new LBitmap(bitmapDataList[list[y][x]]);
    bitmap.x = x*STEP;
    bitmap.y = y*STEP;
    boxLayer.addChild(bitmap);
    

    }

其一list数组正是地点的stage01数组,参数x,y分别是数组的列和行的序号,STEP是各样小图片的长短,绘制一个小图块,其实自身正是创建了一个LBitmap对象。

 

有关LCoca Cola,LBitmap等对象是lufylegend.js引擎中很常用的靶子,关于它们的用法,请大家参照他事他说加以考查官方的API文书档案,可能看本人原先的局地篇章来打听一下,这里不加赘述了。

当然,一起首,室内要有箱子,箱子一初步的岗位也是索要事先安装好的,大家同样创立一个数组。

 

[javascript] view
plain
copyprint?

  1. var box01 = [  
  2. {x:3,y:3},  
  3. {x:4,y:3},  
  4. {x:5,y:3},  
  5. {x:5,y:5},  
  6. {x:6,y:5},  
  7. {x:7,y:5}  
  8. ];  

    var box01 = [
    {x:3,y:3},
    {x:4,y:3},
    {x:5,y:3},
    {x:5,y:5},
    {x:6,y:5},
    {x:7,y:5}
    ];

绘制箱子的函数如下

 

 

[javascript] view
plain
copyprint?

  1. function drawBox(){  
  2.     var bitmap;  
  3.     for(var i=0;i<boxList[stageIndex].length;i++){  
  4.         bitmap = new LBitmap(bitmapDataList[2]);  
  5.         bitmap.x = boxList[stageIndex][i].x*STEP;  
  6.         bitmap.y = boxList[stageIndex][i].y*STEP;  
  7.         boxLayer.addChild(bitmap);  
  8.         nowBoxList.push(bitmap);  
  9.     }  
  10. }  

    function drawBox(){

    var bitmap;
    for(var i=0;i<boxList[stageIndex].length;i++){
        bitmap = new LBitmap(bitmapDataList[2]);
        bitmap.x = boxList[stageIndex][i].x*STEP;
        bitmap.y = boxList[stageIndex][i].y*STEP;
        boxLayer.addChild(bitmap);
        nowBoxList.push(bitmap);
    }
    

    }

 

地点,作者同样采纳LBitmap对象来体现那么些箱子,nowBoxList数组用来囤积那个曾经加载到演艺分界面上的箱子对象,之后用来判定游戏过关。

因为stage01数组中的4就表示箱子供给还原的地方,所以在认清游戏是不是合格的时候,只要求看清下那个岗位是还是不是与全部箱子的职位重合,推断方法如下。

 

[javascript] view
plain
copyprint?

  1. function checkBox(){  
  2.     var bitmap,x,y,win=true;  
  3.     list = [];  
  4.     for(var i=0;i<stageList[stageIndex].length;i++){  
  5.         list.push(stageList[stageIndex][i].join(“,”).split(“,”));  
  6.     }  
  7.       
  8.     for(var i=0;i<nowBoxList.length;i++){  
  9.         bitmap = nowBoxList[i];  
  10.         x = bitmap.x / STEP;  
  11.         y = bitmap.y / STEP;  
  12.         if(list[y][x] == 4){  
  13.             bitmap.bitmapData = bitmapDataList[3];  
  14.         }else{  
  15.             bitmap.bitmapData = bitmapDataList[2];  
  16.             win = false;  
  17.         }  
  18.         list[y][x] += 10;  
  19.     }  
  20.     if(win)gameClearShow();  
  21. }  

    function checkBox(){

    var bitmap,x,y,win=true;
    list = [];
    for(var i=0;i<stageList[stageIndex].length;i++){
        list.push(stageList[stageIndex][i].join(",").split(","));
    }
    
    for(var i=0;i<nowBoxList.length;i++){
        bitmap = nowBoxList[i];
        x = bitmap.x / STEP;
        y = bitmap.y / STEP;
        if(list[y][x] == 4){
            bitmap.bitmapData = bitmapDataList[3];
        }else{
            bitmap.bitmapData = bitmapDataList[2];
            win = false;
        }
        list[y][x] += 10;
    }
    if(win)gameClearShow();
    

    }

代码小编是直接从程序中截取的,所以出现了些新的数组和指标。

 

stageList储存了具有的卡子音讯,stageIndex是时下关卡的序号,stageList[stageIndex]就能够取妥善前关卡的信息,bitmapDataList数组积存了图第11中学型Mini图片的LBitmapData对象,这一个临时不说,关键是上边。

 

[javascript] view
plain
copyprint?

  1. if(list[y][x] == 4){  
  2.     bitmap.bitmapData = bitmapDataList[3];  
  3. }else{  
  4.     bitmap.bitmapData = bitmapDataList[2];  
  5.     win = false;  
  6. }  

        if(list[y][x] == 4){
            bitmap.bitmapData = bitmapDataList[3];
        }else{
            bitmap.bitmapData = bitmapDataList[2];
            win = false;
        }
    

函数中循环了独具箱子的职责,假设她们的职分的序号为4,则意味着该箱子已经归位,全体归位表示过关,否则游戏继续,重回false。

 

图1

三,主人公登台,拉动箱子。

同等计划一张图纸,如下

葡京娱乐场官网 4

图3

人物走动动画,当然就供给lufylegend引擎中另八个根本的对象LAnimation,它极度用来每家每户播放图片以多变动画,具体用法请参照官方API文书档案。

上边是主人的构造器

 

[javascript] view
plain
copyprint?

  1. /** 
  2.  * 循环事件  
  3.  * @param data 图片数据 
  4.  * @param row 图片分割行数 
  5.  * @param col 图片分割列数 
  6.  **/  
  7. function Character(data,row,col){  
  8.     base(this,LSprite,[]);  
  9.     var self = this;  
  10.     //设定人物动作速度   
  11.     self.speed = 2;  
  12.     self.speedIndex = 0;  
  13.     //设定人物大小   
  14.     data.setProperties(0,0,data.image.width/col,data.image.height/row);  
  15.     //得到人物图片拆分数组   
  16.     var list = LGlobal.divideCoordinate(data.image.width,data.image.height,row,col);  
  17.     //设定人物动画   
  18.     self.anime = new LAnimation(this,data,list);  
  19.     //设定不活动   
  20.     self.move = false;  
  21.     //在二个平移步长中的移动次数设定   
  22.     self.moveIndex = 0;  
  23. };  

    /**

    • 循环事件
    • @param data 图片数据
    • @param row 图片分割行数
    • @param col 图片分割列数
      **/
      function Character(data,row,col){
      base(this,LSprite,[]);
      var self = this;
      //设定人物动作速度
      self.speed = 2;
      self.speedIndex = 0;
      //设定人物大小
      data.setProperties(0,0,data.image.width/col,data.image.height/row);
      //获得人物图片拆分数组
      var list = LGlobal.divideCoordinate(data.image.width,data.image.height,row,col);
      //设定人物动画
      self.anime = new LAnimation(this,data,list);
      //设定不挪窝
      self.move = false;
      //在二个平移步长中的移动次数设定
      self.moveIndex = 0;
      };

主人家如何带动箱子,看下边包车型大巴onmove函数

 

 

[javascript] view
plain
copyprint?

  1. /** 
  2.  * 开头运动  
  3.  **/  
  4. Character.prototype.onmove = function (){  
  5.     var self = this;  
  6.     //设定二个移动步长中的移动次数   
  7.     var ml_cnt = 4;  
  8.     //计算一遍活动的长短   
  9.     var ml = STEP/ml_cnt;  
  10.     //依照运动方向,伊始运动   
  11.     switch (self.direction){  
  12.         case UP:  
  13.             self.y -= ml;  
  14.             if(box)box.y -= ml;  
  15.             break;  
  16.         case LEFT:  
  17.             self.x -= ml;  
  18.             if(box)box.x -= ml;  
  19.             break;  
  20.         case RIGHT:  
  21.             self.x += ml;  
  22.             if(box)box.x += ml;  
  23.             break;  
  24.         case DOWN:  
  25.             self.y += ml;  
  26.             if(box)box.y += ml;  
  27.             break;  
  28.     }  
  29.     self.moveIndex++;  
  30.     //当移动次数等于设定的次数,开端剖断是不是继续移动
      
  31.     if(self.moveIndex >= ml_cnt){  
  32.         self.moveIndex = 0;  
  33.         box = null;  
  34.         self.move = false;  
  35.         checkBox();  
  36.     }  
  37. };  

    /**

    • 千帆竞发活动
      **/
      Character.prototype.onmove = function (){
      var self = this;
      //设定二个平移步长中的移动次数
      var ml_cnt = 4;
      //计算一次活动的长度
      var ml = STEP/ml_cnt;
      //依据运动方向,起先运动
      switch (self.direction){

       case UP:
           self.y -= ml;
           if(box)box.y -= ml;
           break;
       case LEFT:
           self.x -= ml;
           if(box)box.x -= ml;
           break;
       case RIGHT:
           self.x += ml;
           if(box)box.x += ml;
           break;
       case DOWN:
           self.y += ml;
           if(box)box.y += ml;
           break;
      

      }
      self.moveIndex++;
      //当移动次数等于设定的次数,伊始判断是或不是继续移动
      if(self.moveIndex >= ml_cnt){

       self.moveIndex = 0;
       box = null;
       self.move = false;
       checkBox();
      

      }
      };

能够见见,箱子是还是不是跟着主人一同走,关键是要看box那个变量,这一个变量的值是在上面包车型大巴checkRoad函数中装置的。

 

 

[javascript] view
plain
copyprint?

  1. Character.prototype.checkRoad = function (dir){  
  2.     var self = this;  
  3.     var tox,toy;  
  4.     //初阶企图移动目标地的坐标   
  5.     switch (dir){  
  6.         case UP:  
  7.             tox = 0;  
  8.             toy = -1;  
  9.             break;  
  10.         case LEFT:  
  11.             tox = -1;  
  12.             toy = 0;  
  13.             break;  
  14.         case RIGHT:  
  15.             tox = 1;  
  16.             toy = 0;  
  17.             break;  
  18.         case DOWN:  
  19.             tox = 0;  
  20.             toy = 1;  
  21.             break;  
  22.     }  
  23.     if(list[self.y/STEP + toy][self.x/STEP + tox]==1)return false;  
  24.     if(list[self.y/STEP + toy][self.x/STEP + tox]>4){  
  25.         if(list[self.y/STEP + toy*2][self.x/STEP + tox*2]==1 || list[self.y/STEP + toy*2][self.x/STEP + tox*2]>4)return false;  
  26.         box = getBox(self.x + tox*STEP,self.y + toy*STEP);  
  27.     }  
  28.     return true;  
  29. };  

    Character.prototype.checkRoad = function (dir){

    var self = this;
    var tox,toy;
    //开始计算移动目的地的坐标
    switch (dir){
        case UP:
            tox = 0;
            toy = -1;
            break;
        case LEFT:
            tox = -1;
            toy = 0;
            break;
        case RIGHT:
            tox = 1;
            toy = 0;
            break;
        case DOWN:
            tox = 0;
            toy = 1;
            break;
    }
    if(list[self.y/STEP + toy][self.x/STEP + tox]==1)return false;
    if(list[self.y/STEP + toy][self.x/STEP + tox]>4){
        if(list[self.y/STEP + toy*2][self.x/STEP + tox*2]==1 || list[self.y/STEP + toy*2][self.x/STEP + tox*2]>4)return false;
        box = getBox(self.x + tox*STEP,self.y + toy*STEP);
    }
    return true;
    

    };

其实,便是推断一下主人公要走的方向的前线是还是不是有障碍物,假诺障碍物是墙则不行移动,若是是箱子的话,就要看看箱子的背后是还是不是有障碍物,若是有则不可移动,不然箱子就须求随着主人一齐运动,将box设置为主人前方的箱子就可以。
上边这几个函数,是在人物将要发生位移的时候被调用的,如下。

 

 

[javascript] view
plain
copyprint?

  1. /** 
  2.  * 改摄人心魄物方向,并认清是还是不是可活动 
  3.  **/  
  4. Character.prototype.changeDir = function (dir){  
  5.     var self = this;  
  6.     if(self.move)return;  
  7.     self.direction = dir;  
  8.     self.anime.setAction(dir);  
  9.     if(!self.checkRoad(dir))return;  
  10.     self.move = true;  
  11.     steps.text = parseInt(steps.text) + 1;  
  12. };  

    /**

    • 更动人物方向,并决断是或不是可活动
      **/
      Character.prototype.changeDir = function (dir){
      var self = this;
      if(self.move)return;
      self.direction = dir;
      self.anime.setAction(dir);
      if(!self.checkRoad(dir))return;
      self.move = true;
      steps.text = parseInt(steps.text) + 1;
      };

当图1中的方向Logo被按下的时候,根据点击的主旋律,来落成人物的移动。

 

点击方向Logo的艺术自然是鼠标事件

[javascript] view
plain
copyprint?

  1. ctrlLayer.addEventListener(LMouseEvent.MOUSE_UP,onCtrl);  

    ctrlLayer.addEventListener(LMouseEvent.MOUSE_UP,onCtrl);

下一场在onCtrl函数中依照点击的职位,来进展相应的运动。

 

 

[javascript] view
plain
copyprint?

  1. function onCtrl(event){  
  2.     var ctrlSize = 60;  
  3.     if(event.selfX >= ctrlSize && event.selfX <= ctrlSize*2){  
  4.         if(event.selfY >= 0 && event.selfY <= ctrlSize){  
  5.             player.changeDir(UP);  
  6.         }else if(event.selfY >= ctrlSize*2 && event.selfY <= ctrlSize*3){  
  7.             player.changeDir(DOWN);  
  8.         }  
  9.     }else if(event.selfY >= ctrlSize && event.selfY <= ctrlSize*2){  
  10.         if(event.selfX >= 0 && event.selfX <= ctrlSize){  
  11.             player.changeDir(LEFT);  
  12.         }else if(event.selfX >= ctrlSize*2 && event.selfX <= ctrlSize*3){  
  13.             player.changeDir(RIGHT);  
  14.         }  
  15.     }  
  16. }  

    function onCtrl(event){

    var ctrlSize = 60;
    if(event.selfX >= ctrlSize && event.selfX <= ctrlSize*2){
        if(event.selfY >= 0 && event.selfY <= ctrlSize){
            player.changeDir(UP);
        }else if(event.selfY >= ctrlSize*2 && event.selfY <= ctrlSize*3){
            player.changeDir(DOWN);
        }
    }else if(event.selfY >= ctrlSize && event.selfY <= ctrlSize*2){
        if(event.selfX >= 0 && event.selfX <= ctrlSize){
            player.changeDir(LEFT);
        }else if(event.selfX >= ctrlSize*2 && event.selfX <= ctrlSize*3){
            player.changeDir(RIGHT);
        }
    }
    

    }

这么,游戏的首要效用部分,就介绍完了。

 

 

四,建贰个上马画面

如下。

 

葡京娱乐场官网 5

图4

运用lufylegend.js引擎做个分界面,能够说并非难度,代码如下。

 

 

[javascript] view
plain
copyprint?

  1. function GameLogo(){  
  2.     base(this,LSprite,[]);  
  3.     var self = this;  
  4.       
  5.     var logolist = [[1,1,1,1],[1,2,4,1],[1,4,2,1],[1,1,1,1]];  
  6.     var bitmap,logoLayer;  
  7.       
  8.     logoLayer = new LSprite();  
  9.     logoLayer.graphics.drawRect(6,”#FF7F50″,[0,0,LGlobal.width,LGlobal.height],true,”#FFDAB9″);  
  10.     self.addChild(logoLayer);  
  11.       
  12.     logoLayer = new LSprite();  
  13.     logoLayer.x = 50;  
  14.     logoLayer.y = 50;  
  15.     for(var i=0;i<logolist.length;i++){  
  16.         for(var j=0;j<logolist.length;j++){  
  17.             bitmap = new LBitmap(bitmapDataList[logolist[i][j]]);  
  18.             bitmap.x = j*STEP;  
  19.             bitmap.y = i*STEP;  
  20.             logoLayer.addChild(bitmap);  
  21.         }  
  22.     }  
  23.     bitmap = new LBitmap(new LBitmapData(imglist[“player”],0,0,STEP,STEP));  
  24.     bitmap.x = STEP;  
  25.     bitmap.y = 2*STEP;  
  26.     logoLayer.addChild(bitmap);  
  27.     self.addChild(logoLayer);  
  28.       
  29.     labelText = new LTextField();  
  30.     labelText.rotate = -20;  
  31.     labelText.color = “#4B0082”;  
  32.     labelText.font = “HG行書体”;  
  33.     labelText.size = 100;  
  34.     labelText.x = 300;  
  35.     labelText.y = 50;  
  36.     labelText.stroke = true;  
  37.     labelText.lineWidth = 4;  
  38.     labelText.text = “推”;  
  39.     self.addChild(labelText);  
  40.       
  41.     labelText = new LTextField();  
  42.     labelText.color = “#4B0082”;  
  43.     labelText.font = “HG行書体”;  
  44.     labelText.size = 100;  
  45.     labelText.x = 450;  
  46.     labelText.y = 60;  
  47.     labelText.stroke = true;  
  48.     labelText.lineWidth = 4;  
  49.     labelText.text = “箱”;  
  50.     self.addChild(labelText);  
  51.       
  52.     labelText = new LTextField();  
  53.     labelText.rotate = 20;  
  54.     labelText.color = “#4B0082”;  
  55.     labelText.font = “HG行書体”;  
  56.     labelText.size = 100;  
  57.     labelText.x = 600;  
  58.     labelText.y = 60;  
  59.     labelText.stroke = true;  
  60.     labelText.lineWidth = 4;  
  61.     labelText.text = “子”;  
  62.     self.addChild(labelText);  
  63.       
  64.     labelText = new LTextField();  
  65.     labelText.color = “#B22222”;  
  66.     labelText.font = “HG行書体”;  
  67.     labelText.size = 40;  
  68.     labelText.x = 100;  
  69.     labelText.y = 250;  
  70.     labelText.stroke = true;  
  71.     labelText.lineWidth = 4;  
  72.     labelText.text = “Click to Start Game !!”;  
  73.     self.addChild(labelText);  
  74.       
  75.     var social = new Social();  
  76.     social.x = 220;  
  77.     social.y = 330;  
  78.     self.addChild(social);  
  79.       
  80.     labelText = new LTextField();  
  81.     labelText.font = “HG行書体”;  
  82.     labelText.size = 14;  
  83.     labelText.x = 400;  
  84.     labelText.y = 390;  
  85.     labelText.text = “- Html5 Game Engine lufylegend.js”;  
  86.     self.addChild(labelText);  
  87.     labelText = new LTextField();  
  88.     labelText.color = “#006400”;  
  89.     labelText.font = “HG行書体”;  
  90.     labelText.size = 14;  
  91.     labelText.x = 400;  
  92.     labelText.y = 410;  
  93.     labelText.text = “http://www.lufylegend.com/lufylegend“;  
  94.     self.addChild(labelText);  
  95.       
  96.     self.addEventListener(LMouseEvent.MOUSE_UP,menuShow);  
  97. };  

    function GameLogo(){

    base(this,LSprite,[]);
    var self = this;
    
    var logolist = [[1,1,1,1],[1,2,4,1],[1,4,2,1],[1,1,1,1]];
    var bitmap,logoLayer;
    
    logoLayer = new LSprite();
    logoLayer.graphics.drawRect(6,"#FF7F50",[0,0,LGlobal.width,LGlobal.height],true,"#FFDAB9");
    self.addChild(logoLayer);
    
    logoLayer = new LSprite();
    logoLayer.x = 50;
    logoLayer.y = 50;
    for(var i=0;i<logolist.length;i++){
        for(var j=0;j<logolist.length;j++){
            bitmap = new LBitmap(bitmapDataList[logolist[i][j]]);
            bitmap.x = j*STEP;
            bitmap.y = i*STEP;
            logoLayer.addChild(bitmap);
        }
    }
    bitmap = new LBitmap(new LBitmapData(imglist["player"],0,0,STEP,STEP));
    bitmap.x = STEP;
    bitmap.y = 2*STEP;
    logoLayer.addChild(bitmap);
    self.addChild(logoLayer);
    
    labelText = new LTextField();
    labelText.rotate = -20;
    labelText.color = "#4B0082";
    labelText.font = "HG行書体";
    labelText.size = 100;
    labelText.x = 300;
    labelText.y = 50;
    labelText.stroke = true;
    labelText.lineWidth = 4;
    labelText.text = "推";
    self.addChild(labelText);
    
    labelText = new LTextField();
    labelText.color = "#4B0082";
    labelText.font = "HG行書体";
    labelText.size = 100;
    labelText.x = 450;
    labelText.y = 60;
    labelText.stroke = true;
    labelText.lineWidth = 4;
    labelText.text = "箱";
    self.addChild(labelText);
    
    labelText = new LTextField();
    labelText.rotate = 20;
    labelText.color = "#4B0082";
    labelText.font = "HG行書体";
    labelText.size = 100;
    labelText.x = 600;
    labelText.y = 60;
    labelText.stroke = true;
    labelText.lineWidth = 4;
    labelText.text = "子";
    self.addChild(labelText);
    
    labelText = new LTextField();
    labelText.color = "#B22222";
    labelText.font = "HG行書体";
    labelText.size = 40;
    labelText.x = 100;
    labelText.y = 250;
    labelText.stroke = true;
    labelText.lineWidth = 4;
    labelText.text = "Click to Start Game !!";
    self.addChild(labelText);
    
    var social = new Social();
    social.x = 220;
    social.y = 330;
    self.addChild(social);
    
    labelText = new LTextField();
    labelText.font = "HG行書体";
    labelText.size = 14;
    labelText.x = 400;
    labelText.y = 390;
    labelText.text = "- Html5 Game Engine lufylegend.js";
    self.addChild(labelText);
    labelText = new LTextField();
    labelText.color = "#006400";
    labelText.font = "HG行書体";
    labelText.size = 14;
    labelText.x = 400;
    labelText.y = 410;
    labelText.text = "http://www.lufylegend.com/lufylegend";
    self.addChild(labelText);
    
    self.addEventListener(LMouseEvent.MOUSE_UP,menuShow);
    

    };

固然展现几张图片,以及足够一些文字,LTextField对象的应用格局请参见官方API文书档案。

 

 

五,建三个摘取画面

如下。

 

葡京娱乐场官网 6

图5

代码如下。

 

 

[javascript] view
plain
copyprint?

  1. function GameMenu(){  
  2.     base(this,LSprite,[]);  
  3.     var self = this;  
  4.       
  5.     var menuLayer;  
  6.     menuLayer = new LSprite();  
  7.     menuLayer.graphics.drawRect(6,”#ADD8E6″,[0,0,LGlobal.width,LGlobal.height],true,”#E6E6FA”);  
  8.     self.addChild(menuLayer);  
  9.       
  10.     labelText = new LTextField();  
  11.     labelText.color = “#B22222”;  
  12.     labelText.font = “HG行書体”;  
  13.     labelText.size = 40;  
  14.     labelText.x = 200;  
  15.     labelText.y = 30;  
  16.     labelText.stroke = true;  
  17.     labelText.lineWidth = 4;  
  18.     labelText.text = “Please select !!”;  
  19.     menuLayer.addChild(labelText);  
  20.     for(var i=0;i<stageMenu.length;i++){  
  21.         self.stageVsMenu(stageMenu[i]);  
  22.     }  
  23. };  
  24. GameMenu.prototype.stageVsMenu = function(obj){  
  25.     var self = this;  
  26.       
  27.     var menuButton,btn_up;  
  28.     if(obj.open){  
  29.         btn_up = new LSprite();  
  30.         btn_up.graphics.drawRect(2,”#000″,[0,0,150,90],true,”#191970″);  
  31.         labelText = new LTextField();  
  32.         labelText.color = “#ffffff”;  
  33.         labelText.font = “HG行書体”;  
  34.         labelText.size = 20;  
  35.         labelText.x = 40;  
  36.         labelText.y = 5;  
  37.         btn_up.addChild(labelText)  
  38.         labelText.text = “第”+(obj.index+1)+”关”;  
  39.           
  40.         labelText = new LTextField();  
  41.         labelText.color = “#ffffff”;  
  42.         labelText.font = “HG行書体”;  
  43.         labelText.size = 12;  
  44.         labelText.x = 10;  
  45.         labelText.y = 40;  
  46.         btn_up.addChild(labelText)  
  47.         labelText.text = “step:”+obj.step;  
  48.         labelText = new LTextField();  
  49.         labelText.color = “#ffffff”;  
  50.         labelText.font = “HG行書体”;  
  51.         labelText.size = 12;  
  52.         labelText.x = 10;  
  53.         labelText.y = 60;  
  54.         btn_up.addChild(labelText)  
  55.         labelText.text = “times:”+obj.times;  
  56.           
  57.           
  58.         var btn_down = new LSprite();  
  59.         btn_down.graphics.drawRect(2,”#000″,[0,0,150,90],true,”#2F4F4F”);  
  60.         labelText = new LTextField();  
  61.         labelText.color = “#ffffff”;  
  62.         labelText.font = “HG行書体”;  
  63.         labelText.size = 20;  
  64.         labelText.x = 40;  
  65.         labelText.y = 5;  
  66.         labelText.text = “第”+(obj.index+1)+”关”;  
  67.         btn_down.addChild(labelText);  
  68.           
  69.         labelText = new LTextField();  
  70.         labelText.color = “#ffffff”;  
  71.         labelText.font = “HG行書体”;  
  72.         labelText.size = 12;  
  73.         labelText.x = 10;  
  74.         labelText.y = 40;  
  75.         btn_down.addChild(labelText)  
  76.         labelText.text = “step:”+obj.step;  
  77.         labelText = new LTextField();  
  78.         labelText.color = “#ffffff”;  
  79.         labelText.font = “HG行書体”;  
  80.         labelText.size = 12;  
  81.         labelText.x = 10;  
  82.         labelText.y = 60;  
  83.         btn_down.addChild(labelText)  
  84.         labelText.text = “times:”+obj.times;  
  85.           
  86.         menuButton = new LButton(btn_up,btn_down);  
  87.         menuButton.obj = obj;  
  88.         menuButton.addEventListener(LMouseEvent.MOUSE_UP,function(event,self){  
  89.             gameStart(self.obj.index);  
  90.         });  
  91.     }else{  
  92.         btn_up = new LSprite();  
  93.         btn_up.graphics.drawRect(2,”#000″,[0,0,150,90],true,”#708090″);  
  94.         labelText = new LTextField();  
  95.         labelText.color = “#ffffff”;  
  96.         labelText.font = “HG行書体”;  
  97.         labelText.size = 20;  
  98.         labelText.x = 40;  
  99.         labelText.y = 5;  
  100.         btn_up.addChild(labelText)  
  101.         labelText.text = “???”;  
  102.         menuButton = btn_up;  
  103.     };  
  104.     self.addChild(menuButton);  
  105.     menuButton.x = obj.x * 220 + 100;   
  106.     menuButton.y = obj.y * 140 + 130;  
  107. }  

    function GameMenu(){
    base(this,LSprite,[]);
    var self = this;

    var menuLayer;
    menuLayer = new LSprite();
    menuLayer.graphics.drawRect(6,”#ADD8E6″,[0,0,LGlobal.width,LGlobal.height],true,”#E6E6FA”);
    self.addChild(menuLayer);

    labelText = new LTextField();
    labelText.color = “#B22222”;
    labelText.font = “HG行書体”;
    labelText.size = 40;
    labelText.x = 200;
    labelText.y = 30;
    labelText.stroke = true;
    labelText.lineWidth = 4;
    labelText.text = “Please select !!”;
    menuLayer.addChild(labelText);
    for(var i=0;i

       self.stageVsMenu(stageMenu[i]);
    

    }
    };
    GameMenu.prototype.stageVsMenu = function(obj){
    var self = this;

    var menuButton,btn_up;
    if(obj.open){

       btn_up = new LSprite();
       btn_up.graphics.drawRect(2,"#000",[0,0,150,90],true,"#191970");
       labelText = new LTextField();
       labelText.color = "#ffffff";
       labelText.font = "HG行書体";
       labelText.size = 20;
       labelText.x = 40;
       labelText.y = 5;
       btn_up.addChild(labelText)
       labelText.text = "第"+(obj.index+1)+"关";
    
       labelText = new LTextField();
       labelText.color = "#ffffff";
       labelText.font = "HG行書体";
       labelText.size = 12;
       labelText.x = 10;
       labelText.y = 40;
       btn_up.addChild(labelText)
       labelText.text = "step:"+obj.step;
       labelText = new LTextField();
       labelText.color = "#ffffff";
       labelText.font = "HG行書体";
       labelText.size = 12;
       labelText.x = 10;
       labelText.y = 60;
       btn_up.addChild(labelText)
       labelText.text = "times:"+obj.times;
    
        var btn_down = new LSprite();
        btn_down.graphics.drawRect(2,"#000",[0,0,150,90],true,"#2F4F4F");
        labelText = new LTextField();
        labelText.color = "#ffffff";
        labelText.font = "HG行書体";
        labelText.size = 20;
        labelText.x = 40;
        labelText.y = 5;
        labelText.text = "第"+(obj.index+1)+"关";
        btn_down.addChild(labelText);

        labelText = new LTextField();
        labelText.color = "#ffffff";
        labelText.font = "HG行書体";
        labelText.size = 12;
        labelText.x = 10;
        labelText.y = 40;
        btn_down.addChild(labelText)
        labelText.text = "step:"+obj.step;
        labelText = new LTextField();
        labelText.color = "#ffffff";
        labelText.font = "HG行書体";
        labelText.size = 12;
        labelText.x = 10;
        labelText.y = 60;
        btn_down.addChild(labelText)
        labelText.text = "times:"+obj.times;

        menuButton = new LButton(btn_up,btn_down);
        menuButton.obj = obj;
        menuButton.addEventListener(LMouseEvent.MOUSE_UP,function(event,self){
            gameStart(self.obj.index);
        });
    }else{
        btn_up = new LSprite();
        btn_up.graphics.drawRect(2,"#000",[0,0,150,90],true,"#708090");
        labelText = new LTextField();
        labelText.color = "#ffffff";
        labelText.font = "HG行書体";
        labelText.size = 20;
        labelText.x = 40;
        labelText.y = 5;
        btn_up.addChild(labelText)
        labelText.text = "???";
        menuButton = btn_up;
    };
    self.addChild(menuButton);
    menuButton.x = obj.x * 220 + 100; 
    menuButton.y = obj.y * 140 + 130;
}

好了,游戏首要的代码已经都贴出来了。

 

那是本人用新型版lufylegend.js引擎开采的,想挑战一下的相恋的人,能够点击上边包车型大巴游戏链接试一下和好能透过几关。

源码

出于位置的代码相比零碎,而且小编也只是挑主旨部分说了一晃,上面提供完整游戏源代码,想商讨一下的爱侣能够点击上面包车型客车连接下载。

 

http://lufy.netne.net/lufylegend_download/box.rar

 

细心:该附属类小部件只含有此番小说源码,lufylegend.js引擎请到http://lufylegend.com/lufylegend实行下载。

 

转发请注解:转自lufy_legend的博客

 

接待继续关切笔者的博客

http://blog.csdn.net/lufy_legend

http://lufylegend.com/demo/box

玩耍一共6关,作者在玩耍里进入了排行系统,每过一关能够上传自身的大成,跟我们比拼一下,或然你也能够将和睦的合格方法心得等回复到小说上边。

 

制作起来

好了,废话说完了,将来来看望哪些来制作那款游戏。

一,首先,你须要下载lufylegend.js引擎

下边是本身在博客的lufylegend-1.6.0发表帖

http://blog.csdn.net/lufy\_legend/article/details/8593968

 

上边一步步来进入支付正题。

二,绘制背景和箱子

大家先来准备一张图,

葡京娱乐场官网 7

图2

要是大家将下面的图平均分割成5份,那么她们的序号分别为0,1,2,3,4。

我们利用方面5个小图片就足以凑合任性的房间以及房间内箱子的布阵。

比如,笔者博客一伊始的言传身教图1,它是玩玩首先关的截图,要绘制这一个房间,首先要领悟这一个图片应该摆放的地方,大家事先计划一个数组。

[javascript]  

var stage01 = [  

[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],  

[-1,-1, 1, 1, 1, 1, 1, 1,-1,-1,-1],  

[-1,-1, 1, 0, 0, 0, 0, 1, 1,-1,-1],  

[-1,-1, 1, 0, 0, 4, 0, 0, 1,-1,-1],  

[-1,-1, 1, 4, 4, 0, 4, 4, 1,-1,-1],  

[-1,-1, 1, 0, 0, 4, 0, 0, 1,-1,-1],  

[-1,-1, 1, 1, 0, 0, 0, 0, 1,-1,-1],  

[-1,-1,-1, 1, 1, 1, 1, 1, 1,-1,-1],  

[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]  

];  

地点的-1意味不布署,然后0,1,4等个别对应着图第22中学的序号。

遵从那一个数组来绘制房间就归纳了,看上边包车型客车函数

[javascript]  

function drawFloor(x,y){  

    if(list[y][x] < 0)return;  

    var bitmap = new LBitmap(bitmapDataList[list[y][x]]);  

    bitmap.x = x*STEP;  

    bitmap.y = y*STEP;  

    boxLayer.addChild(bitmap);  

}  

其一list数组就是下面的stage01数组,参数x,y分别是数组的列和行的序号,STEP是各类小图片的长短,绘制一个小图块,其实本身正是确立了一个LBitmap对象。

有关LPepsi-Cola,LBitmap等对象是lufylegend.js引擎中很常用的靶子,关于它们的用法,请大家参考官方的API文书档案,恐怕看本人此前的部分篇章来打听一下,这里不加赘述了。

自然,一开首,房间里要有箱子,箱子一起头的岗位也是须求事先安装好的,大家一致创设贰个数组。

[javascript 

var box01 = [  

{x:3,y:3},  

{x:4,y:3},  

{x:5,y:3},  

{x:5,y:5},  

{x:6,y:5},  

{x:7,y:5}  

];  

绘制箱子的函数如下

[javascript]  

function drawBox(){  

    var bitmap;  

    for(var i=0;i<boxList[stageIndex].length;i++){  

        bitmap = new LBitmap(bitmapDataList[2]);  

        bitmap.x = boxList[stageIndex][i].x*STEP;  

        bitmap.y = boxList[stageIndex][i].y*STEP;  

        boxLayer.addChild(bitmap);  

        nowBoxList.push(bitmap);  

    }  

}  

地点,笔者同样接纳LBitmap对象来展现那个箱子,now博克斯List数组用来积累那个曾经加载到歌手圈面上的箱子对象,之后用来决断游戏过关。

因为stage01数组中的4就象征箱子供给还原的地点,所以在认清游戏是或不是合格的时候,只须求看清下这一个地点是或不是与富有箱子的职位重合,判定方法如下。

[javascript]  

function checkBox(){  

    var bitmap,x,y,win=true;  

    list = [];  

    for(var i=0;i<stageList[stageIndex].length;i++){  

        list.push(stageList[stageIndex][i].join(“,”).split(“,”));  

    }  

      

    for(var i=0;i<nowBoxList.length;i++){  

        bitmap = nowBoxList[i];  

        x = bitmap.x / STEP;  

        y = bitmap.y / STEP;  

        if(list[y][x] == 4){  

            bitmap.bitmapData = bitmapDataList[3];  

        }else{  

            bitmap.bitmapData = bitmapDataList[2];  

            win = false;  

        }  

        list[y][x] += 10;  

    }  

    if(win)gameClearShow();  

}  

代码小编是直接从程序中截取的,所以出现了些新的数组和指标。

stageList积攒了具备的卡子音讯,stageIndex是日前关卡的序号,stageList[stageIndex]就可以赢妥贴前关卡的音讯,bitmapDataList数组积攒了图第11中学小图片的LBitmapData对象,这几个一时不说,关键是下面。

[javascript] 

if(list[y][x] == 4){  

    bitmap.bitmapData = bitmapDataList[3];  

}else{  

    bitmap.bitmapData = bitmapDataList[2];  

    win = false;  

}  

函数中循环了具备箱子的职分,假设她们的职责的序号为4,则代表该箱子已经归位,全部归位表示过关,不然游戏继续,重返false。

三,主人公登台,拉动箱子。

一律希图一张图纸,如下

葡京娱乐场官网 8

图3

人物走动动画,当然就需求lufylegend引擎中另多个最重要的靶子LAnimation,它特别用来所有人家播放图片以多变动画,具体用法请参照官方API文书档案。

上边是主人的构造器

[javascript] 

/** 

 * 循环事件  

 * @param data 图片数据 

 * @param row 图片分割行数 

 * @param col 图片分割列数 

 **/  

function Character(data,row,col){  

    base(this,LSprite,[]);  

    var self = this;  

    //设定人物动作速度  

    self.speed = 2;  

    self.speedIndex = 0;  

    //设定人物大小  

    data.setProperties(0,0,data.image.width/col,data.image.height/row);
 

    //获得人物图片拆分数组  

    var list =
LGlobal.divideCoordinate(data.image.width,data.image.height,row,col);  

    //设定人物动画  

    self.anime = new LAnimation(this,data,list);  

    //设定不运动  

    self.move = false;  

    //在三个平移步长中的移动次数设定  

    self.moveIndex = 0;  

};  

东道主怎么着促进箱子,看下边包车型大巴onmove函数

[javascript]  

/** 

 * 开首活动  

 **/  

Character.prototype.onmove = function (){  

    var self = this;  

    //设定一个平移步长中的移动次数  

    var ml_cnt = 4;  

    //总括三遍活动的尺寸  

    var ml = STEP/ml_cnt;  

    //依据活动方向,初阶活动  

    switch (self.direction){  

        case UP:  

            self.y -= ml;  

            if(box)box.y -= ml;  

            break;  

        case LEFT:  

            self.x -= ml;  

            if(box)box.x -= ml;  

            break;  

        case RIGHT:  

            self.x += ml;  

            if(box)box.x += ml;  

            break;  

        case DOWN:  

            self.y += ml;  

            if(box)box.y += ml;  

            break;  

    }  

    self.moveIndex++;  

    //当移动次数等于设定的次数,先河判定是不是继续移动  

    if(self.moveIndex >= ml_cnt){  

        self.moveIndex = 0;  

        box = null;  

        self.move = false;  

        checkBox();  

    }  

};  

能够旁观,箱子是还是不是随着主人一齐走,关键是要看box那一个变量,那几个变量的值是在上面包车型大巴checkRoad函数中装置的。

[javascript] 

Character.prototype.checkRoad = function (dir){  

    var self = this;  

    var tox,toy;  

    //开首企图移动目的地的坐标  

    switch (dir){  

        case UP:  

            tox = 0;  

            toy = -1;  

            break;  

        case LEFT:  

            tox = -1;  

            toy = 0;  

            break;  

        case RIGHT:  

            tox = 1;  

            toy = 0;  

            break;  

        case DOWN:  

            tox = 0;  

            toy = 1;  

            break;  

    }  

    if(list[self.y/STEP + toy][self.x/STEP + tox]==1)return false;  

    if(list[self.y/STEP + toy][self.x/STEP + tox]>4){  

        if(list[self.y/STEP + toy*2][self.x/STEP + tox*2]==1 ||
list[self.y/STEP + toy*2][self.x/STEP + tox*2]>4)return false;
 

        box = getBox(self.x + tox*STEP,self.y + toy*STEP);  

    }  

    return true;  

};  

骨子里,正是判别一下主人公要走的主旋律的前线是或不是有障碍物,假如障碍物是墙则不可移动,假设是箱子的话,将在看看箱子的末端是还是不是有障碍物,假若有则不行移动,不然箱子就必要随着主人一同运动,将box设置为主人前方的箱子就能够。

上边这几个函数,是在人物将在发生位移的时候被调用的,如下。

[javascript] 

/** 

 * 更改人物方向,并剖断是不是可活动 

 **/  

Character.prototype.changeDir = function (dir){  

    var self = this;  

    if(self.move)return;  

    self.direction = dir;  

    self.anime.setAction(dir);  

    if(!self.checkRoad(dir))return;  

    self.move = true;  

    steps.text = parseInt(steps.text) + 1;  

};  

当图1中的方向Logo被按下的时候,依照点击的可行性,来落到实处人物的位移。

点击方向Logo的艺术自然是鼠标事件

[javascript]  

ctrlLayer.addEventListener(LMouseEvent.MOUSE_UP,onCtrl);  

下一场在onCtrl函数中根据点击的任务,来拓展对应的移位。

[javascript]  

function onCtrl(event){  

    var ctrlSize = 60;  

    if(event.selfX >= ctrlSize && event.selfX <= ctrlSize*2){  

        if(event.selfY >= 0 && event.selfY <= ctrlSize){  

            player.changeDir(UP);  

        }else if(event.selfY >= ctrlSize*2 && event.selfY <=
ctrlSize*3){  

            player.changeDir(DOWN);  

        }  

    }else if(event.selfY >= ctrlSize && event.selfY <=
ctrlSize*2){  

        if(event.selfX >= 0 && event.selfX <= ctrlSize){  

            player.changeDir(LEFT);  

        }else if(event.selfX >= ctrlSize*2 && event.selfX <=
ctrlSize*3){  

            player.changeDir(RIGHT);  

        }  

    }  

}  

诸如此类,游戏的第一职能部分,就介绍完了。

四,建三个从头画面

如下。

葡京娱乐场官网 9

图4

选用lufylegend.js引擎做个分界面,能够说绝轻巧度,代码如下。

[javascript]  

function GameLogo(){  

    base(this,LSprite,[]);  

    var self = this;  

      

    var logolist = [[1,1,1,1],[1,2,4,1],[1,4,2,1],[1,1,1,1]];
 

    var bitmap,logoLayer;  

      

    logoLayer = new LSprite();  

   
logoLayer.graphics.drawRect(6,”#FF7F50″,[0,0,LGlobal.width,LGlobal.height],true,”#FFDAB9″);
 

    self.addChild(logoLayer);  

      

葡京娱乐场官网,    logoLayer = new LSprite();  

    logoLayer.x = 50;  

    logoLayer.y = 50;  

    for(var i=0;i<logolist.length;i++){  

        for(var j=0;j<logolist.length;j++){  

            bitmap = new LBitmap(bitmapDataList[logolist[i][j]]);
 

            bitmap.x = j*STEP;  

            bitmap.y = i*STEP;  

            logoLayer.addChild(bitmap);  

        }  

    }  

    bitmap = new LBitmap(new
LBitmapData(imglist[“player”],0,0,STEP,STEP));  

    bitmap.x = STEP;  

    bitmap.y = 2*STEP;  

    logoLayer.addChild(bitmap);  

    self.addChild(logoLayer);  

      

    labelText = new LTextField();  

    labelText.rotate = -20;  

    labelText.color = “#4B0082”;  

    labelText.font = “HG行書体”;  

    labelText.size = 100;  

    labelText.x = 300;  

    labelText.y = 50;  

    labelText.stroke = true;  

    labelText.lineWidth = 4;  

    labelText.text = “推”;  

    self.addChild(labelText);  

      

    labelText = new LTextField();  

    labelText.color = “#4B0082”;  

    labelText.font = “HG行書体”;  

    labelText.size = 100;  

    labelText.x = 450;  

    labelText.y = 60;  

    labelText.stroke = true;  

    labelText.lineWidth = 4;  

    labelText.text = “箱”;  

    self.addChild(labelText);  

      

    labelText = new LTextField();  

    labelText.rotate = 20;  

    labelText.color = “#4B0082”;  

    labelText.font = “HG行書体”;  

    labelText.size = 100;  

    labelText.x = 600;  

    labelText.y = 60;  

    labelText.stroke = true;  

    labelText.lineWidth = 4;  

    labelText.text = “子”;  

    self.addChild(labelText);  

      

    labelText = new LTextField();  

    labelText.color = “#B22222”;  

    labelText.font = “HG行書体”;  

    labelText.size = 40;  

    labelText.x = 100;  

    labelText.y = 250;  

    labelText.stroke = true;  

    labelText.lineWidth = 4;  

    labelText.text = “Click to Start Game !!”;  

    self.addChild(labelText);  

      

    var social = new Social();  

    social.x = 220;  

    social.y = 330;  

    self.addChild(social);  

      

    labelText = new LTextField();  

    labelText.font = “HG行書体”;  

    labelText.size = 14;  

    labelText.x = 400;  

    labelText.y = 390;  

    labelText.text = “- Html5 Game Engine lufylegend.js”;  

    self.addChild(labelText);  

    labelText = new LTextField();  

    labelText.color = “#006400”;  

    labelText.font = “HG行書体”;  

    labelText.size = 14;  

    labelText.x = 400;  

    labelText.y = 410;  

    labelText.text = “http://www.lufylegend.com/lufylegend“;  

    self.addChild(labelText);  

      

    self.addEventListener(LMouseEvent.MOUSE_UP,menuShow);  

};  

固然突显几张图纸,以及丰硕一些文字,LTextField对象的施用格局请参见官方API文书档案。

五,建贰个选项画面

如下。

葡京娱乐场官网 10

图5

代码如下。

[javascript] 

function GameMenu(){  

    base(this,LSprite,[]);  

    var self = this;  

      

    var menuLayer;  

    menuLayer = new LSprite();  

   
menuLayer.graphics.drawRect(6,”#ADD8E6″,[0,0,LGlobal.width,LGlobal.height],true,”#E6E6FA”);
 

    self.addChild(menuLayer);  

      

    labelText = new LTextField();  

    labelText.color = “#B22222”;  

    labelText.font = “HG行書体”;  

    labelText.size = 40;  

    labelText.x = 200;  

    labelText.y = 30;  

    labelText.stroke = true;  

    labelText.lineWidth = 4;  

    labelText.text = “Please select !!”;  

    menuLayer.addChild(labelText);  

    for(var i=0;i<stageMenu.length;i++){  

        self.stageVsMenu(stageMenu[i]);  

    }  

};  

GameMenu.prototype.stageVsMenu = function(obj){  

    var self = this;  

      

    var menuButton,btn_up;  

    if(obj.open){  

        btn_up = new LSprite();  

       
btn_up.graphics.drawRect(2,”#000″,[0,0,150,90],true,”#191970″);  

        labelText = new LTextField();  

        labelText.color = “#ffffff”;  

        labelText.font = “HG行書体”;  

        labelText.size = 20;  

        labelText.x = 40;  

        labelText.y = 5;  

        btn_up.addChild(labelText)  

        labelText.text = “第”+(obj.index+1)+”关”;  

          

        labelText = new LTextField();  

        labelText.color = “#ffffff”;  

        labelText.font = “HG行書体”;  

        labelText.size = 12;  

        labelText.x = 10;  

        labelText.y = 40;  

        btn_up.addChild(labelText)  

        labelText.text = “step:”+obj.step;  

        labelText = new LTextField();  

        labelText.color = “#ffffff”;  

        labelText.font = “HG行書体”;  

        labelText.size = 12;  

        labelText.x = 10;  

        labelText.y = 60;  

        btn_up.addChild(labelText)  

        labelText.text = “times:”+obj.times;  

          

          

        var btn_down = new LSprite();  

       
btn_down.graphics.drawRect(2,”#000″,[0,0,150,90],true,”#2F4F4F”);  

        labelText = new LTextField();  

        labelText.color = “#ffffff”;  

        labelText.font = “HG行書体”;  

        labelText.size = 20;  

        labelText.x = 40;  

        labelText.y = 5;  

        labelText.text = “第”+(obj.index+1)+”关”;  

        btn_down.addChild(labelText);  

          

        labelText = new LTextField();  

        labelText.color = “#ffffff”;  

        labelText.font = “HG行書体”;  

        labelText.size = 12;  

        labelText.x = 10;  

        labelText.y = 40;  

        btn_down.addChild(labelText)  

        labelText.text = “step:”+obj.step;  

        labelText = new LTextField();  

        labelText.color = “#ffffff”;  

        labelText.font = “HG行書体”;  

        labelText.size = 12;  

        labelText.x = 10;  

        labelText.y = 60;  

        btn_down.addChild(labelText)  

        labelText.text = “times:”+obj.times;  

          

        menuButton = new LButton(btn_up,btn_down);  

        menuButton.obj = obj;  

       
menuButton.addEventListener(LMouseEvent.MOUSE_UP,function(event,self){
 

            gameStart(self.obj.index);  

        });  

    }else{  

        btn_up = new LSprite();  

       
btn_up.graphics.drawRect(2,”#000″,[0,0,150,90],true,”#708090″);  

        labelText = new LTextField();  

        labelText.color = “#ffffff”;  

        labelText.font = “HG行書体”;  

        labelText.size = 20;  

        labelText.x = 40;  

        labelText.y = 5;  

        btn_up.addChild(labelText)  

        labelText.text = “???”;  

        menuButton = btn_up;  

    };  

    self.addChild(menuButton);  

    menuButton.x = obj.x * 220 + 100;   

    menuButton.y = obj.y * 140 + 130;  

}  

 

好了,游戏主要的代码已经都贴出来了。

 

http://www.bkjia.com/HTML5/477142.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/477142.htmlTechArticle开言:
lufylegend.js引擎已经更新到1.6之上了,纵然笔者时断时续公布了一些课程,也提供了部分粗略的游乐示例,但是一直以来也从没创建三款…