葉っぱを降らせるアニメーションを作成しております。
既存の桜吹雪系のJSを探してきて実装しました。
現在はランダムに選択された一つの葉っぱが大量に降る流れとなっています。
ただ、出来れば10種類の葉っぱ(leaf_1.png〜leaf_10.png)をランダムに表示させて、
降らせたいです。
流れとしては、1〜10までの画像を読み込み
↓
読み込みが完了したら、アニメーションスタート。
それぞれ割り振られたランダムな葉っぱを降らせる
JSに不慣れで記述方法がわかりません。
よろしければアドバイス等いただければと思います。
java
1<script type="text/javascript"> 2var canvas = document.getElementById("cvs"); 3var ctx = canvas.getContext("2d"); 4var imgCnt = 18; 5var aryImg = []; 6var cvsw = 560; 7var cvsh = 790; 8var imgBaseSizeW = 15; 9var imgBaseSizeH = 18.5; 10var aspectMax = 1.5; 11var aspectMin = 0.5; 12var speedMax = 1.2; 13var speedMin = 0.3; 14var angleAdd = 4; 15 16var img = new Image(); 17var no = Math.floor(Math.random()*10+1); 18img.src = "leaf/leaf_"+ no +".png"; 19img.onload = flow_start; 20 21function setImagas(){ 22 var aspect = 0; 23 for(var i = 0;i < imgCnt;i++){ 24 aspect = Math.random()*(aspectMax-aspectMin)+aspectMin; 25 aryImg.push({ 26 "posx": Math.random()*cvsw, 27 "posy": Math.random()*cvsh, 28 "sizew": imgBaseSizeW*aspect, 29 "sizeh": imgBaseSizeH*aspect, 30 "speedy": Math.random()*(speedMax-speedMin)+speedMin, 31 "angle": Math.random()*360, 32 }); 33 } 34} 35 36var idx = 0; 37var cos = 0; 38var sin = 0; 39var rad = Math.PI / 180; 40 41function flow(){ 42 ctx.clearRect(0,0,cvsw,cvsh); 43 for(idx = 0;idx < imgCnt;idx++){ 44 aryImg[idx].posy += aryImg[idx].speedy; 45 aryImg[idx].angle += Math.random()*angleAdd; 46 cos = Math.cos(aryImg[idx].angle * rad); 47 sin = Math.sin(aryImg[idx].angle * rad); 48 ctx.setTransform(cos, sin, sin, cos, aryImg[idx].posx, aryImg[idx].posy); 49 ctx.drawImage(img, 0, 0 , aryImg[idx].sizew , aryImg[idx].sizeh); 50 ctx.setTransform(1, 0, 0, 1, 0, 0); 51 if(aryImg[idx].posy >= cvsh){ 52 aryImg[idx].posy = -aryImg[idx].sizeh; 53 } 54 } 55} 56 57function flow_start(){ 58 setImagas(); 59 setInterval(flow,10); 60} 61</script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/02 03:02