JS实现RPG游戏鼠标8方向操作

2019年09月25日 13:41:48


下面是鼠标控制移动的逻辑。


先来对舞台进行一下划分,如下图:



相对于舞台上的人物而言,若鼠标在它的任一方向被按下,人物则改为向该方向移动;若鼠标在保持按下的情况下移动到另外一个区域,则人物的运动方向也随之更改;若鼠标弹起则停止运动。


根据之前的键盘8方向程序,人物的运动方向由一个数组dirArr来表示,这个数组保存着当前键盘上被按下的键的keyCode。如果有新键按下或旧键弹起,则更新这个数组,并调用setDir函数适当更改人物的运动方向。


这样一来要添加鼠标支持就非常简单了。让stage分别侦听MouseEvent.MOUSE_DOWN,MouseEvent.MOUSE_UP, MouseEvent.MOUSE_MOVE事件,并交由onMouseDir函数处理。当鼠标按下,先分析它相对于人物的位置(稍后介绍),然后根据位置将代表该方向的keyCode push进dirArr数组。当鼠标弹起,直接清空dirArr数组。若按下时有移动,先分析相对位置是否有变化,没有就什么都不做,有的话先清空dirArr数组,再把新的方向push进去。这3种情况最后都调用一下setDir函数更新人物运动方向就好了。


相对位置的分析如下。


这里要借助三角函数来判断鼠标当前相对于人物的方向,也就是要求出下图中角a的值。

坐标系和常用的直角坐标系稍有不同,它的y轴正方向是向下的。要计算角a,先求出两直角边nx、ny以及斜边r,然后求余弦cos(a) = nx / r,最后求反余弦并取整。取整是为了节省运算,整数运算相对于浮点运算要快得多,这在有大量运算时尤为突出。另外需要注意的是当鼠标位于x轴之上时,角a会大于180度,而反三角函数只给出0~180的解,所以需要做一个转换:a = 360 - a。详细计算代码如下:

const {x,y} = pointer;
var nx=x-man.x;
var ny=y-man.y;
var r=Math.sqrt(nx*nx+ny*ny);
 var cos=nx/r;
 var angle=Math.acos(cos)*180/Math.PI;
 if(ny<0){
   angle=360-angle;
  }
var msArr=new Array();
var key =''
if(angle>337 || angle<23){
   key="Right"
   msArr.push(68);
} else if(angle>292){
   msArr.push(68);
   msArr.push(87);
    key="topRight"else if(angle>247){
  msArr.push(87);
  key="top"else if(angle>202){
    msArr.push(87);
  msArr.push(65);
  key="topLeft"else if(angle>157){
  msArr.push(65);
  key="Left"else if(angle>112){
   key="bottomLeft"
   msArr.push(65);
   msArr.push(83);
} else if(angle>67){
 key="bottom"
   msArr.push(83);
} else{
   key="bottomRight"
   msArr.push(83);
   msArr.push(68);
}


参考:AS3实现RPG游戏鼠标8方向操作


Comments


    © 2019 power by Kacoro, Inc.

    500x500