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); }

        
Player1 = blue  
Player2 = red