オブジェクト指向っぽくオセロを作る9

JavaScript

続き。Viewオブジェクトにメッセージを表示するためのメソッドmessageを実装します。画面に文字を表示するということで、DOM要素を操作する必要があります。

htmlをいじる

まずはこのスクリプトを実行するhtmlにメッセージを表示するエリアを作成します。

<div id="othello">

	…

	<div id="message"></div>
</div>

このidがmessageのdiv要素中にメッセージを含んだdiv要素を追加していきます。またメッセージの表示件数が多すぎると見難くなるので、メッセージの表示数を5件にしておきましょう。5件を超えると、古いものから削除していきます。

<div id="message">
	<div>新しいものほど上にくる</div>
	<div>メッセージ4</div>
	<div>メッセージ3</div>
	<div>メッセージ2</div>
	<div>メッセージ1</div>
</div>

そしてこれを操作するメソッドをViewオブジェクトに追加します。

/**
 * メッセージを描写するための関数(外部公開)
 * @str メッセージ
 * @br 改行するかどうか.改行しない場合はfalse,改行する場合はtrueを渡す.デフォルトではtrueとなる.
 */
function message(str, br) {
	if (br == undefined) br = true;
	var mes_dom = document.getElementById("message");
	// memo. メッセージの数. 値を保存するためにmessageオブジェクトのプロパティとして定義
	arguments.callee.mes_num = arguments.callee.mes_num || 0;
	if (br) { //改行する場合
		arguments.callee.mes_num++;
		if (5 < arguments.callee.mes_num) { // メッセージの上限を5とし、それ以上になると古いものから削除
			mes_dom.removeChild(mes_dom.lastChild);
		}
		//最新のメッセージを一番上に追加
		mes_dom.innerHTML = "<div>" + str + "</div>" + mes_dom.innerHTML;
	} else { //改行しない場合
		var recent = mes_dom.firstChild;
		if (recent) { //最新のメッセージの尻につけたす
			recent.innerHTML += str;
		} else { //メッセージが一件もないということなので、改行をtrueにして再帰呼び出し.
			arguments.callee(str, true);
		}
	}
}
View.message = message; //外部からアクセスできるようにする

使い方は以下のようになります。今までalert()を使っていた部分をviewオブジェクトのmessageメソッドを参照するようにすればokです。

var view = View;

view.message("先行は"+turn+"("+turn.getPiece()+")です。"); //先行は御坂美琴(黒)です。

…

view.message(turn+"("+piece+")の番");//御坂美琴(黒)の番

…

view.message("["+pieceNum + "個]",false); //これは改行しない

これを使うと次のような感じになります。だいぶ見た目がよくなりました。

次回は

コンピューターのプレイヤーを作っていきます。