2 fill.Rect函数之间的碰撞检测答案

【问题标题】：Collision detection between 2 fill.Rect function2 fill.Rect函数之间的碰撞检测
【发布时间】：2022-11-18 10:45:11
【问题描述】：

我有一个游戏，其中一个玩家由箭头键控制，另一个玩家由箭头键控制。我在 600、600 画布中设置了地图，我想在游戏中的 2 个填充之间添加碰撞。矩形玩家，当 2 个玩家彼此之间有一定半径时，它要么结束程序，或显示诸如“游戏结束”之类的文本

这是我的 js、Html 和 Css 代码（要查看代码片段，您必须转到“完整页面”：

//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>

【问题讨论】：

标签： javascript html css game-development

【解决方案1】：

我已经给你写了一个检查碰撞的函数。

为此，我们首先检查 rect1 的左边缘是否比 rect2 的右边缘更靠右。我们还检查 rect1 的右边缘是否比 rect2 的左边缘更靠左。

底边也一样。

如果所有这些都是错误的，则矩形必须重叠。

const checkCollision = (rect1, rect2) => {
  if (rect1.x < rect2.x + rect2.w &&
    rect1.x + rect1.w > rect2.x &&
    rect1.y < rect2.y + rect2.h &&
    rect1.y + rect1.h > rect2.y) {
    return true;
  }
  return false;
}

【讨论】：