jquery - Simulate as3.0 hitTestobject in javascript -
im trying write function similar as3.0's hit test in javascript. place circles on screen defined in div tags, go through of circle see if positions overlap.
the contents in html file:
<div class="balls"> <script> (i=0;i<10;i++){ document.write("<div id='ball"+i+"' class='ball'></div>"); } </script> </div>
placing them using jquery:
var amount = 10; var height = 270; var width = 450; function setballs(){ (i=0;i<amount;i++){ $("#ball"+i).css('top',parseint(math.random()*height)+'px'); $("#ball"+i).css('left',parseint(math.random()*width)+'px'); (j=0;j<i;j++){ hittest($("#ball"+i),$("#ball"+j)); } } }
the hittest function called above:
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); } }
the stylesheet info:
.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; }
can please shed light on why acting way?
thanks in advance
update: there mistake in algorithm. tried 20 "balls" , breaks each time
i have found mistake. in hittest, after have re positioned element, test against second element, , not against elements again. new function, works 100% follows:
placing balls:
function setballs(){ (i=0;i<amount;i++){ $("#ball"+i).css('top',parseint(math.random()*height)+'px'); $("#ball"+i).css('left',parseint(math.random()*width)+'px'); (j=0;j<i;j++){ hittest($("#ball"+i),$("#ball"+j),j); } } }
the hittest function:
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'); (j=0;j<prevballs;j++){ hittest(object1,$("#ball"+j),j); } hittest(object1,object2); } }
Comments
Post a Comment