我正在尝试制作一个基本的2d自上而下的移动拖动游戏，其控件与Play商店中的“世界上最难的游戏”类似，请查看那里是否知道我的意思（基本上只是拖动屏幕上的任何位置以移动播放器。就像拖放播放器以移动一样，除了不拖动播放器本身，而是将其拖动到屏幕上的任何位置即可。
到目前为止，我已经可以移动了，除非问题是碰撞检测。我能够使它与x一起使用，但是我不知道如何为y做它。基本上，我要做的只是检查它是否与右侧或左侧发生碰撞，还要检查将其拖动到的位置是否超过墙，然后将所需的x方向设置到墙本身以使其滑动。
听起来可能很复杂，但这是（混乱但有效的）代码
<html>
<head>
<script type="text/javascript">
var m = function(arg) {
if (!arg) {
arg = {};
}
var width = arg.width || 50;
var height = arg.height || 59;
var x = arg.x || 0;
var y = arg.y || 0;
var color = arg.color || "blue";
var div = document.createElement("div");
var style = {
width: width + "px",
height: height + "px",
top: y + "px",
left: x + "px",
backgroundColor: color,
position: "absolute"
};
function updateStyle() {
for (var i in style) {
div.style[i] = style[i];
}
this.div = div;
}
this.setPos = (nx, ny) => {
x = nx; //-width/2;
y = ny; //-width/2;
style["left"] = x + "px";
style["top"] = y + "px";
updateStyle();
};
this.setColor = (col) => {
style.backgroundColor = col;
updateStyle();
}
this.getPos = () => {
var obj = {};
obj.x = x;
obj.y = y;
return obj;
};
this.getWidth = () => width;
this.getHeight = () => height;
this.getBB = () => {
return {
x: x,
y: y,
width: width,
height: height
};
};
updateStyle();
this.div = div;
}
var a = (el) => {
if (!el)
el = m();
document.body.appendChild(el);
}
var col = function(box1, box2) {
var point = false;
if (!(
box1.x > box2.x + box2.width ||
box1.x + box1.width <= box2.x ||
box1.y > box2.y + box2.height ||
box1.y + box1.height <= box2.y)) {
point = new Array();
if (box1.x + box1.width > box2.x && box1.x + box1.width < box2.x + box2.width) {
point[0] = true;
}
if (box1.x > box2.x) {
point[1] = true;
}
if (box1.y + box1.height > box2.y && box1.y + box1.height < box2.y + box2.height) {
point[3] = true;
}
//top of player
if (box1.y > box2.y) {
point[2] = true;
}
}
return point;
}
</script>
</head>
<body>
<script>
window.onload = () => {
var d = new m({
color: "red"
});
a(d.div);
var b = new m({
width: 25,
height: 25
});
a(b.div);
var wall = new m({
width: 70,
height: 300,
x: 400,
y: 280
});
a(wall.div);
var r = new m({});
a(r.div);
var x = 0;
var y = 0;
var ylimit = 700;
var xlimit = 500;
var xspeed = 2;
var yspeed = 8;
var startT = {
x: 0,
y: 0
};
var curT = {
x: 0,
y: 0
};
var endT = {
x: 0,
y: 0
};
var origPos = b.getPos();
var colliding = [];
function update() {
colliding = [];
d.setColor("blue");
wall.setColor("blue");
b.setColor("red");
d.setPos(x, y);
r.setColor("blue");
if (y > ylimit || y < 0) {
yspeed *= -1;
}
if (x > xlimit || x < 0) {
xspeed *= -1;
}
x += xspeed * 4;
y += yspeed;
var hit = col(b.getBB(), wall.getBB());
if (hit) {
colliding = hit;
if (hit[0])
d.setColor("green");
if (hit[1])
wall.setColor("purple");
if (hit[2])
b.setColor("salmon");
if (hit[3]) {
r.setColor("pink");
}
// b.setPos(wall.getPos().x-b.getWidth(),b.getPos().y);
}
window.requestAnimationFrame(update);
}
window.requestAnimationFrame(update);
var diff = 0;
document.body.addEventListener("touchstart", (e) => {
if (e.targetTouches.length > 0) {
startT.x = e.targetTouches[0].pageX;
startT.y = e.targetTouches[0].pageY;
origPos = b.getPos();
diff = 0;
}
});
document.body.addEventListener("touchend", (e) => {
if (e.targetTouches.length > 0) {
endT.x = e.targetTouches[0].pageX;
endT.y = e.targetTouches[0].pageY;
// origPos=b.getPos();
}
});
var c = false;
var stoppedPosx = 0;
document.body.addEventListener("touchmove", (e) => {
if (e.targetTouches.length > 0) {
curT.x = e.targetTouches[0].pageX - diff;
curT.y = e.targetTouches[0].pageY;
var dx = (curT.x - startT.x) + origPos.x;
var dy = (curT.y - startT.y) + origPos.y;
var ax;
if (dx < 0) {
dx = 0;
} else if (dx > 900) {
dx = 300;
}
if (dy < 0) {
dy = 0;
} else if (dy > 700) {
dy = 700;
}
var futObj = {
x: dx,
y: dy,
width: b.getWidth(),
height: b.getHeight()
};
var hit = col(futObj, wall.getBB());
// if(dx +b.getWidth() > wall.getPos().x && dy < wall.getPos().y+wall.getHeight())
if (colliding[0] && dx + b.getWidth() > wall.getPos().x && dy < wall.getPos().y + wall.getHeight()) {
dx = wall.getPos().x - b.getWidth() + 1;
diff = ((e.targetTouches[0].pageX - startT.x) + origPos.x) - b.getPos().x;
} else if (colliding[1] && dx < wall.getPos().x + wall.getWidth() && dy < wall.getPos().y + wall.getHeight()) {
dx = wall.getPos().x + wall.getWidth() - 1;
diff = ((e.targetTouches[0].pageX - startT.x) + origPos.x) - b.getPos().x;
}
b.setPos(dx, dy);
}
});
alert("hi")
}
</script>
</body>
</html>
不确定该片段是否可以滚动，也不确定如何使它起作用，但这是另一个问题。如果您无法拖动红色播放器进行测试，则只需尝试将其复制到m html文件中即可。
此问题的相关部分是事件监听器的结尾
关键是：如何像原始游戏中一样添加y碰撞检测？ （绝对有可能）！