アドベンチャーRPG用メッセージ表示ウインドウに続いて、複数の選択肢を表示し選択結果を取得できる選択ダイアログのJavaScriptクラスを作ってみました。ゲーム画面を描画するCanvasのコンテキストを渡すと、そこに現在の選択状態も含めダイアログを描画します。
これでマップ表示、メッセージ表示ウインドウ、選択ダイアログ……と簡単なゲーム描画の要素は一通りそろいましたね。
今回の選択ダイアログでは、カーソルキーとリターンキーによる操作としました。ダイアログが表示されているCanvasの領域をクリックすると、下の方にあるテキスト入力欄にフォーカスが移り操作可能になります。上下キーで適当な選択肢を選んで、リターンキーを押してみてください。
プログラムの構造は、メッセージ表示ウインドウと同じくaction()にキー入力の状態を渡して処理を行い、draw()で現在の状態を描画しています。
JavaScriptコードとHTMLは、以下のとおりです。
<script src="canvas_seldlg.js"></script>
<div style="text-align: center;" onclick="document.getElementById('focusFolder').focus()">
<canvas id="testCanvas" width="300" height="180" style="background: #0000cc;"></canvas><br>
<input type="text" id="focusFolder" onKeyDown="onKeyDown(event)" onKeyUp="onKeyUp(event)">
</div>
<script>
var testCanvas = document.getElementById('testCanvas');
var testContext;
var selDlg;
var key;
if (testCanvas.getContext) {
testContext = testCanvas.getContext('2d');
// 選択ダイアログ作成
selDlg = new SelectDialog();
selDlg.init();
selDlg.setItems(new Array("選択肢0", "選択肢1", "選択肢2", "選択肢3"), testContext);
selDlg.setPosition(40, 20);
selDlg.show();
key = 0;
loop();
}
function loop() {
// action()にキー状態を通知
selDlg.action(key);
// 選択されたら結果を表示
if (selDlg.status == selDlg.STATUS_SELECTED) {
alert("選択結果:" + selDlg.index);
return;
}
selDlg.draw(testContext);
// ループ
timer = setTimeout("loop()", 60);
}
function onKeyDown(e) {
// 上キー
if (e.keyCode == 38) {
e.preventDefault();
key |= 1;
}
// 下キー
if (e.keyCode == 40) {
e.preventDefault();
key |= 2;
}
// リターンキー
if (e.keyCode == 13) {
e.preventDefault();
key |= 4;
}
}
function onKeyUp(e) {
// 上キー
if (e.keyCode == 38) {
e.preventDefault();
key &= ~1;
}
// 下キー
if (e.keyCode == 40) {
e.preventDefault();
key &= ~2;
}
// リターンキー
if (e.keyCode == 13) {
e.preventDefault();
key &= ~4;
}
}
</script>今回は、選択肢の文字列に応じてウインドウのサイズを決定しましたが、実際のゲーム開発では選択肢のダイアログの大きさは固定として選択肢を内部に配置する際に適当にセンタリングする方式も考えられるでしょう。