html5 摇杆,新手求小游戏带摇杆的小Demo-Egret社区-技术问答-白鹭引擎-Egret Engine-免费开源HTML5游戏引擎 - Powered by Discuz!...

本帖最后由 Always 于 2016-12-7 11:28 编辑

[mw_shl_code=actionscript3,true]private RockerBall: egret.Bitmap;//圆球

private origin: egret.Point;//圆球初始位置

private radius: number = 180;//半径,限制圆球的移动范围

private offset: egret.Point;//位移

private LeftArea: egret.Shape;//圆所在触摸区域

private init() {

this.origin = new egret.Point(this.RockerBall.x,this.RockerBall.y);

this.LeftArea.addEventListener(egret.TouchEvent.TOUCH_BEGIN,this.StartMove,this);

this.LeftArea.touchEnabled = true;

}

/**

* 开始移动

*/

private StartMove(e: egret.TouchEvent) {

this.draggedObject = e.currentTarget;

this.offset = new egret.Point(e.stageX - this.RockerBall.x,e.stageY - this.RockerBall.y);

this.LeftArea.addEventListener(egret.TouchEvent.TOUCH_MOVE,this.onPanUpdate,this);

this.LeftArea.addEventListener(egret.TouchEvent.TOUCH_END,this.onPanEnd,this);

}

/**

* 移动更新

*/

private onUpdate(e: egret.TouchEvent): void {

var mouseX: number = e.stageX - this.offset.x;

var mouseY: number = e.stageY - this.offset.y;

var angle: number = Math.atan2(this.origin.y - mouseY,this.origin.x - mouseX);

var dis: number = (mouseY - this.origin.y) * (mouseY - this.origin.y) + (mouseX - this.origin.x) * (mouseX - this.origin.x);

var length: number = 0;

if(dis <= this.radius * this.radius) length = Math.sqrt(dis);

else length = this.radius;

var actualX: number = length * Math.cos(angle);

var actualY: number = length * Math.sin(angle);

this.RockerBall.x = this.origin.x - actualX;

this.RockerBall.y = this.origin.y - actualY;

}

/**

* 移动结束

*/

private EndMove(): void {

this.RockerBall.x = this.origin.x;

this.RockerBall.y = this.origin.y;

}[/mw_shl_code]

上一年做双屏互动的时候写的那块摇杆代码,你参考一下吧。

反正就是一个大圆和一个小圆,拖动小圆在大圆里面活动,小圆不能跑出大圆范围。

拖到小圆到大圆边缘得计算一下,才能在边缘位置平滑移动

ps:贪吃蛇用摇杆真的好么?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值