GameBuilder游戏开发系列之见缝插针(AA)
2015-03-31 13:45
351 查看
今天介绍一款游戏叫做《AA》,是在最近在IOS上刚刚流行起来的一款游戏,非常虐心但有非常好玩,现在我们讲它在tangide(GameBuilderV2.0)上的利用控件UICanvas实现它。
在线运行:http://www.tangide.com/apprun.html?appid=preview721427350809280
在线编辑:http://www.tangide.com/gamebuilder.php?appid=preview721427350809280
微信上玩可以扫描二维码:
游戏截图:
游戏编辑界面:
从游戏截图可以看到,游戏的画面很简洁!简单的界面配上黑白色的旋转球体,游戏的目的让人一目了然!游戏以闯关形式进行,越到后面的关卡越有种眩晕的感觉,好像高空弹跳!游戏玩法简单,一点就通!最开始的关卡,大球上会挂着小球,你只需把下方带有数字的小球黏在大球上,一直到小球黏完游戏就胜利了!如果你不幸在粘球的过程中碰撞到旁边的球体,那么游戏结束!随着关卡的递进,原本附带的球体会越来越多,你需要粘上的小球也越来越多,这样就导致中间的缝隙越来越小,因此你碰上别的球的几率也越来越高了!喜欢的玩家不妨看看自己能闯多少关。
游戏中有三种球,中间大球,转动球,等待球。
两种数字,大球上的数字表示关卡,小球的数字表示序号,关卡预设的小球没有数字。
initNum:预设球数量
waitNum:等候球数量
speed:转动速率(每20ms转动的角度)。
原版《AA》的关卡已经到了700多关了,可玩性还是非常高的,关卡的设计可以有很多变化,比如:
1、速度上可以快慢变化
2、可以通过暂停转动
3、可以控制转向(顺时针/逆时针)变化
4、限制时间
5、等候球可以有大小伸缩增加插入难度
期待您的创意。
在线运行:http://www.tangide.com/apprun.html?appid=preview721427350809280
在线编辑:http://www.tangide.com/gamebuilder.php?appid=preview721427350809280
微信上玩可以扫描二维码:
游戏截图:
游戏编辑界面:
从游戏截图可以看到,游戏的画面很简洁!简单的界面配上黑白色的旋转球体,游戏的目的让人一目了然!游戏以闯关形式进行,越到后面的关卡越有种眩晕的感觉,好像高空弹跳!游戏玩法简单,一点就通!最开始的关卡,大球上会挂着小球,你只需把下方带有数字的小球黏在大球上,一直到小球黏完游戏就胜利了!如果你不幸在粘球的过程中碰撞到旁边的球体,那么游戏结束!随着关卡的递进,原本附带的球体会越来越多,你需要粘上的小球也越来越多,这样就导致中间的缝隙越来越小,因此你碰上别的球的几率也越来越高了!喜欢的玩家不妨看看自己能闯多少关。
游戏中有三种球,中间大球,转动球,等待球。
curLevel.balls = []; //转动球 curLevel.waitingBalls = []; //等待球
两种数字,大球上的数字表示关卡,小球的数字表示序号,关卡预设的小球没有数字。
小球发射
这里选择场景的onPointerDown事件为发射时机,而不是onClick,因为用户两次快速点击时,会触发onDoubleClick事件,而不是两次onClick。粘黏判断
小球发射之后,等候的球有个整体向上位移动作,当最上的一个等候球移动到与中心球距离一段距离时,则可以判断已粘黏上,此时,要将其移出等候球数组,加入到转动球数组。if(curLevel.waitOffset < 0) { curLevel.waitOffset = 3 * SIDE_BALL_RADIUS; curLevel.inserting = 0; var ball = curLevel.waitingBalls.shift(); ball.angle = 90; ... curLevel.balls.push(ball); }
碰撞检测
检测碰撞的方法:计算插入的球与旁边最近一个球体的绝对角度是否。curLevel.balls.forEach( function(e, index) { if(Math.abs(e.angle - ball.angle) < 360 * SIDE_BALL_RADIUS/ (LINE_LEN*Math.PI)) { curLevel.state = GAME_STATE_FAILED; failBall = ball; failBall.state = 0; failBall.timeCount = 5; } else if(index === curLevel.balls.length - 1 && curLevel.waitingBalls.length === 0) { curLevel.state = GAME_STATE_SUCCESS; } } );
关卡设计
var LEVEL = [ {"initNum":4, "waitNum":8, "speed":360/500}, {"initNum":6, "waitNum":8, "speed":360/500}, {"initNum":2, "waitNum":16, "speed":360/500}, {"initNum":0, "waitNum":24, "speed":360/500}, {"initNum":4, "waitNum":16, "speed":420/500}, {"initNum":3, "waitNum":20, "speed":420/500}, ... ];
initNum:预设球数量
waitNum:等候球数量
speed:转动速率(每20ms转动的角度)。
游戏画面的绘制
背景
根据游戏的状态来选择背景颜色//draw bg var color; switch (curLevel.state) { case GAME_STATE_RUNNING: color = "#EED5B7"; break; case GAME_STATE_SUCCESS: color = "blue"; break; case GAME_STATE_FAILED: color = "red"; break; } ctx.fillStyle = color; ctx.fillRect(canvas.x, canvas.y, canvas.w, canvas.h);
中间大球
ctx.beginPath(); ctx.arc(CENTER.x, CENTER.y, CENTER_BALL_RADIUS, 0, Math.PI * 2, true); ctx.closePath(); ctx.fillStyle = "black"; ctx.fill(); //draw level var txt = (curLevel.level + 1) + ""; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.font = "italic 60px sans-serif"; ctx.strokeStyle = "#EED5B7"; ctx.fillStyle = "#EED5B7"; ctx.fillText(txt, CENTER.x, CENTER.y); ctx.strokeText(txt, CENTER.x, CENTER.y);
转动球
//draw side ball; curLevel.balls.forEach( function(e) { //绘制大球小球之间的线段 ctx.moveTo(CENTER.x, CENTER.y); var rad = 2 * Math.PI * e.angle / 360; var x = CENTER.x + LINE_LEN * Math.cos(rad); var y = CENTER.y + LINE_LEN * Math.sin(rad); ctx.strokeStyle = "black"; ctx.lineTo(x, y); ctx.stroke(); var rad = SIDE_BALL_RADIUS; if(typeof e.state !== "undefined") { //如果游戏失败,改变失败球的半径 switch(e.state) { case 0: rad = 1.5 * SIDE_BALL_RADIUS; break; case 1: rad = 0.8 * SIDE_BALL_RADIUS; break; case 2: rad = 1.2 * SIDE_BALL_RADIUS; break; } } ctx.beginPath(); ctx.arc(x, y, rad, 0, Math.PI * 2, true); ctx.closePath(); ctx.fillStyle = "black"; ctx.fill(); if(e.numStr.length > 0) { ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.font = "italic 15px sans-serif"; ctx.strokeStyle = "#EED5B7"; ctx.fillStyle = "#EED5B7"; ctx.fillText(e.numStr, x, y); ctx.strokeText(e.numStr, x, y); } } );
等候球
//draw waiting balls var x = CENTER.x; var y = CENTER.y + LINE_LEN + curLevel.waitOffset; curLevel.waitingBalls.forEach( function(e) { ctx.moveTo(x, y); ctx.beginPath(); ctx.arc(x, y, SIDE_BALL_RADIUS, 0, Math.PI * 2, true); ctx.closePath(); ctx.fillStyle = "black"; ctx.fill(); ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.font = "italic 15px sans-serif"; ctx.strokeStyle = "#EED5B7"; ctx.fillStyle = "#EED5B7"; ctx.fillText(e.numStr, x, y); ctx.strokeText(e.numStr, x, y); y += 3 * SIDE_BALL_RADIUS; } );
原版《AA》的关卡已经到了700多关了,可玩性还是非常高的,关卡的设计可以有很多变化,比如:
1、速度上可以快慢变化
2、可以通过暂停转动
3、可以控制转向(顺时针/逆时针)变化
4、限制时间
5、等候球可以有大小伸缩增加插入难度
期待您的创意。
注:本系列所介绍的游戏源代码均开放,欢迎访问www.tangide.com体验游戏***的乐趣。
相关文章推荐
- GameBuilder见缝插针游戏开发系列(AA)
- GameBuilder开发游戏应用系列之100行代码实现微信打飞机
- GameBuilder开发游戏应用系列之60行代码实现FlappyBird
- GameBuilder开发游戏应用系列
- GameBuilder开发游戏应用系列之100行代码实现贪吃蛇
- GameBuilder开发游戏应用系列之100行代码实现别踩白块
- GameBuilder开发游戏应用系列之70行代码实现套圆环
- GameBuilder开发游戏应用系列之50行代码实现微信漂流瓶
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(二)让物体动起来②
- 游戏开发技术系列丛书 献给游戏研发的专业人士
- 游戏外挂开发系列--游戏喊话器
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(六)完美移动
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(一)让物体动起来①
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(四)实现2D人物动画①
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(七)传说中的A*寻径算法
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(五)实现2D人物动画②
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(五)实现2D人物动画②
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(三)让物体动起来③
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(二)让物体动起来②
- Silverlight 2.0游戏《抢滩登陆战2D》开发系列开篇