ローグライクゲームを作ってみるその1 タイトル画面

元風俗嬢のゆりなです。

風俗嬢をやったら精神がボロボロになってしまったので、ちょっと簡単なゲームでも作ってリフレッシュすることにします。

私はローグライクゲームが好きなのと、割と簡単に作れるゲームと言えばローグライクゲームかなと思うので、ローグライクゲームを作ってみることにします。

ゲームのタイトルはとりあえず「シンプルローグライク」ということにしておきましょう。

言語はJavaScriptで、ブラウザで簡単に動くように1つの`<canvas>`要素の中でゲームを作っていくことにします。

### プログラム

今回作ったプログラムは[http://yurinya.net/roguelike2019/1/srl.html](http://yurinya.net/roguelike2019/1/srl.html)で公開しています。良かったらアクセスしてみてください！

### HTML

まずはHTMLを記述します。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>シンプルローグライク</title>
</head>
<script src="jquery.min.js"></script>
<script src="game.js"></script>
<body>
	<canvas id="game" width="1600" height="800" tabindex="1"></canvas>
</body>
</html>
```

何の変哲もないHTML5です。

jQueryを利用しますので、`<script>`タグで`jquery.min.js`を読み込んでいます。

また、同様に`<script>`タグで`game.js`を読み込むようにします。

この`game.js`にゲームのプログラムを書いていくことにします。

そして、`<body>`要素の中に`<canvas>`要素を1つ追加しています。この`<canvas>`要素にゲーム画面を描画します。大きさは固定で幅`1600`、高さ`800`としました。

それから、重要なのは、`<canvas>`要素に`tabindex`属性を設定していることです。

`<canvas>`要素はデフォルトではキー入力を受け付けませんが、ゲーム画面ではキー入力を受け付ける必要がありますので、`tabindex`属性を設定することによってキー入力を受け付けるようにします。

### 真っ黒な画面

まず真っ黒な画面を描画してみましょう。

`game.js`を下のようにします。

```js
var SCREEN_X = 1600;
var SCREEN_Y = 800;

$(function(){
	var canvas = document.getElementById('game');
	var con = canvas.getContext('2d');

	draw(con);
});

function draw (con) {
	con.fillStyle = 'black';
	con.fillRect(0, 0, SCREEN_X, SCREEN_Y);
}
```

`SCREEN_X`変数と`SCREEN_Y`変数はそれぞれゲーム画面の幅と高さです。

`<canvas>`要素を取得し、`<canvas>`要素のコンテキストを取得し、`con`変数に格納します。

そして、`con`変数を第1引数として`draw`関数を呼び出します。

`draw`関数では引数として渡された`con`変数を使ってゲーム画面全体に黒色の矩形を描画しています。

これで真っ黒な画面が表示されます。

![p01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10969/6dd3fe67-dff7-9b06-f9fb-c84b5739aef1.png)

### タイトル画面

ゲームを開いたらタイトル画面が表示されるようにします。

ゲームのタイトルを表す変数を追加します。

```js
var TITLE = 'シンプルローグライク';
```

ゲームのタイトル画面の選択肢を表す変数を追加します。

```js
var TEXT_START = 'はじめる';
```

`draw`関数に以下のコードを追加します。

```js
		con.textBaseline = 'alphabetic';
		con.textAlign = 'center';
		con.fillStyle = 'white';

		con.font = "48px consolas";
		con.fillText(TITLE, SCREEN_X / 2, SCREEN_Y / 4);

		con.font = "32px consolas";
		con.fillText('> ' + TEXT_START, SCREEN_X / 2, SCREEN_Y / 4 * 3);
```

これでシンプルなタイトル画面が表示されます。

今のところ「はじめる」という選択肢しかありません。

![p02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10969/e6a4ba38-5561-3b3f-971e-bb8583a010b7.png)

### キー入力

タイトル画面の唯一の選択肢である「はじめる」を選択できるようにしましょう。

そのためにはキー入力の処理を行う必要があります。

このゲームでは選択肢を選択する場合には`z`キーを使うことにします。

```js
	var c = $('body');
	c.on('keydown', function (e) {
		if (e.keyCode === 90) {
			//something
		}
	});
```

このようなコードを追加し、somethingの部分に処理を追加します。

タイトル画面で`z`キーが押された場合、新しいゲームを開始し、再描画を行わなければなりません。

ゲームが開始しているかどうかを管理するために`startf`というフラグを追加します。

```js
var startf = false;
```

上のsomethingの部分にコードを追加します。

```js
	c.on('keydown', function (e) {
		if (!startf) {
			if (e.keyCode === 90) {
				startf = true;

				init();

				draw(con);
			}

			return;
		}
	});
```

フラグの値を`true`にし、新しいゲームを開始する`init`関数を呼び出し、`draw`関数を呼び出します。

とりあえず`init`関数は空にしておきます（`init`関数の中身は次回以降実装します）。

```js
function init () {
}
```

そして、`draw`関数を下のように書き換えます。

`startf`フラグが`false`の時のみタイトル画面を描画するようにします。

ゲーム開始後の画面の描画は次回以降実装します。

```js
function draw (con) {
	con.fillStyle = 'black';
	con.fillRect(0, 0, SCREEN_X, SCREEN_Y);

	if (!startf) {
		con.textBaseline = 'alphabetic';
		con.textAlign = 'center';
		con.fillStyle = 'white';

		con.font = "48px consolas";
		con.fillText(TITLE, SCREEN_X / 2, SCREEN_Y / 4);

		con.font = "32px consolas";
		con.fillText('> ' + TEXT_START, SCREEN_X / 2, SCREEN_Y / 4 * 3);

		return;
	}
}
```

### 今回はここまで

今回はここまでです。

`game.js`は下のようになりました。

```js
﻿var TITLE = 'シンプルローグライク';

var TEXT_START = 'はじめる';

var SCREEN_X = 1600;
var SCREEN_Y = 800;

var startf = false;

$(function(){
	var canvas = document.getElementById('game');
	var con = canvas.getContext('2d');

	var c = $('body');
	c.on('keydown', function (e) {
		if (!startf) {
			if (e.keyCode === 90) {
				startf = true;

				init();

				draw(con);
			}

			return;
		}
	});

	draw(con);
});

function init () {
}

function draw (con) {
	con.fillStyle = 'black';
	con.fillRect(0, 0, SCREEN_X, SCREEN_Y);

	if (!startf) {
		con.textBaseline = 'alphabetic';
		con.textAlign = 'center';
		con.fillStyle = 'white';

		con.font = "48px consolas";
		con.fillText(TITLE, SCREEN_X / 2, SCREEN_Y / 4);

		con.font = "32px consolas";
		con.fillText('> ' + TEXT_START, SCREEN_X / 2, SCREEN_Y / 4 * 3);

		return;
	}
}
```

次回はダンジョン・プレイヤーの生成と描画を行いたいと思います。