I have a game where one player is controlled by the arrow keys and the other player is controlled by the WSAD keys. I have a map set up in a 600x600 canvas and want to add a collision between two players in the game fill.Rect when two players are within a certain radius, either end the program or display text like "Game Finish"
The following is my js, Html and Css code (to see the code snippet you must go to "Full Screen"):
//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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 }