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

Online preview: http://osgames.duapp.com/apprun.html?appid=osgames1-551421721381542
Online editing: http://osgames.duapp.com/gamebuilder.php ?appid=osgames1-551421721381542
WeChat scan:

Running screenshot:

Ring Set is a very popular game on Huowu, it is a variant of FlappyBird , is also a gravity sensing game. The difference is that the collision detection changes from FlappyBird's steel pipe to a rope in the middle.

This rope is implemented in GameBuilder using UICanvas. UICanvas was introduced in the previous blog GameBuilder Development Game Application Series: 100 Lines of Code Implementation Don’t Step on the White Block.

Because the rope here is drawn, you cannot use Cantk's onBeginContact interface for detecting collisions between rigid bodies. Instead, use the onMoved interface of the ring (rigid body) to detect collision with the rope.

Calculation of the rope

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);};

Drawing of the rope

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();};

Composition of the ring

The ring is composed of two rigid bodies , concentrate one under the UICanvas (the yellow one).

Collision detection

Implement the onMoved event interface of the ring.

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));    }};