Ich habe ein Spiel, bei dem ein Spieler mit den Pfeiltasten und der andere Spieler mit den WSAD-Tasten gesteuert wird. Ich habe eine Karte in einer 600x600-Leinwand eingerichtet und möchte eine Kollision zwischen zwei Spielern in die Spielfüllung einfügen. Wenn sich zwei Spieler innerhalb eines bestimmten Radius befinden, beenden Sie entweder das Programm oder zeigen Sie einen Text wie „Game The end“ an
Hier ist mein js-, HTML- und CSS-Code (um den Codeausschnitt zu sehen, müssen Sie auf „Vollbild“ gehen):
//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-Frontend] Node.js-Schnellstart](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 }