javascriptで動くwebサイコロを作っています。

参考になるページを見つけたのですが、こちらの紹介プログラムですとサイコロに動きがないので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;   //切り捨てて+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>

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/10/10 22:29:30
  • 終了:2013/10/10 23:32:32

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4467ベストアンサー獲得回数18422013/10/10 22:45:57

ポイント100pt

サイコロが転がっている様子を 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);
}

一番むずかしいのは、転がってるアニメーションから出目の画像に切り替わるときにスムーズに見える画像を作るところかもしれません。

他6件のコメントを見る
id:pen2648

わかりました。そうしてみます。
いつもありがとうございます。

2013/10/18 23:58:54
id:a-kuma3

お気遣い、ありがとうございました。

2013/10/21 10:14:28

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません