Question

jquery 元素移动的问题

这是我做的jquery一个练习，
地址是g.xweb.cn/game_02/
源代码应该都看得到，现在我想实现的效果是中间那个人物不能移动碰到灰色元素的里面去，
就像游戏里面角色碰到石头 河流一样不能穿过的感觉一样，
大家给点思路，完全没头绪...
现在是按键盘上下左右能移动的

Answer 1

原理很简单，但是想弄好了很复杂的。其实就是要定义一个非法区域列表，然后在移动前判断目标坐标是不是位于非法区域内，如果是的话则不移动，否则可以移动。

你这个可能都是矩形的吧，设置类似var unmoveable=[[x1,y1,x2,y2],[x1,y1,x2,y2],...]就行了，每次判断目标是不是处于某个x1,y1和x2,y2标明的区域内。

追问

确实跟你说的...原理我也知道...而且键盘上下移动的时候判断的代码不一样，
不能把键盘事件做成一个函数，上下移动都要分四次做不一样的判断，

还有[x1,y1,x2,y2],[x1,y1,x2,y2],...]
这些坐标能自动获取到吗?我jquery基础不好...
要手写的话 感觉意义不大啊

追答

本来键盘时间就是一个函数，函数内部判断是那个方向，根据当前人物坐标+方向计算出人物的新坐标，然后判断该坐标是否可用，并决定移动还是放弃移动。

比如你用灰色的div代表不能用的区域，那么div应该有class吧，用jQuery获取这个div，然后获取其坐标信息就行了，比如

var unmoveable = [];
$('div.unmoveable').each(function(){
    var obj = $(this);
    var data = [obj.offset().left, obj.offset().top];
    data.push(data[0] + obj.width());
    data.push(data[1] + obj.height());
    unmoveable.push(data);
});

这样就获取到所有div.unmoveable的坐标范围了

别用jQuery基础不好做为理由，不懂就好好学。

我还想买别墅呢，就是钱不够，这都是废话。

追问

......大哥，我就是想边做边学，平时工作jquery效果一般都网上找，接触不多，所以才自己想点东西做做看的...
还是先谢谢你了，待会我这代码试试看

Answer 2

这种格子游戏，用原点坐标系做比较好做，每一小块区域都有一对x，y坐标，用像素做，判断太麻烦，你得判断4条边像素
当前人物坐标（x，y），石头坐标 数组 [ [3,6],[4,6] ]
每次移动，判断 x,y 是否在石头坐标上，如果在，renturn false，如果不在，就设置x，y新坐标，开始animate动画
相当于只判断两个点是否重合而已