suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Kollision zwischen zwei fill.Rect-Funktionen erkennen

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>

P粉145543872P粉145543872439 Tage vor834

Antworte allen(1)Ich werde antworten

  • P粉752812853

    P粉7528128532023-09-16 10:18:25

    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 
}

    Antwort
    0
  • StornierenAntwort