我有一个游戏，其中一个玩家由箭头键控制，另一个玩家由WSAD键控制。我在一个600x600的画布中设置了地图，并希望在游戏中的两个fill.Rect玩家之间添加碰撞，当两个玩家在一定半径范围内时，要么结束程序，要么显示文本，如“游戏结束”
以下是我的js、Html和Css代码（要查看代码片段，您必须转到“全屏”）：
//Canvas
mycan.style.display = "block";
mycan.height = 600;
mycan.width = 600;
//make players
let player = {x:511, y: 541, w:29, h:29};
let player2 = {x:60, y:31, w:30, h:29};
//Context
const ctx = mycan.getContext("2d");
//Start-position
ctx.fillRect(player.x, player.y, player.w, player.h);
ctx.fillRect(player2.x, player2.y, player2.w, player2.h);
//No-smooth-movement
window.onkeydown = move = (e) => {
let key = e.keyCode;
//player1(red)
if (key === 68 && player2.x <= mycan.width-30) {player2.x += 30;} //right
else if(key === 65 && player2.x >= 10) {player2.x -= 30;} //left
else if(key === 83 && player2.y <= mycan.height-30) {player2.y += 30;} //down
else if(key === 87 && player2.y >= 10) {player2.y -= 30;} //up
//player2(blue)
if (key === 39 && player.x <= mycan.width-25) {player.x += 30;} //right
else if(key === 37 && player.x >= 10) {player.x -= 30;} //left
else if(key === 40 && player.y <= mycan.height-25) {player.y += 30;} //down
else if(key === 38 && player.y >= 10) {player.y -= 30;} //up
}
const draw = ()=>{
//player draw, and player colors
ctx.clearRect(0,0, mycan.width, mycan.height);
ctx.fillRect(player.x, player.y, player.w, player.h);
ctx.fillStyle = "blue";
ctx.fillRect(player2.x,player2.y, player2.w, player2.h);
ctx.fillStyle = 'red';
};
setInterval(()=>{
draw();
},1000/60);
//collision
//thsi is where i want to add collision
html, body {
margin:20;
padding: 20;
}
canvas {
display: block;
}
#mycan {
background-size: 30px 30px;
background-image:
linear-gradient(to right, black 1px, transparent 1px),
linear-gradient(to bottom, black 1px, green 1px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
<canvas id = mycan > </canvas>
<font color = 'blue'> <h1>Player1 = blue</h1></font color>
<font color = 'red'> <h1>Player2 = red</h1></font color>
</head>
<body>
<main>
</main>
<script src="script.js"></script>
</body>
</html>
我已经给你写了一个检查碰撞的函数。
我们首先检查 矩形 1 的左边缘是否比 矩形 2 的右边缘更靠右。我们还检查 rect1 的右边缘是否比 rect2 的左边缘更向左。
底边也是一样。
如果所有这些都为假，则矩形必须重叠。
雷雷