准备工作

本游戏使用了html5开源引擎 lufylegend 具体可以查看官网介绍：，以及作者博客：

 

对于游戏展示的内容首先进行规划，在这个游戏内用有2个场景，一个是游戏主题页面，一个是游戏内容页面

1、游戏主题页面：

这个界面包括背景、人物以及开始按钮，因此将它划分为了3个层：

• 背景层：显示游戏背景图片
• 部件层：显示医生小人以及白板logo
• 控件层：显示开始按钮

（当然顺序全部写到一个层内也是可以实现，不过为了方便操作以及调试清晰，这里还是分开了层次存放）

 

2、游戏过程界面：

界面包括黑板背景，计时器，记分器，提示文字以及游戏空间，按照功能分层，分别如下：

 

• 背景层：用于显示游戏背景图片
• 文字提示层：用于显示剩余时间以及答对题目数
• 游戏按钮层：用于显示猜字以及回答按钮 

 

3、初始化游戏窗体

//初始化游戏窗体
init(100,"game",555,320,main);

该语句会于页面上id为game的元素内初始化一个刷新率100（既每秒10帧），宽度555，高度320的canvas，然后执行函数main。

 

4、资源加载

先将需要用到的图片存储到一个数组内，然后循环该数组，将图片加载完后再进行下一步的动作。

//图片path数组
var imgData = new Array();
//读取完的图片数组
var imglist = {};
//读取数组下标
var loadIndex = 0;
function main(){
    //准备读取图片
    //logo
    imgData.push({name:"logoBack",path:"image/BackgroundMenu.png"});
    imgData.push({name:"logoMan",path:"images/GraphicLandingCharacter.png"});
    imgData.push({name:"logoBlackboard",path:"images/GraphicLandingLogoZHS.png"});
    imgData.push({name:"ButtonPlay",path:"images/ButtonPlay.png"});
    imgData.push({name:"ButtonPlayHover",path:"images/ButtonPlayHover.png"});
    //game
    imgData.push({name:"BackgroundPlay",path:"images/BackgroundPlay.png"});
    //result
    imgData.push({name:"BackgroundRestult",path:"images/GraphicResultProjecterWCharacter.png"});
    //实例化进度条层
    loadingLayer = new LSprite();
    loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");
    addChild(loadingLayer);
    //开始读取图片
    loadImage();
}
function loadImage(){
    //图片全部读取完成，开始初始化游戏
    if(loadIndex >= imgData.length){
        removeChild(loadingLayer);
        legendLoadOver();
        gameInit();
        return;
    }
    //开始读取图片
    loader = new LLoader();
    loader.addEventListener(LEvent.COMPLETE,loadComplete);
    loader.load(imgData[loadIndex].path,"bitmapData");
}
function loadComplete(event){
    //进度条显示
    loadingLayer.graphics.clear();
    loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");
    loadingLayer.graphics.drawRect(1,"black",[50, 203, 200*(loadIndex/imgData.length), 14],true,"#000");
    //储存图片数据
    imglist[imgData[loadIndex].name] = loader.content;
    //读取下一张图片
    loadIndex++;
    loadImage();
}

通过loadImage和loadComplete两个方法的不断循环，直到全部图片加载完毕后，执行gameInit函数。

 

5、游戏主题界面初始化

function gameInit(event){
    //游戏层显示初始化
    layerInit();
    //添加背景
    addLogoBack();
    //添加人物
    addLogoChara();
    //添加人物帧事件
    backLayer.addEventListener(LEvent.ENTER_FRAME,function(){logoMan.onframe();});
    //添加开始按钮
    addStartBtn();
}
//游戏层显示初始化
function layerInit(){
    //游戏底层添加
    backLayer = new LSprite();
    addChild(backLayer);
    //背景层添加
    logoBackLayer = new LSprite();
    backLayer.addChild(logoBackLayer);
    //部件层添加
    charaLayer = new LSprite();
    backLayer.addChild(charaLayer);
    //控件层添加
    ctrlLayer = new LSprite();
    backLayer.addChild(ctrlLayer);
}

gameInit函数首先调用layerInit函数初始化标题界面的3个层，背景层、部件层、控件层。 初始完层之后再依次调用：

1. addLogoBack添加背景内容
2. addLogoChara添加人物形象和白板部件
3. addStartBtn添加开始游戏按钮

其中主题人物因为有一个切换的活动效果，所以需要给它添加一个帧事件。

 

6、开始游戏

function addStartBtn() {
    ……略……
    startBtn.addEventListener(LMouseEvent.MOUSE_DOWN,startGame);
    ……略……
}

添加啊开始游戏按钮之后，给按钮对象添加一个监听鼠标点击事件，点击之后执行startGame函数。

//开始游戏
function startGame() {
    //清空场景内容
    backLayer.removeAllChild();
    backLayer.die();

    var bitmapdata,bitmap;

    //游戏背景层
    var playBackLayer = new LSprite();
    bitmapdata = new LBitmapData(imglist["BackgroundPlay"],0,0,555,320);
    bitmap = new LBitmap(bitmapdata);
    playBackLayer.addChild(bitmap);
    backLayer.addChild(playBackLayer);

    //游戏信息提示层
        //提示文字
        labelText = new LTextField();
        labelText.color = "#ffffff";
        labelText.font = "微软雅黑";
        labelText.size = 12;
        labelText.x = 200;
        labelText.y = 60;
        labelText.text = "文字是什么颜色？";
        playTipsLayer.addChild(labelText);
        //正确数
        labelText = new LTextField();
        labelText.color = "#ffffff";
        labelText.font = "微软雅黑";
        labelText.size = 16;
        labelText.x = 400;
        labelText.y = 10;
        labelText.text = "正确：";
        playTipsLayer.addChild(labelText);
        count = new LTextField();
        count.color = "#ffffff";
        count.font = "微软雅黑";
        count.size = 16;
        count.x = 465;
        count.y = 10;
        count.text = "0";
        playTipsLayer.addChild(count);
        
        //时间
        labelText = new LTextField();
        labelText.color = "#ffffff";
        labelText.font = "微软雅黑";
        labelText.size = 16;
        labelText.x = 30;
        labelText.y = 10;
        labelText.text = "时间：";
        playTipsLayer.addChild(labelText);
        times = new LTextField();
        times.color = "#ffffff";
        times.font = "微软雅黑";
        times.size = 16;
        times.x = 95;
        times.y = 10;
        //times.text = _times;
        playTipsLayer.addChild(times);

    //显示问题以及回答按钮
    setAnswerButton();
    
    //帧事件
    _startTime = new Date().getTime();
    backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
}

上面这么一大段内容其实只是在界面上显示了一些文本提示信息，比较重要的内容是setAnswerButton这个函数，设置了问题的文字和回答的选项。

setAnswerButton内容主要是问题生成、选项生成的一些游戏的逻辑内容，这里就不贴上来，具体可以查看源码。

最后，实现一下计时功能和增加一个帧时间就ok了。

 

测试地址

在线地址

打包地址

 

总结：

在手机上见到这个左右脑实验室其中的这个猜色小游戏，见还挺简单就拿来试试手，

主要还是通过这个实例的制作过程，熟悉了解 lufylegend 游戏引擎的基础使用方法，

不足的地方是代码仅是用于学习测试，函数、变量没有进行什么优化，编写的有点随意，

一些过渡界面也没有实现动画效果，看起来较突兀……等再优化一下好了……