The 70-line code implementation ring for GameBuilder game application series and the 70-line gamebuilder70

The 70-line code implementation ring for GameBuilder game application series and the 70-line gamebuilder70

Online Preview: http://osgames.duapp.com/apprun.html? Appid = osgames1-551421721381542
Online Editing: http://osgames.duapp.com/gamebuilder.php? Appid = osgames1-551421721381542
SCAN:

Run:

The ring is a very popular game on the fire dance. It is a variant of FlappyBird and also a gravity sensing game. The difference is that the collision detection is from the FlappyBird steel pipe, it turns into a middle rope.

This rope is implemented using UICanvas in GameBuilder. In the previous blog GameBuilder, UICanvas developed the 100-line code implementation of the game application series. Do not step on the white block.

Because the rope is drawn, the onBeginContact interface of the Cantk rigid body cannot be used to detect the collision. Instead, the onMoved interface of the ring (rigid body) is used to detect the collision with the rope.

Rope Calculation

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

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

Ring Composition

A ring is composed of two rigid bodies, one in 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));    }};