用javascript模拟as3.0的hitTestobject
Simulate as3.0 hitTestobject in javascript
我试图在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);
}
}
相关文章:
- Flash AS3关闭浏览器窗口
- 如何将一个*参数*从JS传递到AS3
- Javascript:如何对属性变量(例如var.hello.push)执行数组方法?太习惯AS3了
- as3中enter_frame的javascript版本
- 如何使用外部接口将参数从 JavaScript 传递到 AS3
- 在 AS3 和 HTML5 中创建 3D 条形图
- Javascript 在尝试将 var 发送到 AS3 ExternalInterface 时抛出错误
- 确保浏览器 AS3 支持限制
- AS3 XML上的翻页在IE和FIREFOX上看不到
- 为什么AS3 navigationToURL()只运行一次
- Facebook AS3 SDK without JavaScript
- 如何从AdobeAIR应用程序内的网页调用AS3代码
- Javascript未将数据返回到AS3闪存
- Facebook Flash AS3 应用程序 - swc 不起作用
- 在Google Chrome Extension中调用Javascript中的Flash As3函数
- 如何在 AIR Android 应用程序中在 JS 和 AS3 之间进行通信
- AS3 thinks e.target.bytesTotal = 0
- 将 Base64 字符串从 AS3 返回到 Javascript.这是一个错误或功能(还是我错了?
- 将 AS3 转换为 JavaScript
- 用javascript模拟as3.0的hitTestobject