我有一個遊戲，其中一個玩家由箭頭鍵控制，另一個玩家由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>
I've wrote you a function that checks the collision.
We do that by first checking if the left edge of rect1 is further to the right than the right edge of rect2. We also check if the right edge of rect1 is further to the left than the left edge of rect2.
Same thing for bottom edge.
if all of those are false, the rectangles must be overlapping.
const checkCollision = (rect1, rect2) => { return rect1.x < rect2.x + rect2.w &&rect1.x + rect1.w > rect2.x &&rect1.y < rect2.y + rect2.h &&rect1.y + rect1.h > rect2.y }