8日目：ゲーム画面をプログラムで生成する

8日目です。今回は6日目のプログラムからの派生です。これまではオリジナルのTEN -10-と同様に横4つ、縦6つの数字を配置していました。これはHTMLに直接書いていましたが、今回からはプログラムで生成することにします。プログラムで生成すると横10×縦20とか、任意のサイズを生成できるというメリットがあります。HTMLファイルに書いてしまうと基本的に固定ですが、プログラムなら簡単にサイズ変更したりできて楽です。
さて、どうやってプログラムでHTMLを生成するかですが、DOM生成するメソッドとか難しい事はやりません。一番簡単なHTMLの文字列をそのまま連結していって最後にinnerHTMLで出力するという方法にします。DOM関係（appendChild()とかもろもろ）の命令でやる時間があったら、HTML文字列生成した方が吉です。というのも、最終仕様が決定していない場合は、手軽にテストできる方が優先かなあ、と。特にゲームの場合は、ゲームバランスとの兼ね合いもあったりで最初から面倒な事をやってしまうと後々、やる気が失せますので。
HTML文字列の生成はfor()を使って縦横に出力するだけ繰り返します。以下のプログラムだと// -----　ステージを動的に生成する　------から// ------　ここまで　------の部分になります。他のプログラムは変更なしです。生成してしまえば、あとは同じプログラムで動くということです。
var w = 4とvar h = 6の数値を変えれば好きなステージサイズにできます。変更した場合、こんな感じにできます。これでも、ちゃんとゲームとして動作します。凄く単純作業でつまらないゲームになりますが・・・



ということで、さすがにこれではつまらなさすぎるので、次回はオリジナルのTEN -10-と同様に時間制限を付けてみたいと思います。

[サンプルを実行する]

[サンプルをダウンロード]

HTMLファイルの内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEN</title>
<style>
input { width:48px; height: 48px; background-color: white; font-size: 24pt; }
#clearMsg { position : absolute; left: 10px; top: 200px; font-size: 18pt; color: red; visibility: hidden; }
</style>
</head>
<body>
<h1>TEN</h1>
<div>SCORE : <span id="score">0</span></div>
<div id="stage"></div>
<div id="msg"></div>
<div id="clearMsg">ステージクリア!</div>
<script src="main.js"></script>
</body>
</html>

JavaScriptファイル (main.js) の内容

// TEN HTML5 version
// (c) 2014 Cybermuse
// Arranger 古籏一浩
var score = 0;			// スコア（得点）を入れる変数
var count = 0;		// ボタンの合計を入れる変数
var prevNumber = 0;	// 直前にクリックした数字を入れる変数
var prevEle = null;		// 直前にクリックした要素を入れる変数
// 初期化処理
function init(){
	// -----　ステージを動的に生成する　------
	var w = 4;	// ●横の数字の個数
	var h = 6;	// ●縦の数字の個数
	var htmlString = "";
	for(var j=0; j<h; j++){
		for(var i=0; i<w; i++){
			htmlString = htmlString + '<input type="button">'; 
		}
		htmlString = htmlString + '<br>';
	}
	document.getElementById("stage").innerHTML = htmlString;
	// ------　ここまで　------
	var ele = document.querySelectorAll("input");	// クリックしたら処理するようにイベントを設定
	for(var i=0; i<ele.length; i++){	// 要素の数だけ繰り返す
		ele[i].onclick = addNumber;	// クリック時に呼び出す関数を指定する
	}
	count = ele.length;	// input要素の総数を入れる
	setRandomValue(ele);	// input要素の数を渡す
}
// ランダムに値を設定する関数
function setRandomValue(ele){
	var len = ele.length;	// input要素の総数
	// input要素にランダムな値を設定する
	var num = [ ];
	for(var i=0; i<len; i+=2){	// 要素の数だけ繰り返す
		var n = Math.floor(Math.random() * 9) + 1;	// 1〜9までの数値をランダムに生成する
		num.push(n);
		num.push(10 - n);
	}
	// 配列要素をele.length回シャッフルする
	for(var i=0; i<len; i++){
		var p1 = Math.floor(Math.random() * len);	// input要素の数の範囲で乱数を発生させる
		var p2 = Math.floor(Math.random() * len);	// input要素の数の範囲で乱数を発生させる
		var n = num[p1];	// 2つの要素の内容を入れ替える
		num[p1] = num[p2];
		num[p2] = n;
	}
	// input要素に値を設定する
	for(var i=0; i<len; i++){	// 要素の数だけ繰り返す
		ele[i].value = num[i];	// 値を設定する
	}
}
// 2つの数字の合計が10かどうか調べる
function addNumber(){
	// 1個目のクリックの場合
	if (prevNumber === 0){
		prevEle = this;	// 要素の情報を変数に入れる
		prevEle.style.backgroundColor = "red";	// 背景を赤色にする
		prevNumber = parseInt(this.value);	// クリックされた要素の番号を変数に入れる
		return;	// 関数から抜ける
	}
	// 2個目のクリックの場合
	var total = prevNumber + parseInt(this.value);	// 直前の数値とクリックされた要素の数値を加算する
	if (total === 10){	// 合計が10の場合の処理
		this.style.visibility = "hidden";	// 現在の要素を非表示にする
		prevEle.style.visibility = "hidden";	// 前の要素を非表示にする
		prevNumber = 0;	// 数値を0にする
		document.getElementById("msg").innerHTML = "OK!";	// メッセージを表示する
		score = score + 1;	// スコア（得点）を追加する
		document.getElementById("score").innerHTML = score;	// スコア（得点）を表示する
		count = count - 2;	// 合計から2を引く
		if (count === 0){	// 全部消したかどうか調べる
			document.getElementById("clearMsg").style.visibility = "visible";	// ステージクリアメッセージを表示する
			setTimeout(function(){	// 2秒後に表示されているメッセージを消すためのタイマー
				document.getElementById("clearMsg").style.visibility = "hidden";	// ステージクリアメッセージを消す
				var ele = document.querySelectorAll("input");	// input要素を取得する
				setRandomValue(ele);	// 乱数値を設定する
				for(var i=0; i<ele.length; i++){
					ele[i].style.visibility = "visible";	// 表示する
					ele[i].style.backgroundColor = "";	// 透明にする
				}
				count = ele.length;	// input要素の総数を入れる
				document.getElementById("msg").innerHTML = "";	// メッセージをクリア
			}, 2000);
		}
		return;	// 関数から抜ける
	}
	// 合計が10でなかった場合
	prevNumber = 0;	// 数値を0にする
	prevEle.style.backgroundColor = "";	// 透明にする
	document.getElementById("msg").innerHTML = "合計が10じゃないよ！";	// メッセージを表示する
}
init();	// 初期化処理を呼び出す