J'ai un jeu dans lequel un joueur est contrôlé par les touches fléchées et l'autre joueur est contrôlé par les touches WSAD. J'ai une carte configurée dans un canevas 600x600 et je souhaite ajouter une collision entre deux joueurs dans le remplissage du jeu. Rectifiez lorsque deux joueurs se trouvent dans un certain rayon, soit terminez le programme, soit affichez un texte comme "Jeu La fin"
Voici mon code js, Html et Css (pour voir l'extrait de code il faut aller en "Plein Écran") :
//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] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Je vous ai écrit une fonction qui vérifie la collision.
Nous faisons cela en vérifiant d'abord si le bord gauche de rect1 est plus à droite que le bord droit de rect2. Nous vérifions également si le bord droit de rect1 est plus à gauche que le bord gauche de rect2.
Même chose pour le bord inférieur.
Si tous ces éléments sont faux, les rectangles doivent se chevaucher.
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 }