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

        
Player1 = blue  
Player2 = red