使用JavaScript DOM进行圆形之间的碰撞检测

huangapple
go评论103阅读模式
英文:

Collision detection between circles using javascript DOM

问题

我正在使用HTML、CSS和JS编写一个非画布游戏，用于检测两个圆之间的碰撞，我使用了两个圆的斜边和半径。

作为 x 变量，我使用了左侧的CSS属性，而对于 y，我使用了 top 的CSS属性（我使用了 % 而不是 px，因为它应该是响应式的）。不知何故，它不起作用，我似乎无法找出问题所在。

  1. food.style.top = random2 + "%";
  2. food.style.left = random + "%";
  4. // 使用毕达哥拉斯定理进行碰撞检测的函数，如果两个圆之间的距离小于它们的半径之和，它们就会发生碰撞
  5. setInterval(function() {
  6.   var playerX = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
  7.   var foodX = parseInt(window.getComputedStyle(food).getPropertyValue("left"));
  8.   var playerY = parseInt(window.getComputedStyle(player).getPropertyValue("top"));
  9.   var foodY = parseInt(window.getComputedStyle(food).getPropertyValue("top"));
  10.   var playerRadius = parseInt(window.getComputedStyle(player).getPropertyValue("width"));
  11.   var foodRadius = parseInt(window.getComputedStyle(food).getPropertyValue("width"));
  13.   var adjacent = Math.abs(playerY - foodY);
  14.   var opposite = Math.abs(playerX - foodX);
  16.   var hypotenuse = Math.sqrt(Math.pow(adjacent, 2) + Math.pow(opposite, 2));
  17.   var sumRadius = playerRadius / 2 + foodRadius / 2;
  19.   if (hypotenuse < sumRadius) {
  20.     food.style.top = random + "%";
  21.     food.style.left = random + "%";
  22.     score = score + 50;
  23.   }
  24. }, 10);
  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4. }
  6. body {
  7.   background-color: antiquewhite;
  8. }
  10. #player {
  11.   width: 10%;
  12.   height: 20%;
  13.   background-color: red;
  14.   position: fixed;
  15.   top: 35%;
  16.   left: 35%;
  17.   border-radius: 50%;
  18.   z-index: 5;
  19. }
  21. #food {
  22.   width: 5%;
  23.   height: 10%;
  24.   background-color: #ffd100;
  25.   position: absolute;
  26.   border-radius: 50%;
  27.   top: 0%;
  28.   left: 0%;
  29.   z-index: -1;
  30. }
  1. <div id="player">
  2.   <!--  <img src="png-clipart-smiley-desktop-happiness-face-smiley-miscellaneous-face-thumbnail.png" id="image"> -->
  3. </div>
  4. <div id="food"></div>

我尝试了一些CSS属性的调整，因为我认为使用 % 可能是问题的原因。

英文:

I am programming a non-canvas game using HTML, CSS, and JS; for the collision detection between two circles I used the hypotenuse and the radii of the two circles.

As x variables I used the left CSS attribute, and for the y I used the top CSS attribute (I used % instead of px because it is supposed to be responsive). Somehow it doesn't work, and I cant seem to figure out what the problem is.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. food.style.top = random2 + &quot;%&quot;;
  2. food.style.left = random + &quot;%&quot;;
  4. // function for collision detection using pythagorean Theorem, if the distance between6 two circles is smaller than
  5. // the sum of their radi than they are collidin
  6. setInterval(function() {
  7.   var playerX = parseInt(window.getComputedStyle(player).getPropertyValue(&quot;left&quot;));
  8.   var foodX = parseInt(window.getComputedStyle(food).getPropertyValue(&quot;left&quot;));
  9.   var playerY = parseInt(window.getComputedStyle(player).getPropertyValue(&quot;top&quot;));
  10.   var foodY = parseInt(window.getComputedStyle(food).getPropertyValue(&quot;top&quot;));
  11.   var playerRadius = parseInt(window.getComputedStyle(player).getPropertyValue(&quot;width&quot;));
  12.   var foodRadius = parseInt(window.getComputedStyle(food).getPropertyValue(&quot;width&quot;));
  14.   var adjacent = Math.abs(playerY - foodY);
  15.   var opposite = Math.abs(playerX - foodX);
  17.   var hypotenuse = Math.sqrt(Math.pow(adjacent, 2) + Math.pow(opposite, 2));
  18.   var sumRadius = playerRadius / 2 + foodRadius / 2;
  20.   if (hypotenuse &lt; sumRadius) {
  21.     food.style.top = random + &quot;%&quot;;
  22.     food.style.left = random + &quot;%&quot;;
  23.     score = score + 50;
  24.   }
  25. }, 10);

