元風俗嬢のゆりなです。
風俗嬢をやったら精神がボロボロになってしまったので、ちょっと簡単なゲームでも作ってリフレッシュすることにします。
私はローグライクゲームが好きなのと、割と簡単に作れるゲームと言えばローグライクゲームかなと思うので、ローグライクゲームを作ってみることにします。
ゲームのタイトルはとりあえず「シンプルローグライク」ということにしておきましょう。
言語はJavaScriptで、ブラウザで簡単に動くように1つの<canvas>要素の中でゲームを作っていくことにします。
プログラム
今回作ったプログラムはhttp://yurinya.net/roguelike2019/1/srl.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を下のようにします。
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変数を使ってゲーム画面全体に黒色の矩形を描画しています。
これで真っ黒な画面が表示されます。
タイトル画面
ゲームを開いたらタイトル画面が表示されるようにします。
ゲームのタイトルを表す変数を追加します。
var TITLE = 'シンプルローグライク';
ゲームのタイトル画面の選択肢を表す変数を追加します。
var TEXT_START = 'はじめる';
draw関数に以下のコードを追加します。
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);
これでシンプルなタイトル画面が表示されます。
今のところ「はじめる」という選択肢しかありません。
キー入力
タイトル画面の唯一の選択肢である「はじめる」を選択できるようにしましょう。
そのためにはキー入力の処理を行う必要があります。
このゲームでは選択肢を選択する場合にはzキーを使うことにします。
var c = $('body');
c.on('keydown', function (e) {
if (e.keyCode === 90) {
//something
}
});
このようなコードを追加し、somethingの部分に処理を追加します。
タイトル画面でzキーが押された場合、新しいゲームを開始し、再描画を行わなければなりません。
ゲームが開始しているかどうかを管理するためにstartfというフラグを追加します。
var startf = false;
上のsomethingの部分にコードを追加します。
c.on('keydown', function (e) {
if (!startf) {
if (e.keyCode === 90) {
startf = true;
init();
draw(con);
}
return;
}
});
フラグの値をtrueにし、新しいゲームを開始するinit関数を呼び出し、draw関数を呼び出します。
とりあえずinit関数は空にしておきます（init関数の中身は次回以降実装します）。
function init () {
}
そして、draw関数を下のように書き換えます。
startfフラグがfalseの時のみタイトル画面を描画するようにします。
ゲーム開始後の画面の描画は次回以降実装します。
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は下のようになりました。
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;
}
}
次回はダンジョン・プレイヤーの生成と描画を行いたいと思います。