JS游戏开发--人物移动

最近花了两周的时间研究了如何用JS开发一个类似梦幻西游，英雄联盟这种操作模式的Web游戏，通过鼠标右键点击行走，并且地图可以跟随人物的移动而不断的移动。

看一下效果：

demo1：

http://www.njhhsj.com/Game/Jianye/

操作：右键点击移动

 

demo2：

http://www.njhhsj.com/Game/mxd/

操作，A键左移，D键右移，空格键攻击。


这个demo的开发花了我挺长时间的，也参考了许多论坛上游戏爱好者的思维方式。
下面我将总结一下我开发过程中是如何实现的，防止以后自己忘了，哈哈~，主要是几个我花了很长时间思考的部分。
主要展示三个部分：
在总结前先给出一张我的思考图，如图把一张地图划分成九个区域，分别标上字母，灰色地区为窗口区域。



A、B、C、D分别为窗口的左上、左下、右下、右上的四分之一区域，并且在A、B、C、D区域中可以自由移动，人物初始化时在A区中。

以X轴方向移动为例：


1.从A进入D1区域（两条竖着的红线之间的区域）并且继续往右移动时，先到达窗口的二分之一位置也就是红线所在位置，停止人物的移动，切换成地图往左移动，当地图往左一直移动到右边界时，人物进入D区域切换成自由移动，地图到达最右边停止移动。
2.当往左移动时，从D进入D1区域，方法一样，而当人物在D1区域左右移动时中，只需要往反方向移动地图即可，之后再判断是否进入左右边界即可。

人物在Y轴上移动原理是一样的。

变量展示：
var last_X = 500 // 当前人物图片X轴坐标 ,last_Y = 300 // 当前人物图片Y轴坐标 ,Des_x = 547 //
需要人物图片X轴坐标 ,Des_y = 395 // 需要人物图片Y轴坐标 ,Cur_x = 547 // 人物脚底需要移动到的X坐标 ,Cur_y =
395 // 人物脚底需要移动到的坐标 ,Orz_x = 547 // 当前人物脚底X坐标 ,Orz_y = 395 // 当前人物脚底Y坐标 ,n = 0
,img_url ,m_role_mx = 0 // X轴速度分量 ,m_role_my = 0 // Y轴速度分量 ,angle ,mapx_shift =
0 // 地图X轴移动量 ,mapy_shift = 0 // 地图Y轴移动量 ,PI = 3.141592653 ,SPEED = 6 ,dtn =
null ,inlx = 0 // 人物X轴移动量 ,inly = 0 // 人物Y轴移动量 ,angle_D;
人物移动