<!-- language: lang-css -->

  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4. }
  6. body {
  7.   background-color: antiquewhite;
  8. }
  10. #player {
  11.   width: 10%;
  12.   height: 20%;
  13.   background-color: red;
  14.   position: fixed;
  15.   top: 35%;
  16.   left: 35%;
  17.   border-radius: 50%;
  18.   z-index: 5;
  19. }
  21. #food {
  22.   width: 5%;
  23.   height: 10%;
  24.   background-color: #ffd100;
  25.   position: absolute;
  26.   border-radius: 50%;
  27.   top: 0%;
  28.   left: 0%;
  29.   z-index: -1;
  30. }

<!-- language: lang-html -->

  1. &lt;div id=&quot;player&quot;&gt;
  2.   &lt;!--  &lt;img src=&quot;png-clipart-smiley-desktop-happiness-face-smiley-miscellaneous-face-thumbnail.png&quot; id=&quot;image&quot;&gt; --&gt;
  3. &lt;/div&gt;
  4. &lt;div id=&quot;food&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

I tried playing around with the css attributes since i think the use of the % might be the issue.

答案1

得分: 1

而不是使用computedStyle，您可以使用getBoundingClientRect来查找DOM元素的位置。

我还建议使用transform来定位元素，而不是使用left和top。您可以使用Math.hypot来直接获取距离。

  1. const circle1 = document.querySelector("#circle1").getBoundingClientRect();
  2. const circle2 = document.querySelector("#circle2").getBoundingClientRect();
  4. const dx = circle1.x - circle2.x;
  5. const dy = circle1.y - circle2.y;
  6. const distance = Math.hypot(dx, dy);
  8. if (distance < 100) {
  9.     console.log("circles are touching");
  10. }
  1. #circle1, #circle2 {
  2.   width: 100px;
  3.   height: 100px;
  4.   position: absolute;
  5.   border-radius: 100%;
  6.   background-color: blue;
  7. }
  9. #circle1 {
  10.   transform: translate(10px, 20px);
  11. }
  13. #circle2 {
  14.   transform: translate(30px, 50px);
  15. }

您可以在以下链接中了解更多信息：Element.getBoundingClientRect。

英文:

Instead of computedStyle you can use getBoundingClientRect to find the position of a DOM element.

I also advise to use transform instead of left and top to position an element. You can use Math.hypot to get the distance directly.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const circle1 = document.querySelector(&quot;#circle1&quot;).getBoundingClientRect()
  2. const circle2 = document.querySelector(&quot;#circle2&quot;).getBoundingClientRect()
  4. const dx = circle1.x - circle2.x;
  5. const dy = circle1.y - circle2.y;
  6. const distance = Math.hypot(dx,dy);
  8. if(distance &lt; 100) {
  9. 	console.log(&quot;circles are touching&quot;)
  10. }

<!-- language: lang-css -->

  1. #circle1, #circle2 {
  2.   width:100px;
  3.   height:100px;
  4.   position:absolute;
  5.   border-radius:100%;
  6.   background-color:blue;
  7. }
  9. #circle1 {
  10.   transform:translate(10px, 20px);
  11. }
  12. #circle2 {
  13.   transform:translate(30px, 50px);
  14. }

<!-- language: lang-html -->

  1. &lt;div id=&quot;circle1&quot;&gt;
  3. &lt;/div&gt;
  4. &lt;div id=&quot;circle2&quot;&gt;
  6. &lt;/div&gt;

<!-- end snippet -->

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

huangapple
  • 本文由 发表于 2023年6月1日 05:03:21
  • 转载请务必保留本文链接：https://go.coder-hub.com/76377250.html
  • collision-detection
  • css
  • dom
  • game-development
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定