在線預覽: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));
}
};