Jquery Box2d Plugin Kullanımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery Box2d Plugin Kullanımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2423)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/t8y5ggh4.png



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol