Jquery box2d plugini 2d bir fizik plugini.Sitelerinize fizik dinamikleri eklemek isteseniz kullanabilirsiniz.Kullanımı oldukça basittir.Uygulamak istediğiniz obeyi seçip .box2d() uygulayın.Parametrelerinden başlayalım.
x-velocity : Objenin yatay yer çekimini sağlar.+ değer sağa , - değer sola
y-velocity : Objenin dikey yer çekimini ayarlar.+ değer aşağı , - değer ise yukarı
density : Ağırlığı
friction :Sürtünme kuveti
shape : Şekli
Basit bir örnek yapalım
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://ustaderslik.com/js/jquery.box2d.min.js"></script>
<script type="text/javascript">
$(function(){
$(".kutu").box2d({'x-velocity':3,'x-velocity':5,'shape':'box'});
})
</script>
<style type="text/css">
.kutu{width:200px;height:50px;background:#666;}
</style>
</head>
<body>
<div class="kutu"></div>
</body>
</html>
Örneği çalıştırırsanız sürekli sağa çekim olacaktır.Objeyi tutup sürükleyebilirsiniz.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://ustaderslik.com/js/jquery.box2d.min.js"></script>
<script type="text/javascript">
$(function(){
var z=30,kontrol=0;
for(i=0;i<30;i++){
var l=Math.floor((Math.random()*400)+1),
t=Math.floor((Math.random()*400)+1),
r=Math.floor((Math.random()*255)+1),
g=Math.floor((Math.random()*255)+1),
b=Math.floor((Math.random()*255)+1),
w=Math.floor((Math.random()*50)+35);
$("body").append(' <div class="daire" id="daire'+i+'"></div> ')
$("#daire"+i).css({"left":l+"px","top":t+"px","background":"rgb("+r+","+g+","+b+")","width":w+"px","height":w+"px"})
$("#daire"+i).box2d({'shape': 'circle'});
}
$(document).mousemove(function(e){
if(kontrol==1){
var l=e.pageX,
t=e.pageY,
r=Math.floor((Math.random()*255)+1),
g=Math.floor((Math.random()*255)+1),
b=Math.floor((Math.random()*255)+1),
w=Math.floor((Math.random()*50)+35);
$("body").append(' <div class="daire" id="daire'+z+'"></div> ')
$("#daire"+z).css({"left":l+"px","top":t+"px","background":"rgb("+r+","+g+","+b+")","width":w+"px","height":w+"px"})
$("#daire"+z).box2d({'shape': 'circle'});
z++;
}
});
$(document).mousedown(function(e){ if(!$(e.target).is('.daire')){ kontrol=1; } })
$(document).mouseup(function(){ kontrol=0; })
})
</script>
<style type="text/css">
.daire{border-radius:300px;position:absolute;}
</style>
</head>
<body>
</body>
</html>
Bu şekilde güzel bir örnek yaptım.Boş alana tıklarsanız daireler eklenecektir.Dairelere tıklarsanız sürükleyebileceksiniz.
İncele : http://ustaderslik.com/ornek/Box2d.html
Görüntüsü :
UstaDerslik
