用javascript模拟as3.0的hitTestobject

Simulate as3.0 hitTestobject in javascript

本文关键字：hitTestobject as3 javascript 模拟      更新时间：2023-09-26

我试图在javascript中编写一个类似于as3.0的命中测试的函数。我在屏幕上放置由div标签定义的圆圈，然后遍历所有圆圈，看看它们的位置是否重叠。

html文件中的内容:

<div class="balls">
  <script>
    for (i=0;i<10;i++){
      document.write("<div id='ball"+i+"' class='ball'></div>");
    }
  </script>
</div>

使用jquery放置它们:

var amount = 10;
var height = 270;
var width = 450;
  function setBalls(){
    for (i=0;i<amount;i++){
      $("#ball"+i).css('top',parseInt(Math.random()*height)+'px');
      $("#ball"+i).css('left',parseInt(Math.random()*width)+'px');
      for (j=0;j<i;j++){
        hitTest($("#ball"+i),$("#ball"+j));
      }
    }
}

如上所述的hitTest函数:

function hitTest(object1,object2){
  var left1 = parseInt(object1.css('left'));
  var left2 = parseInt(object2.css('left'));
  var top1 = parseInt(object1.css('top'));
  var top2 = parseInt(object2.css('top'));
  var width1 = parseInt(object1.width());
  var width2 = parseInt(object2.width());
  var height1 = parseInt(object1.height());
  var height2 = parseInt(object2.height());
  var horTest = false;
  var verTest = false;
  if (((left1 >= left2)&&(left1 <= left2 + width2))||((left2 >= left1)&&(left2 <= left1 + width1))){
    horTest = true;
  }
  if (((top1 >= top2)&&(top1 <= top2 + height2))||((top2 >= top1)&&(top2 <= top1 + height1))){
    verTest = true;
  }
  if(horTest&&verTest){
    console.log("hit");
    object1.css('top',parseInt(Math.random()*height)+'px');
    object1.css('left',parseInt(Math.random()*width)+'px');
    hitTest(object1,object2);
  } 
}

样式表信息:

.ball{
  width:50px;
  height:50px;
  background:green;
  border-radius:100%;
  position:absolute;
}
.balls{
  width:500px;
  height:320px;
  background:red;
  position:absolute;
  left:10px;
  top:80px;
}

有谁能解释一下为什么会这样吗?

Thanks in advance

更新:我的算法肯定有一个错误。我现在试着用20个"球"，现在每次都坏了

我发现了错误。在我的hitTest中，重新定位元素之后，我只针对第二个元素进行测试，而不是再次针对所有元素进行测试。现在可以100%工作的新函数如下:

放置球:

function setBalls(){
  for (i=0;i<amount;i++){
    $("#ball"+i).css('top',parseInt(Math.random()*height)+'px');
    $("#ball"+i).css('left',parseInt(Math.random()*width)+'px'); 
for (j=0;j<i;j++){
      hitTest($("#ball"+i),$("#ball"+j),j);
    }
 }
}

hitTest函数:

function hitTest(object1,object2,prevBalls){
  var left1 = parseInt(object1.css('left'));
  var left2 = parseInt(object2.css('left'));
  var top1 = parseInt(object1.css('top'));
  var top2 = parseInt(object2.css('top'));
  var width1 = parseInt(object1.width());
  var width2 = parseInt(object2.width());
  var height1 = parseInt(object1.height());
  var height2 = parseInt(object2.height());
  var horTest = false;
  var verTest = false;
  if (((left1 >= left2)&&(left1 <= left2 + width2))||((left2 >= left1)&&(left2 <= left1 + width1))){
    horTest = true;
  }
  if (((top1 >= top2)&&(top1 <= top2 + height2))||((top2 >= top1)&&(top2 <= top1 + height1))){
    verTest = true;
  }
  if(horTest&&verTest){
    console.log("hit");
    object1.css('top',parseInt(Math.random()*height)+'px');
    object1.css('left',parseInt(Math.random()*width)+'px');
    for (j=0;j<prevBalls;j++){
      hitTest(object1,$("#ball"+j),j);
    }
    hitTest(object1,object2);
  } 
}

相关文章：