html5游戏开发-零基础开发《圣诞老人送礼物》小游戏

2013-6-3 15:00| 发布者: 红黑魂| 查看: 4323| 评论: 0|来自: CSDN博客

摘要: 原文：PHP Best Practices-A short, practical guide for common and confusing PHP tasks译者：youngsterxyf最后修订日期维护者本文档最后审阅于2013年3月8日。最后修改于2013年5月8日。由我，Alex Cabal，维护该文 ...

以上代码都添加了注释，很容易看懂。有几个引擎中的类的用法提一下，LSprite用法：

------------------------------------------------------------------------------

LSprite()

■作用：

LSprite 类是基本显示列表构造块，一个可显示图形并且也可包含子项的显示列表节点。

■可用属性：

type:类型

x:坐标x

y:坐标y

scaleX:X坐标方向上的缩放比例

scaleY:Y坐标方向上的缩放比例

alpha:透明度

rotate:旋转角度

visible:是否可见，当设为false的时候，该LBitmap对象不可视，且内部所有处理都将停止

childList:该对象的所有子项

graphics:指定属于此 LSprite 的 LGraphics 对象，在此 LSprite 中可执行矢量绘图命令。

box2dBody:结合box2dweb后，创建的body2d

mask:遮罩

filters:光晕效果，具体可参照LDropShadowFilter类的介绍

------------------------------------------------------------------------------

addEventListener的用法：

------------------------------------------------------------------------------

addEventListener(type,listener)

■作用：

注册事件侦听器对象，以使侦听器能够接收事件通知。

■参数：

type：事件的类型。

listener：处理事件的侦听器函数。

------------------------------------------------------------------------------

在加载函数中，我调用了addLogo，它是用来显示开场界面的。由于游戏本身很简单，所以要加一个很绚丽的开场界面。

addLogo的代码如下：

[javascript]view plaincopy
var logoText;  
var startBtn;  
function addLogo(){  
    //加入背景  
    var bitmapData = new LBitmapData(imglist["logoback"],0,0,1024,768);  
    var bitmap = new LBitmap(bitmapData);  
    bitmap.scaleX = 0.6;  
    bitmap.scaleY = 0.6;  
    logoLayer.addChild(bitmap);  
    //加入文字  
    addLogoText();  
}  

在其中我给背景添上图片，用到了LBitmapData和LBitmap。用法很多，大家可以自己去API里看看。这里就先不多说了。

addLogoText里的代码：

[javascript]view plaincopy
function addLogoText(){  
    //大标题  
    logoText = new LTextField();  
    logoText.size = 50;  
    logoText.color = "white";  
    logoText.font = "HG行書体";  
    logoText.text = "Christmas";  
    logoText.stroke = true;  
    logoText.lineWidth = 2;  
    logoText.x = 50;  
    logoText.y = 20;  
    logoLayer.addChild(logoText);  
    //加入滤镜效果  
    var titleShadow = new LDropShadowFilter(5,45,"red");  
    for(var i=0;i<2;i++){  
        logoText.filters = [titleShadow];  
        logoLayer.addChild(logoText);  
    }  
    //开始指示  
    logoText = new LTextField();  
    logoText.size = 30;  
    logoText.color = "white";  
    logoText.font = "HG行書体";  
    logoText.text = "Tap to Start Game";  
    logoText.x = 150;  
    logoText.y = 190;  
    logoLayer.addChild(logoText);  
    //加入开始游戏事件  
    logoLayer.addEventListener(LMouseEvent.MOUSE_UP,startGame);  
    //加入滤镜效果  
    var shadow = new LDropShadowFilter(5,45,"black",0);  
    logoText.filters = [shadow];  
}  

界面运行出来后，得到了一个静态的结果，游戏嘛就得富有动态，于是我做了一个下雪效果。它在onframe函数中，也就是我们说的时间轴事件中：

[javascript]view plaincopy
if(canSnowing == true){  
    //加入雪花  
    addSnow();  
}  

接着看addSnow函数：

