JavaScript：サイコロを振る

サイコロの目を表示するようなプログラムは、乱数を使ってできます。
1から6までの数値を適当に表示するだけなら、どんなプログラミング言語でもある程度簡単にできます。

JavaScriptで「サイコロを振る」を再現した

C言語なら、

#include <stdio.h>
#include <stdlib.h>
#include <time.h>

int main(void)
{
	int sai;
	srand((unsigned)time(NULL));
	
	sai = rand() % 6 + 1;
	printf("%d\n", sai);
	
	return 0;
}

のように記述します。

10行目の部分で、乱数（適当な数）を6で割ったあまりを求め（あまりはこの場合、0から5になる）その数に1を加算して1から6の数値を得ています。
C言語の乱数は整数のためこうします。

JavaScriptであれば、

var sai = Math.floor(Math.random() * 6) + 1;
console.log(sai);

でコンソール画面に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では、数値と文字列を連結すると文字列になるというゆるい規則があるので、これを利用します。

	var sai = Math.floor(Math.random() * 6) + 1;		// 1から6までの適当な数字
	sai = sai + ".png";							// 画像ファイル名生成

要するに、数値をファイル名にして画像形式（今回の例ではPNG形式）で保存しておき、1から6の数値のあとに対応する拡張子（この場合は、「.png」）の文字列を連結すればサイコロの数値に対応する画像になります。例えば、サイコロの1が出たら画像ファイル「1.png」を表示すると言う具合に。

サンプルでは、サイコロを振ったように見せるため少しの時間だけ適当に表示するようにしています。setTimeout関数をうまく使うと実現できます。

プログラム全体を以下に示します。
ダウンロードはこちらです。

メモ帳などで、main.jsを編集して改良してみてください。
画像ファイルを自作するなどするところから始めてもいいと思います。
サイコロだけ振ってもつまらないので、何かに応用できるといいですね。

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="Shift_JIS">
	<link rel="stylesheet" href="mystyle.css">
	<script src="main.js"></script>
	<title>Sai</title>
</head>
<body>
	<p><input type="button" id="btn" value="サイコロを振る" onclick="saikoro()"></p>
	<div id="saikoro"></div>
</body>
</html>

CSS部分（特に必要はないです）

/* mystyle.css */
*{
	margin: 0;
	padding: 0;
}
body{
	margin: 20px;
	background: #ddd;
}
div{
	margin: 1em;
}

JavaScript部分

/*
 * main.js サイコロを振るプログラム
 */
var count;	// 変化しているように見せる回数
var $id = function(id){ return document.getElementById(id); };

/*
 * サイコロを振る
 */
function shake(){
	var sai = Math.floor(Math.random() * 6) + 1;		// 1から6までの適当な数字
	sai = sai + ".png";							// 画像ファイル名生成
	$id("saikoro").innerHTML = "<img src='" + sai + "' width='64' height='64'>";
}

/*
 * サイコロを振るときのアニメーション
 */
function anime(){
	if(count > 20){	// 適当に20回ほど振る
		count = 0;
		$id("btn").disabled = "";	// ボタンを使える状態にする
		return 0;
	}
	shake();
	count++;
	setTimeout(anime, 50);	// 50ミリ秒間隔で表示切り替え
}

function saikoro(){
	count = 0;
	$id("btn").disabled = "true";	// ボタンを使用不可にする
	anime();						// サイコロアニメ開始
}

/*
 * 起動時の処理
 */
window.onload = function(){
	shake();		// 一回だけサイコロを振る
}