欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

http://www.51h5.com/game-index-id-604.html_html/css_WEB-ITnose

程序员文章站 2022-06-08 15:30:18
...
在线预览: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    

绳子的绘制

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

圆环的组成

圆环是有两个刚体组合而成,集中一个在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