Help us understand the problem. What is going on with this article?

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

元風俗嬢のゆりなです。

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

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

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

言語は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変数を使ってゲーム画面全体に黒色の矩形を描画しています。

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

p01.png

タイトル画面

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

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

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);

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

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

p02.png

キー入力

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

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

このゲームでは選択肢を選択する場合には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;
    }
}

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした