您的位置:首页> 日志> 前端技术 正文

准备工作

本游戏使用了html5开源引擎 lufylegend 具体可以查看官网介绍:http://lufylegend.com/lufylegend,以及作者博客:http://blog.csdn.net/lufy_Legend

 

对于游戏展示的内容首先进行规划,在这个游戏内用有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 游戏引擎的基础使用方法,

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

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