参考になるページを見つけたのですが、こちらの紹介プログラムですとサイコロに動きがないのでgifアニメを使って動きを出したいのですが、あまり大きなファイルにしたくありません。
（参考にしたサイト）
http://www.ne.jp/asahi/qpon/b/java/nyumon/nyumon22.htm
希望としてはサイコロが転がっている様子のA.gifと、出目が出る瞬間のB.gifを1～6まで用意し、A+Bというように連続再生させることでサイコロがころがる様子を現したいと思っています。
クリックするたびにA.gifを必ず経由してから、ランダムに選ばれたB.gifへと連続的に再生させるには、以下にどのような直しが必要でしょうか？
<script language="javascript">
<!--
//サイコロファイル//
sai=new Array("sai0.gif","sai1.gif","sai2.gif","sai3.gif","sai4.gif","sai5.gif","sai6.gif");
//サイコロ入れ替え//
function chg(){
r=Math.random()*6; //乱数表
rr=Math.floor(r)+1; //切り捨てて＋１する
document.saikoro.src=sai[rr]; //サイコロを入れ替える
}
//-->
</script>
</head>
<body>
サイコロをクリックしてください<br>
<table border=1 bgcolor=#eeeeee><tr><td>
<a href="JavaScript:chg()">
<img src="sai1.gif" name="saikoro" width=200 height=200 border=0>
</a>
</td></tr></table>
No.1
4889
2108
100pt
サイコロが転がっている様子を A.gif として、転がり終わるまでの時間を決めておきます。
例えば、2秒で、出目の画像と入れ替えるとしたら、以下のような感じになると思います。
function chg(){ document.saikoro.src = "A.gif"; // まず、転がっているアニメーションに切り替える // 出目を決めて、その画像に入れ替える関数 var finish = function() { r = Math.random() * 6; // 乱数表 rr = Math.floor(r) + 1; // 切り捨てて＋１する document.saikoro.src=sai[rr]; // サイコロを入れ替える } // 2秒後に、出目の画像に入れ替える関数を処理する setTimeout(finish, 2000); }
一番むずかしいのは、転がってるアニメーションから出目の画像に切り替わるときにスムーズに見える画像を作るところかもしれません。
4
3
4
5
1
わかりました。そうしてみます。
2013/10/18 23:58:54いつもありがとうございます。
お気遣い、ありがとうございました。
2013/10/21 10:14:28