当点击地图时获取人物的X，Y轴的偏移量inlx，inly，然后分别进行人物X，Y轴的区域判断，分别进行加操作，偏移量为0结束移动，
// 角色移动 MoveRole : function(){ var _this = gameMonitor; // 人物X轴状态 if(inlx >
0){ // A区域 if(Orz_x < w/2 && Orz_x > 0 && gameMonitor.mapX == 0 &&
gameMonitor.mapY == 0){ inlx -= Math.abs(m_role_mx); last_X += m_role_mx; Orz_x
+= m_role_mx; if(Orz_x > w/2){ Orz_x = w/2; } // B区域 }else if(Orz_x < w/2 &&
Orz_x > 0 && gameMonitor.mapX == 0 && gameMonitor.mapY == -(_this.bgHeight-h)){
inlx -= Math.abs(m_role_mx); last_X += m_role_mx; Orz_x += m_role_mx; // C区域
}else if(Orz_x > w/2 && Orz_x < w && gameMonitor.mapY == -(_this.bgHeight-h) &&
gameMonitor.mapX == -(_this.bgWidth-w)){ inlx -= Math.abs(m_role_mx); last_X +=
m_role_mx; Orz_x += m_role_mx; // D区域 }else if(Orz_x > w/2 && Orz_x < w &&
gameMonitor.mapY == 0 && gameMonitor.mapX == -(_this.bgWidth-w)){ inlx -=
Math.abs(m_role_mx); last_X += m_role_mx; Orz_x += m_role_mx; // A1区域 }else
if(Orz_x < w/2 && Orz_x > 0 && gameMonitor.mapX == 0 && gameMonitor.mapY < 0 &&
gameMonitor.mapY > -(_this.bgHeight-h)){ inlx -= Math.abs(m_role_mx); last_X +=
m_role_mx; Orz_x += m_role_mx; if(Orz_x > w/2){ Orz_x = w/2; } // C1区域 }else
if(Orz_x > w/2 && Orz_x < w && gameMonitor.mapX == -(_this.bgWidth-w) &&
gameMonitor.mapY < 0 && gameMonitor.mapY > -(_this.bgHeight-h)){ inlx -=
Math.abs(m_role_mx); last_X += m_role_mx; Orz_x += m_role_mx; // E区域地图移动 }else{
// 人物X轴超出窗口一半区域 Orz_x = w/2; mapx_shift = inlx; inlx = 0; } }else{ inlx = 0; }
// 人物Y轴状态 if(inly > 0){ // A区域 if(0 < Orz_y && Orz_y < h/2 && gameMonitor.mapX
== 0 && gameMonitor.mapY == 0){ inly -= Math.abs(m_role_my); last_Y +=
m_role_my; Orz_y += m_role_my; if(Orz_y > h/2){ Orz_y = h/2; } // B区域 }else
if(h/2 < Orz_y && Orz_y < h && gameMonitor.mapX == 0 && gameMonitor.mapY ==
-(_this.bgHeight-h)){ inly -= Math.abs(m_role_my); last_Y += m_role_my; Orz_y
+= m_role_my; // C区域 }else if(Orz_y > h/2 && Orz_y < h && gameMonitor.mapY ==
-(_this.bgHeight-h) && gameMonitor.mapX == -(_this.bgWidth-w)){ inly -=
Math.abs(m_role_my); last_Y += m_role_my; Orz_y += m_role_my; // D区域 }else
if(Orz_y > 0 && Orz_y < h/2 && gameMonitor.mapY == 0 && gameMonitor.mapX ==
-(_this.bgWidth-w)){ inly -= Math.abs(m_role_my); last_Y += m_role_my; Orz_y +=
m_role_my; if(Orz_y > h/2){ Orz_y = h/2; } // D1区域 }else if(0 < Orz_y && Orz_y
< h/2 && gameMonitor.mapY == 0 && gameMonitor.mapX < 0 && gameMonitor.mapX >
-(_this.bgWidth-w)){ inly -= Math.abs(m_role_my); last_Y += m_role_my; Orz_y +=
m_role_my; if(Orz_y > h/2){ Orz_y = h/2; } // B1区域 }else if(Orz_y > h/2 &&
Orz_y < h && gameMonitor.mapY == -(_this.bgHeight-h) && gameMonitor.mapX < 0 &&
gameMonitor.mapX > -(_this.bgWidth-w)){ // console.log("B1区域"+Orz_y) inly -=
Math.abs(m_role_my); last_Y += m_role_my; Orz_y += m_role_my; // E区域地图移动 }else{
Orz_y = h/2; mapy_shift = inly; inly = 0; } }else{ inly = 0; }
_this.MoveRoleImage(); // 人物八方位移动图切换 // 绘制角色
_this.hero.paint(img_url,last_X,last_Y); },
 

地图移动：


地图的移动X，Y轴是从（0,0）到（-（地图宽度-窗口宽度），-（地图高度-地图高度））这个范围。
当地图接收到偏移量mapx_shift，mapy_shift之后，开始移动，知道偏移量为0结束移动。
// 地图移动 MoveImage : function(ctx){ var _this = gameMonitor; //地图X轴需要移动
if(mapx_shift > 0){ mapx_shift -= Math.abs(m_role_mx); gameMonitor.mapX -=
m_role_mx; if(gameMonitor.mapX > 0){ gameMonitor.mapX = 0; }
if(gameMonitor.mapX < (-(_this.bgWidth-w))){ gameMonitor.mapX =
(-(_this.bgWidth-w)); } if(gameMonitor.mapX == 0){ // 到达左边界
_this.IsLeftBorder(); } if(gameMonitor.mapX == (-(_this.bgWidth-w))){ // 到达右边界
_this.IsRightBorder(); } }else{ mapx_shift = 0; } //地图Y轴需要移动 if(mapy_shift >
0){ mapy_shift -= Math.abs(m_role_my); gameMonitor.mapY -= m_role_my;
if(gameMonitor.mapY > 0){ gameMonitor.mapY = 0; } if(gameMonitor.mapY <
(-(_this.bgHeight-h))){ gameMonitor.mapY = (-(_this.bgHeight-h)); }
if(gameMonitor.mapY == 0){ // 到达上边界 _this.IsTopBorder(); } if(gameMonitor.mapY
== (-(_this.bgHeight-h))){ // 到达下边界 _this.IsBottomBorder(); } }else{ mapy_shift
= 0; } // 绘制背景 ctx.drawImage(img, gameMonitor.mapX, gameMonitor.mapY); },
 

边界处理


当进行跨区域操作时将人物偏移量inlx，inly赋值给地图的偏移量mapx_shift，mapy_shift让地图继续接替运动。
当人物进入到自由移动区域时，同样将地图偏移量mapx_shift，mapy_shift返给人物偏移量inlx，inly，接替运动。
// 是否在左边界 IsLeftBorder : function(){ var _this = gameMonitor;
console.log("=====进入左边界====") Orz_x = w/2 - 1; inlx = mapx_shift; if(mapy_shift
> 0){ inly = mapy_shift; } mapx_shift = 0; mapy_shift = 0; }, // 是否在右边界
IsRightBorder : function(){ var _this = gameMonitor;
console.log("====进入右边界====") Orz_x = w/2 + 1; inlx = mapx_shift; if(mapy_shift
> 0){ inly = mapy_shift; } mapx_shift = 0; mapy_shift = 0; }, // 是否在上边界
IsTopBorder : function(){ var _this = gameMonitor; console.log("====进入上边界====")
Orz_y = h/2 - 1; if(mapx_shift > 0){ inlx = mapx_shift; } inly = mapy_shift;
mapx_shift = 0; mapy_shift = 0; }, // 是否在下边界 IsBottomBorder : function(){ var
_this = gameMonitor; console.log("====进入下边界====") Orz_y = h/2 + 1;
if(mapx_shift > 0){ inlx = mapx_shift; } inly = mapy_shift; mapx_shift = 0;
mapy_shift = 0; },
最后再分享一个参考链接，这篇文章我也看了三四遍，由于语言不同，理解起来也不同。

https://blog.csdn.net/crocodile__/article/details/18039107
<https://blog.csdn.net/crocodile__/article/details/18039107>

• « 上一篇：thymeleaf获取后台传到页面上的html标签
• » 下一篇：爱奇艺腾讯优酷vip视频免费在线观看方法--万能vip解析地址