スロットマシーン

javascriptを使用したタイトルページの例です
ここでは簡易スロットマシーンを作ってみました。
Startを押すと数字が動きはじめ、
stopを押す度に一桁ずつ止まります。

【JavaScriptのポイント】

スロットマシーン

数字のImageはnew Image()を使って予め読み込ませておきます。
スロットマシーンの絵を分解しstartボタン、stopボタン、3桁の数字の部分を独立したImageにします。
startボタンの絵にはfunction PushStart()へのリンクを張り、ここがクリックされるとPushStart()関数は startボタンの絵を下げた後 300ms後にStart()を呼びます。
Start()関数ではstartの絵を戻した後 3桁の数字の初期値1～7を乱数で求め、100msのタイマーを起動します。以降100ms毎にChangeSlot()関数が呼ばれます。
ChangeSlot()関数は動いている数字につき1進めます。
stopボタンの絵にはfunction Stop()へのリンクを張り、ここがクリックされると変数contに1を加えることで数字を一つ止めます。contが0なら全数字が変化し3なら全てが止まった状態です。contが3になった時に幾つの数字が一致しているかを調べ結果に応じたメッセージを表示します。