Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
14
Help us understand the problem. What is going on with this article?
@pizyumi

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

More than 1 year has passed since last update.

元風俗嬢のゆりなです。

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

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

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

言語は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;
    }
}

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

14
Help us understand the problem. What is going on with this article?
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
pizyumi
トランスジェンダー。性同一性障害(MtF)診断済。睾丸摘出済。歌舞伎町のニューハーフヘルスに在籍していた元風俗嬢です。風俗嬢をしたら精神がボロボロになってどん底です。プログラミング歴20年超。プログラマ。ITエンジニア。投資家。当面は趣味の形式化数学の記事を書きます。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
14
Help us understand the problem. What is going on with this article?