【Web】ひんしねこ迷路

　2020年4月17日、この日は僕が一番好きなイラストレーターでありVTuberでもあるうちゅうねこさんの誕生日だ。その日に何かイラストとかを投稿しようかと思ったがイラストは描けないので他になにかないかと考えた。

　その時、うちゅーねこタイマーのように何か作ればいいじゃないかという考えに至り、何かを作ろうと思い立った。ただ、その時は4/15と期日まで残り２日という状態。大掛かりなことは何もできないなと思いながらも何かないかなとネットを徘徊していた。

　そしたら、たまたま[ canvas ]要素についての記事が出てきて、「今までやったことないものだな、やってみようか」といった軽い感じでこれで何が作ろうと調べ始めた。

──────────

-canvas要素とは-

　canvas要素とは、HTML5以降のHTMLの一部で、動的な2次元ビットマップ画像の描画のためのHTML要素。

(Wikipediaより)

──────────

　色々調べていたら、これを使うとゲームが作れるということらしく、簡単なゲームを作ることにした。

　まずは、図形や画像、テキストの表示をさせるものを調べた。インターネット上にあるサンプルプログラムをお借りして、それを改造して埋め込んでみた。

　描画はサンプルプログラムをお借りしたのもあってすぐにできた。ただ、画像や図形、テキストが画面上に表示されるだけじゃゲームにはならない。キーボード操作をさせるために、キーボード入力を判別するようなサンプルプログラムをさがした。いくつか見つけたが、難しい書き方をしているものが多く、自身で改造するためにかろうじて何をしているのかわかるレベルの物を探した。

　なんとか見つけることができた。

──────────

function keybord() {

addEventListener("keydown", key, false);

}

function key(event) {

var key_code = event.keyCode;

switch (key_code) {

case 13: //Enter

　　　//Enterが押された時に実行される処理

break;

default:

　　　 //何か押されたが、caseのどれにも当てはまらなかった場合の処理

break;

}

──────────

と、こんな感じのプログラムだ。これなら、switch文の中身を書き換えるだけで処理が追加できるので、どこで何をしているのかがわかり、それでいて簡単に機能を追加することができるので、これを使うことにした。

　そして、肝心のどういったゲームにするかだが、１画面の迷路ゲームを作ることにした。理由は単純に他のゲームより作りやすそうだし、誰が見てもスタートからゴールまで行く、というルールがわかるからだ。

　4/17までは時間もなく、沢山凝ったゲームを作れるような技術力もないので、操作は矢印キーのみとし、単純な迷路、アイテムだとか制限時間だとかそういったものは一切入れていない本当にただの迷路を作ることにした。時間と技術が足りなかったからしかたないね。

　まず、プレイヤーが操作するキャラをどうするかと考えた。うちゅうねこさんの誕生日に合わせて作っているものだから、やっぱりうちゅうねこさんに関連したものを入れたいが、大きなイラストはあっても小さなイラストはなかった。色々考えていたら、うちゅうねこさんのオリジナルキャラである「ひんしねこ」は、小さいし丁度いいのではないかと思って試しに入れてみた。そしたら、ちょうどいい感じになったので、そのまま採用した。

　その後、迷路の道をどうするかということで、Excelを使って下書きをした。セルに色を塗りつぶしていくだけの作業だが。ただ、そこで１つ考えないといけないことができた。縦幅と横幅についてだ。基本的に壁は四角で曲線があるものや四角形以外の多角形は入れないつもりだったが、サイズをどうするかは決めていなかった。

　そこから、色々なサイズを考えた。元々、PC関連の知識は動画編集をきっかけに身に着けていったもので、画面サイズについては、解像度等も覚えていたので、それをベースに考えた。フルHD(1920×1080)は大きすぎるだろうということで、1280×720のサイズで作ることにした。そして、canvas要素についてまだ何も知らなかったので、今回はスマホへの対応は考えずにPCで動かすことを前提に作っていった。