个人中心
gpt4 book ai didi

javascript - 不使用 Canvas 碰撞两个圆

转载 作者：行者123 更新时间：2023-12-03 00:51:51 25 4
gpt4 key购买 nike

我创建了三个圆圈，并使其在不使用 HTML Canvas 的情况下从墙上弹起。现在我想让两个圆圈相互碰撞并将这些圆圈向相反的方向移动。我尝试通过检查其位置来检测碰撞，但它不起作用。我不知道我哪里错了。这是我的代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bounce Ball</title>
<meta name="viewport" content="width=device-width, initial-scale=1">  
<style>
    .circle{
        height: 50px;
        width: 50px;
        position: absolute; 
        border-radius: 50%;    
    }        
    .container {
        height: 300px;
        width: 300px;
        background-color: skyblue;
        position: relative;
    }
</style>
</head>
<body>
<div class ="container" id ="container">        
    <div class="circle" id = "circle1" style="background-color:black; 
    height: 50px; width: 50px;top:0; left:0"></div>  
    <div class="circle" id ="circle2" style="background-color:rgb(197, 100, 
    100);height: 50px; width: 50px;top:200px;left: 150px"></div>    
    <div class="circle" id ="circle3" style="background-color:brown;height: 
    50px;width: 50px;top:50px;left: 640px"></div>   
</div>
<script>
      var container = document.getElementById("container");
      container.style.width="700px";
      container.style.height = "300px";  
      var balls = document.getElementsByClassName("circle");   
      for(var i=0; i <balls.length; i++){
        var speed={x:3,y:-3}
        setInterval(draw, 50 , balls[i], speed);            
      }          
      function draw(ball, speed) { 
           if(parseInt(ball.style.left) > (parseInt(container.style.width)- 
      parseInt(ball.style.width)) || (parseInt(ball.style.left) <0) ){
                speed.x = -speed.x;                               
           } 
            ball.style.left = parseInt(ball.style.left) +  speed.x + 'px';                                       
           if(parseInt(ball.style.top) > (parseInt(container.style.height)- 
      parseInt(ball.style.height)) || (parseInt(ball.style.top) <0)){
               speed.y = -speed.y;
           }
             ball.style.top = parseInt(ball.style.top) + speed.y + 'px'; 
         //for colliding two circles
                    for(var i =0 ; i <= balls.length-1; i++){                  
                for(var j = i + 1; j < balls.length; j++){
                        if(parseInt(balls[i].style.left) + 
                 parseInt(balls[i].style.width) == 
                 parseInt(balls[j].style.left) || 
                 parseInt(balls[j].style.left) + 
                    parseInt(balls[j].style.width) == 
                   parseInt(balls[i].style.left) && 
                    parseInt(balls[i].style.top) + 
                    parseInt(balls[i].style.height) == 
               parseInt(balls[j].style.top) || parseInt(balls[j].style.top) 
               + parseInt(balls[j].style.height) == 
                  parseInt(balls[i].style.top)) {
                         speed.x = - speed.x; 
                         speed.y = -speed.y;                             
                    }
                    ball[i].style.left = parseInt(ball[i].style.left) + 
                         speed.x + 'px'; 
                    ball[j].style.left = parseInt(ball[j].style.left) + 
                         speed.x + 'px';                       
                    ball[i].style.top = parseInt(ball[i].style.top) + 
                    speed.y + 'px'; 
                    ball[j].style.top = parseInt(ball[j].style.top) + 
                        speed.y + 'px';                             
                }             

            }   

        }   

    </script>
    </body>
   </html>

最佳答案

我建议尽可能多地转移到 JavaScript 变量中，这样您就不需要为每个参数查阅 HTML。

您有很多拼写错误，其中 speed.x = - speed.x; 您的意思是 speed.x = -speed.x; 以及您的如果没有任何注释或辅助函数来解释发生了什么，代码很难阅读。

我已经修复了您的拼写错误并在下面的代码片段中重组了您的代码。尝试检查开发人员控制台，typically by pressing F12 ，因为这将向您显示代码错误以及行号和严重性评级。

在下面的代码片段中，我尝试将参数移至 JavaScript 中以展示其工作方式，同时仍将一些参数保留在 HTML 节点上:

//Basic properties
var width = 700;
var height = 300;
//Get container
var container = document.getElementById("container");
// Set dimensions
container.style.width = width + "px";
container.style.height = height + "px";
//Load balls
var balls = Array.prototype.slice.call(document.getElementsByClassName("circle"))
  .map(function(ball) {
    return {
      HTMLNode: ball,
      xPos: parseInt(ball.style.left),
      yPos: parseInt(ball.style.top),
      xAcc: 3,
      yAcc: -3,
      size: 50
    };
  });
//Utility functions
function angleBetween(x1, y1, x2, y2) {
  return Math.atan2(y2 - y1, x2 - x1);
}

function distanceBetween(x1, y1, x2, y2) {
  return Math.abs(y2 - y1) + Math.abs(x2 - x1);
}
//Draw function
function draw() {
  //Loop through balls
  for (var ballIndex1 = 0; ballIndex1 < balls.length; ballIndex1++) {
    var ball1 = balls[ballIndex1];
    //Collide with horisontal wall
    if (ball1.xPos > width - ball1.size || ball1.xPos < 0) {
      ball1.xAcc = -ball1.xAcc;
    }
    //Collide with vertical wall
    if (ball1.yPos > height - ball1.size || ball1.yPos < 0) {
      ball1.yAcc = -ball1.yAcc;
    }
    //Collide with other balls
    for (var ballIndex2 = ballIndex1 + 1; ballIndex2 < balls.length; ballIndex2++) {
      var ball2 = balls[ballIndex2];
      //Test within collision distance
      if (distanceBetween(ball1.xPos, ball1.yPos, ball2.xPos, ball2.yPos) > ball1.size) {
        continue;
      }
      //Get angle of collision
      var angle = angleBetween(ball1.xPos, ball1.yPos, ball2.xPos, ball2.yPos);
      //Apply force to acceleration
      ball1.xAcc = -Math.cos(angle) * 3;
      ball2.xAcc = -ball1.xAcc;
      ball1.yAcc = -Math.sin(angle) * 3;
      ball2.yAcc = -ball1.yAcc;
    }
    //Apply acceleration to position
    ball1.yPos += ball1.yAcc;
    ball1.xPos += ball1.xAcc;
    //Apply to node
    ball1.HTMLNode.style.left = ball1.xPos + "px";
    ball1.HTMLNode.style.top = ball1.yPos + "px";
  }
}
//Start simulation
setInterval(draw, 1000 / 60);
.circle {
  position: absolute;
  border-radius: 50%;
  height: 50px;
  width: 50px;
}

.container {
  height: 300px;
  width: 300px;
  background-color: skyblue;
  position: relative;
}
<div class="container" id="container">
  <div class="circle" id="circle1" style="background-color:black; 
    top:0; left:0"></div>
  <div class="circle" id="circle2" style="background-color:rgb(197, 100, 
    100);top:200px;left: 150px"></div>
  <div class="circle" id="circle3" style="background-color:brown;top:50px;left: 640px"></div>
</div>

关于javascript - 不使用 Canvas 碰撞两个圆，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53011447/

25 4 0
文章推荐： javascript - 金特 "unexpected reserved word"
文章推荐： regex - 正则表达式:过滤字符串
文章推荐： elasticsearch - ANDing Elasticsearch 的搜索关键字
文章推荐： javascript - 使用 For 循环设置变量 (Javascript)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com