[RPG] 搖春花 more and more and animate

原本並沒有打算做 X搖錢樹（O搖春花）的，只是因為卡發糕卡太久～
又覺得效果不太好＝.＝|||...
剛好又碰到過年前，軍心渙散（反正大家都在等過年，也都不想多事）
是說有點閒，就開始想東想西的～
想說過年麻，大家都喜歡招財進寶一下～
所以～那就來搖一下好了XD...

http://www.realmofprogrammersgamble.website/journal/ch1/jour3.html

搖春花～

其實多搖幾下，會越來越多，最後就會變成下雨囉XD...

這次的重點在於， 越來越多的 span（＄），random，和 jquery animate 位移...

有大概試一下，在pc上 chrome/firefox 就大概可以上到 三百，四百個物件都感覺還好～
但是手機就....手機在一百多個物件後就開始有明顯的 lag...
（看硬體啦，我中階手機跑得挺痛苦的，但聽朋友測 ipad 順順）
所以將就配合一下，改成手機可以接受的數量就好了～
（原本想判別解析度，做物件數量差異，但後來想到還有直式/橫式，就懶了一_一）
不過寬度到是會影響 $ 字的大小（當量不夠大時，把東西變大，看起來也就滿滿的了XD）

單一作法其實都蠻簡單的（就是設定合理區間內，一直random）
不過就是整合了好幾種，好幾項～
花最多時間是在調整區間...
還有手殘改壞或是覺得效果不對時，在茫茫的參數海中找是誰的錯Orz...
（這篇的動畫又做太長，光要等他跑到那段，30s又過去了Orz...）

拼命用的 random function
function randIntRange(min, max)  {
var tmp = Math.floor(Math.random()*(max-min))+min;
return tmp;
}

jquery animate 有個優點就是，他同一個 元件(div/span) 的 animate 是有照順序的，但不同 元件要照順序還是只能用 setTimeout。不過也已經好用很多了，
貼一下噴錢的動畫實作

//多久位移一次（移動時間）
var pms = randInt(70)+50;
//每次位移x  （平移量x）
var dx = randInt(750)+10;
//每次位移y  （落下量y）
var dy = randInt(10)+5;
// 往右跑，或是往左跑 （方向）
var isup = randInt(10)+1;
//移動幾次
var ts = randInt(10)+5;

for(var i = 0 ; i < ts ; i++)  {
// 仿拋物線的位移量
var vx = Math.round(Math.pow(i*dx, 0.5));
var vy = dy*i;

if (isup > 5) {
tx -= vx;
}  else  {
tx += vx;
}
ty += vy;
// 修正不要跑出畫面（不然會跑出 scroll bar...但這參數沒有調很好，偶爾還是會）
if (ty > maxh-40) {
break;
}
if (tx > maxw-40) {
break;
}

// 交給 jquery animate 做移動～
$('#'+gid).animate({
left: tx,
top: ty,
opacity: 1
}, pms, function() {
;
});
}