GameBuilder开发游戏应用系列之70行代码实现套圆环

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

套圆环是火舞上的一款非常火爆的游戏,它是FlappyBird的变种,也是重力感应类的游戏,不同的是碰撞检测从FlappyBird的钢管,变成中间的一根绳子。

这根绳子在GameBuilder中用UICanvas来实现,UICanvas在之前的博客GameBuilder开发游戏应用系列之100行代码实现别踩白块种有介绍。

这里的绳子因为是画出来的,因此不能用Cantk的刚体之间的检测碰撞借口onBeginContact,而是利用圆环(刚体)的onMoved接口来检测与绳子的碰撞。

绳子的计算

win.onLineMoved = function() {
    if(win.gameStarted === 0) {
        setTimeout(win.onLineMoved, 20);
        return;
    }
    win.points.shift();
    ++win.count;
    ++win.score; 
    if(win.score % 10 === 0)
    win.find("score").setText(win.score * 0.1);
    var oy = win.points[win.points.length - 1];
    if(win.count % 400 === 0) {
        win.factor = win.genFactor();
        win.count = 0;
    }
    var y = oy + win.factor;
    while(y >= 290 || y <= 110) {
        win.factor = win.genFactor();
        y = oy + win.factor;
        win.count = 0;
    }

    win.points.push(y);
    setTimeout(win.onLineMoved, 20);
};

绳子的绘制

win.drawCirclePath = function(ctx){
    var pa = win.points;
    ctx.lineWidth = 20;
    ctx.strokeStyle = 'yellow';
    ctx.moveTo(0, pa[0]);
    for(var i = 1; i < pa.length; i++) {
        ctx.lineTo(i, pa[i]);
    }
    ctx.stroke();
};

圆环的组成

圆环是有两个刚体组合而成,集中一个在UICanvas(黄色那个)下面。
这里写图片描述

碰撞检测

实现圆环的onMoved事件接口。
这里写图片描述

win.onCircleMoved = function(point, element) {
    var y = point.y;
    var x = Math.floor(point.x + element.w);
    if(y + 55 > win.points[x] + 200 || y + element.h - 50 < win.points[x] + 200) {
        win.gameStarted = 0;
        win.find("ui-box").setEnable(false);
        win.find("ui-box-1").setEnable(false);
        win.openWindow("win-result", function() {win.replay(); win.initGame();}, false, Math.floor(win.score * 0.1));
    }
};
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值