[javascript]view plaincopy
function addSnow(){  
    snowLayer.graphics.clear();  
    var snowx = Math.random()*(LStage.width-10)+10;  
    var n = snowChildList.length;  
    while(n--){  
        var s = snowChildList[n];  
        s.y += s.s;  
        snowLayer.graphics.drawArc(2,"white",[s.x,s.y,2,0,2*Math.PI],true,"white");  
    }  
    snowChildList.push({x:snowx,y:0,s:10});  
}  

它实现的方法在上一篇文章中提到过，可以看看，这里就不多讲了：

如何制作一款HTML5 RPG游戏引擎——第二篇，烟雨+飞雪效果

http://blog.csdn.net/yorhomwang/article/details/8915020

运行代码得到一个相当酷的界面，大家可以看一下：

光有界面也不能叫游戏，接下来就是游戏主体部分。

我们先前提到过类，现在就来用类实战一下。首先来看charactor人物类：

[javascript]view plaincopy
function Charactor(data){  
    base(this,LSprite,[]);  
    //设定x和y坐标  
    this.x = 0;  
    this.y = 0;  
    //设定模式  
    this.mode = "right";  
    this.speed = 5;  
    //加入图片  
    this.data = data;  
    var list = LGlobal.divideCoordinate(227,158,1,1);  
    var bitmapdata = new LBitmapData(imglist[this.data]);  
    //加入动画  
    this.anima = new LAnimation(this,bitmapdata,list);  
    this.anima.setAction(0,1,0,false);  
}  

其中有一个LAnimation方法，它是lufylegend中播放动画的类，使用说明如下：

------------------------------------------------------------------------------

LAnimation(layer,data,list)

■作用：

实现简单动画的播放，原理是将一张大的图片，按照保存有坐标的二维数组保存的坐标来逐个显示。

■参数：

layer：LSprite显示层

data：LBitmapData对象

list：一个存有坐标的2维数组

■详细说明：

LAnimation类实现简单动画的播放,用于制作人物行走等效果非常方便

■可用属性：

layer:动画显示时，LAnimation的父级层

data:LBitmapData对象

list:坐标数组。

------------------------------------------------------------------------------
其他的就很容易懂了，Charactor类有个move方法，用于人物移动，如下：

[javascript]view plaincopy
Charactor.prototype.move = function(){  
    //当向右飞行时  
    if(this.mode == "right" && this.x < LStage.width-149){  
        this.anima.setAction(0,1,0,false);  
        this.x += this.speed;  
    }else{  
        this.mode = "left";  
    }  
    //当向左飞行时  
    if(this.mode == "left" && this.x > 0){  
        this.anima.setAction(0,1,0,true);  
        this.x -= this.speed;  
    }else{  
        this.mode = "right";  
    }  
}  

这段代码可以使人物移动，将这段代码放在onframe中就可以实现让人物来回移动了。逻辑很简单，大家可以看看。

接着就是实例化人物了。代码如下：

[javascript]view plaincopy
function addChara(){  
    oldMan = new Charactor("player");  
    showChara = true;  
    charaLayer.addChild(oldMan);  
}  

接着是onframe中的代码：

[javascript]view plaincopy
if(showChara == true){  
    //使人物动起来  
    oldMan.move();  
    //改变时间显示  
    timeText.text = "Time:" + showTime;  
    if(time>0){  
        time -= 30000/(30000/50);  
    }else{  
        playerName = getName();  
        gameOver();  
    }  
}  

在这里我门判断时间是否为0，如果为0就游戏结束。当然，这是后话，这里只提一下。

接下来看Stage类，这个很重要，大家一定要认真看哦！

[javascript]view plaincopy
var stageSpeed = 5;  
function Stage(){  
    base(this,LSprite,[]);  
    //取出一个整数，使0<=index<=7成立  
    var index = Math.floor(Math.random()*7);  
    //将index的值取出对应的图片  
    var bitmap = new LBitmap(new LBitmapData(imglist["costume"+index]));  
    //定义礼物的模式  
    this.mode = "";  
    this.addChild(bitmap);  
}  