質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1152閲覧

葉っぱを降らせるJSアニメーションについて

katsumi_garden

総合スコア17

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

3クリップ

投稿2017/11/01 13:39

葉っぱを降らせるアニメーションを作成しております。

既存の桜吹雪系の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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

動作サンプル(舞っているのがjsFiddleのロゴなのは気にしないでください)
https://jsfiddle.net/twsv2bjd/1/

重要なところだけ抜粋して紹介します

JavaScript

1// 必要な画像のパスの配列 2var imagePathList = [ 3 'leaf/leaf_1.png', 4 'leaf/leaf_2.png', 5 'leaf/leaf_3.png', 6 /*中略*/ 7]; 8// 読み込んだ画像を格納しておく配列 9var images = []; 10 11////////////////////////////////// 12 13// 必要な画像を読み込み、全部読み終わったらスタートするための処理 14function imageLoad() { 15 // countは読み込み完了した枚数を数える変数 16 var count = 0; 17 // 読み込み完了時の処理 18 function onLoad(e) { 19 // 読み込み完了 20 count++; 21 if (count >= imagePathList.length) { 22 // 必要な枚数読み込み終わったら描画を開始する 23 flow_start(); 24 } 25 } 26 // leaf_XXの枚数分配列へImageを作成する 27 for (var index in imagePathList) { 28 var path = imagePathList[index]; 29 var image = new Image(); 30 image.onload = onLoad; // 各画像で読み込み完了処理を呼ぶ 31 image.src = path; // srcを設定するのはonloadを設定後でないとonloadが呼ばれない可能性がある 32 images.push(image); 33 } 34} 35 36////////////////////////////////// 37 aryImg.push({ 38 "img": images[Math.floor(Math.random()*images.length)], // 画像のランダム性はここで決める 39 /*中略*/ 40 }); 41 42////////////////////////////////// 43 ctx.drawImage(aryImg[idx].img, 0, 0, aryImg[idx].sizew, aryImg[idx].sizeh);// いままで固定の一枚のimgを使っていたが、aryImgが持つimgを使う 44 45////////////////////////////////// 46 if (aryImg[idx].posy >= cvsh) { 47 aryImg[idx].posy = -aryImg[idx].sizeh; 48 aryImg[idx].img = images[Math.floor(Math.random()*images.length)]; // 画像も切り替える 49 }

投稿2017/11/02 00:53

編集2017/11/02 00:55
masaya_ohashi

総合スコア9206

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

katsumi_garden

2017/11/02 03:02

早々にご返答いただき、ありがとうございます。 サンプルも提示いただき簡単に対応させることが出来ました。 ありがとうございました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問