GameBuilder开发游戏应用系列之60行代码实现FlappyBird

在线演示:http://osgames.duapp.com/apprun.html?appid=osgames1-911422256817006
在线编辑:http://osgames.duapp.com/gamebuilder.php?appid=osgames1-911422256817006
微信扫描:这里写图片描述
运行截图:
这里写图片描述

FlappyBird是2014年爆红的一款游戏,属于经典的重力感应游戏,玩法非常简单同时又非常虐心,正是这样的特点让FlappyBird得以在社交网络病毒式的传播。

GameBuilder集成了Box2d物理引擎,开发这一类的重力感应游戏属于他的看家本领。

用GameBuilder实现的FlppyBird总共只需要60行代码,主要实现了管子在垂直方向上的随机分布(水平方向位置是固定的),当然你可以自己摆管子,那样的话,可能只要10行代码就搞定了。

游戏主要包括两方面:

水平布管

屏幕的虚拟宽度设置为100000像素,只放置上下各四根管子,如下图:
这里写图片描述
小鸟越过(屏幕左边)的管子重新设置到小鸟前面(屏幕右边)。

  • 位置生成函数
win.initPList = function() {
    var x, y;
    for(var i = 0; i < 4; i++) {
        var position = {x:0, y:0};
        x = 480 + i*320;
        y = win.randomY();
        position.x = x;
        position.y = y;
        win.pList.push(position);
    }
};
  • 更新位置列表
win.updatePList = function() {
    var win = this.getWindow();
    var bird = win.find("bird");
    //小鸟越过管子后,播放音效,加分
    if(bird.x > win.nextScoreX) {  
        win.nextScoreX += 320;
        win.find("effects").play("disappear.mp3");
        win.score += 1;
        win.find("score").setText(win.score);
    }
    //最左侧管子移出屏幕外时,将其挪到右边
    if(win.pList[0].x - this.xOffset < - 320) {
        var p = win.pList.shift();
        p.x = win.pList[2].x + 320;
        p.y = win.randomY();
        win.pList.push(p);
    }
};
  • 定时根据位置列表更新管子位置
win.updateBox = function() {
    win.updatePList();
    for(var i = 0; i < 4; i++) {
        win.find("boxup" + i).setPosition(win.pList[i].x, win.pList[i].y);
        win.find("boxdown" + i).setPosition(win.pList[i].x, win.pList[i].y + 850);
    }
    setTimeout(win.updateBox, 50);
};

碰撞检测

在游戏中,小鸟作为一个刚体,在游戏中一直需要保持悬空,一旦有碰撞就视游戏结束,因此只要实现小鸟的onBeginContact事件接口即可。
这里写图片描述
事件代码:

var win = this.getWindow();
if(!win.gameOver) {
    win.gameOver = true; 
    win.find("bird").setV(0, 15);
    win.openWindow("win-result", function(ret) { win.restartGame();}, false, win.score);
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值