JavaScript上的冲突

Question

我有以下JavaScript代码。使用WASD键，我想控制它的移动。我现在要做的是如果黑色方块和红色方块相撞就会停止。它不应该通过红色方块，但我几乎不知道如何检测侧面碰撞。

这是我到目前为止所尝试的。当黑色方块碰到其中一条边时，它能够停止。现在我想让它做同样的事情，但要把红色方块的另一边，红色方块的所有边。

function onkeydown(e) {
if (e.keyCode == 68 && rectX + 30 < canvas.width) {
rectX++;
} else if (e.keyCode == 65 && rectX > 0) {
rectX--;
} else if (e.keyCode == 87 && rectY > 0) {
rectY--;
} else if (e.keyCode == 83 && rectY + 30 < canvas.height) {
rectY++;
}
fillRect();
}
window.addEventListener("keydown", onkeydown);

Answer 1

如果你不写你的坐标不在不同的变量，你不需要每次重建me对象，但这是我将如何做到的:

var canvas;
var context;
var ctx;
var rectX = 10;
var rectY = 10;
var object = {
height: 50,
width: 50,
x: 10,
y: 10,
//color: "#FF0000"        
}
var spd = 100;
window.onload = function() {
canvas = document.getElementById("canvas1");
context = canvas.getContext("2d");
ctx = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 400;
fillRect();
}
function isIn(me, array) {
for (var value of array) {
if ((me.x + me.width > value.x && me.x < value.x + value.width) && (me.y + me.height > value.y && me.y < value.y + value.height)) {
return true;
}
}
return false;
}
var terrains = [];
var me = {
height: 30,
width: 30,
};
function fillRect() {
context.beginPath();
context.fillStyle = "#ffffff";
context.fillRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.fillStyle = "black";
context.fillRect(rectX, rectY, me.width, me.height);

//obstacle
var index =   terrains.push({
x: 230,
y: 100,
width: object.width,
height: object.height,
}) - 1;
ctx.beginPath();
ctx.fillStyle = "red";
ctx.fillRect(terrains[index].x, terrains[index].y, terrains[index].width, terrains[index].height);
}
function onkeydown(e) {
if (e.keyCode == 68 && rectX + 30 < canvas.width) {
rectX++;
var newMe = (Object.assign({
x: rectX,
y: rectY,
}, me));
if (isIn(newMe, terrains)) {
rectX--;
}
} else if (e.keyCode == 65 && rectX > 0) {
rectX--;
var newMe = (Object.assign({
x: rectX,
y: rectY,
}, me));
if (isIn(newMe, terrains)) {
rectX++;
}
} else if (e.keyCode == 87 && rectY > 0) {
rectY--;
var newMe = (Object.assign({
x: rectX,
y: rectY,
}, me));
if (isIn(newMe, terrains)) {
rectY++;
}
} else if (e.keyCode == 83 && rectY + 30 < canvas.height) {
rectY++;
var newMe = (Object.assign({
x: rectX,
y: rectY,
}, me));
if (isIn(newMe, terrains)) {
rectY--;
}
}
fillRect();
}
window.addEventListener("keydown", onkeydown);

<canvas id="canvas1" style="border: 1px solid black"></canvas>

核心:

/**
* @params {{x: number, y: number, width: number, height: number}} me
* @params {{x: number, y: number, width: number, height: number}[]} array
* @returns boolean
*/
function isIn(me, array) {
for (var value of array) {
if (
(me.x + me.width > value.x && // right
me.x < value.x + value.width) && // left
(me.y + me.height > value.y && // bottom
me.y < value.y + value.height) // above
) {
return true;
}
}
return false;
}