人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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>

●質問者: raiden
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●100ポイント ベストアンサー

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

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


raidenさんのコメント
a-kuma3さんの回答はいつも完璧!! しかも早い!!!! 今回も助けてくださって、どうもありがとうございました。

a-kuma3さんのコメント
たはは、ほめ過ぎです <tt>:-)</tt>

raidenさんのコメント
a-kuma3さん また質問させてもらっていいですか? どうメッセージを送ればいいのか分からなかったので、こちらを使ってしまいました。

a-kuma3さんのコメント
どうぞ。 ぼくに分かることであれば。

raidenさんのコメント
うわ、相変わらずのはやさです・・・ 実はこのサイコロのスプリクト自体はうまく作動しているのですが、これをガラケー用のモバイルサイトに移設すると、ご存じのように携帯では動きません。 なにかアイディアはないでしょうか? もしはてなを使って質問した方がよければそうします。 どのような場合でももちろんポイントは送らせてもらいます。

a-kuma3さんのコメント
うーん、ガラケーかあ。 ページを遷移させるしか、ないかなあ。 +「サイコロをふる」ボタンを押したら、サイコロが回ってる画像を貼りつけたページに遷移する +決まった秒数で、サイコロが止まった画像を貼りつけたページに遷移する +サイコロが止まったページでは、乱数を使ってサイコロの出目の画像を決める >> もしはてなを使って質問した方がよければそうします。 どのような場合でももちろんポイントは送らせてもらいます。 << この類の質問が好きな回答者は、何人か居るので、新しい質問にした方が、回答が集まるような気がします。 ポイントなしの質問でも、そこそこ回答が寄せられると思いますよ。 バッチリの回答がついたら、後でポイント送信をする、という手もあるのだし。

raidenさんのコメント
わかりました。そうしてみます。 いつもありがとうございます。

a-kuma3さんのコメント
お気遣い、ありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