recherche

Maison  >  Questions et réponses  >  le corps du texte

Détecter la collision entre deux fonctions fill.Rect

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>

P粉145543872P粉145543872435 Il y a quelques jours828

répondre à tous(1)je répondrai

  • P粉752812853

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

    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 
}

    répondre
    0
  • Annulerrépondre