質問: javascriptで動くwebサイコロを作っています。 参考になるページを見つけたのですが、こちらの紹介プログラムですとサイコロに動きがないのでgifアニメを使って動きを出したいのですが、あまり大きなファイルにしたくありません。 (参考にしたサイト) 希望としてはサイコロが転がっている様子のA.gifと、出目が出る瞬間のB.gifを1~6まで用意し、A+Bというように連続再生させることでサイコロがころがる様子を現したいと思っています。 クリックするたびにA.gifを必ず経由してから、ランダムに選ばれたB.gifへと連続的に再生させるには、以下にどのような直しが必要でしょうか? サイコロをクリックしてください
回答: サイコロが転がっている様子を A.gif として、転がり終わるまでの時間を決めておきます。 例えば、2秒で、出目の画像と入れ替えるとしたら、以下のような感じになると思います。 ``` function chg(){ document.saikoro.src = "A.gif"; // まず、転がっているアニメーションに切り替える // 出目を決めて、その画像に入れ替える関数 var finish = function() { r = Math.random() * 6; // 乱数表 rr = Math.floor(r) + 1; // 切り捨てて+1する document.saikoro.src=sai[rr]; // サイコロを入れ替える } // 2秒後に、出目の画像に入れ替える関数を処理する setTimeout(finish, 2000); } ``` 一番むずかしいのは、転がってるアニメーションから出目の画像に切り替わるときにスムーズに見える画像を作るところかもしれません。