サイコロの目を表示するようなプログラムは、乱数を使ってできます。
1から6までの数値を適当に表示するだけなら、どんなプログラミング言語でもある程度簡単にできます。
JavaScriptで「サイコロを振る」を再現した
C言語なら、
8 | srand ((unsigned) time (NULL)); |
のように記述します。
10行目の部分で、乱数(適当な数)を6で割ったあまりを求め(あまりはこの場合、0から5になる)その数に1を加算して1から6の数値を得ています。
C言語の乱数は整数のためこうします。
JavaScriptであれば、
1 | var sai = Math.floor(Math.random() * 6) + 1; |
でコンソール画面に1から6の数値が、出力できます。
JavaScriptの乱数(Math.random()で発生できる)は、0から1未満の実数のため、乱数に6を掛けて0から5.999999999…までの実数を作成してから整数に直し(Math.floor()でくくる)0から5を生成します。その後、1を足せば、1から6の数値を得ることができます。
これだけだと味気ないので、サイコロ画像を作っておいて、生成した1から6の数値に応じて対象の画像を表示させるようにしてみました。
作った画像ファイルと画像ファイル名は以下のとおり。
 |
 |
 |
 |
 |
 |
1.png |
2.png |
3.png |
4.png |
5.png |
6.png |
ちなみに、このサイコロ画像は、Paint.NETというフリーソフトを使って作りました。
縦横64ピクセルの正方形画像です。
微妙に四隅がまるくなっているので、透明色を使って画面に表示したとき違和感がないように作っています。
画像を描いた後、Paint.NETの「魔法の杖」というツールで選択して削除すると透明色になります。わたしは、PNG形式の画像を作るときはよくこの「魔法の杖」を使っています。まさに魔法!
話を戻します。
JavaScriptでは、数値と文字列を連結すると文字列になるというゆるい規則があるので、これを利用します。
1 | var sai = Math.floor(Math.random() * 6) + 1; |
要するに、数値をファイル名にして画像形式(今回の例ではPNG形式)で保存しておき、1から6の数値のあとに対応する拡張子(この場合は、「.png」)の文字列を連結すればサイコロの数値に対応する画像になります。例えば、サイコロの1が出たら画像ファイル「1.png」を表示すると言う具合に。
サンプルでは、サイコロを振ったように見せるため少しの時間だけ適当に表示するようにしています。setTimeout関数をうまく使うと実現できます。
プログラム全体を以下に示します。
ダウンロードはこちらです。
メモ帳などで、main.jsを編集して改良してみてください。
画像ファイルを自作するなどするところから始めてもいいと思います。
サイコロだけ振ってもつまらないので、何かに応用できるといいですね。
index.html
4 | < meta charset = "Shift_JIS" > |
5 | < link rel = "stylesheet" href = "mystyle.css" > |
6 | < script src = "main.js" ></ script > |
10 | < p >< input type = "button" id = "btn" value = "サイコロを振る" onclick = "saikoro()" ></ p > |
11 | < div id = "saikoro" ></ div > |
CSS部分(特に必要はないです)
JavaScript部分
5 | var $id = function (id){ return document.getElementById(id); }; |
11 | var sai = Math.floor(Math.random() * 6) + 1; |
13 | $id( "saikoro" ).innerHTML = "<img src='" + sai + "' width='64' height='64'>" ; |
22 | $id( "btn" ).disabled = "" ; |
27 | setTimeout(anime, 50); |
32 | $id( "btn" ).disabled = "true" ; |
39 | window.onload = function (){ |
コメント
これがK博士の言っていた等確率の原理か。
ヘーゲルマルテンサイトさん、こんにちは。
「等確率の原理」とは何か知らなかったので調べてみたら難しく今年最大の謎となってしまいました。