諏訪野ヒロの創作・制作活動記

【Web】ひんしねこ迷路 #2

　そこから、Excelで迷路のマップを作り、それを見ながら１つずつ手作業で座標を入力してマップを作っていった。１列ごとに反映させていって、３列くらい作ったタイミングで自機を動かしてみようと自機を入れ込んで動かせるようにしてみた。

　まず、それぞれの座標をさっき作ったExcelのデータに書き加えてすぐに座標が分かるようにし、加えてcanvas内にも現在の自機の座標を見えるようにして壁の判定を作っていった。

　しかし、しっかりと判定を入れ込んだはずなのに、壁を抜けることができてしまったり、逆に壁ではないところで進めなくなってしまったり、道の判定がすごく狭く操作がものすごくしにくかったりと沢山の問題が出てきた。

　どうにかできないものかと、色々と試行錯誤しながらやってみたが、どうもうまく行かない。そこで、自機の操作方法そのものをいじることにした。

　これまで、自機の動きは普通のゲームのように、キーを押したら押しただけスムーズに動くようにしていた。ただそれを１回キーを押したら１ブロック分だけ動くように変えた。これにより、自機の座標は固定され、決められた値の所のみに表示されるようになり、簡単に制御できるのではないかと考えた。

　その予想は大当たりで、これまで起きていた問題を全て解決できた。移動するたびにキーを押さないといけないので、操作感は少し悪いが、初めてだし妥協した。

　しかし、そこでまた新たな問題が発生した。それは、X軸とY軸を同時に判別し、それによって移動方向を制限するということだ。普通にif文でX軸とY軸同時に判別しようとすると、例えばX軸が100でY軸が50の時には

if(x == 100 && y == 50)

なんて２つも書かなければならない。これだと面倒な上に行動可能な全ての部分にそれを書いていると多くなりすぎてしまうと思い、どうにかまとめることはできないかと考えた。

　そこで思いついたのが、X軸を1000倍し、それにY軸の値を足す、というものだ。画面サイズは1280×720と決まっているので、Y軸は3桁を超えることが絶対にない。ということで、X軸を1000倍した値にY軸の値を足してしまえば１つの値で判別ができると考えた。そうすると、先程例で挙げた座標を今回考えた方法で表すなら、

var z = (x * 1000) + y;

if(z == 100050)

ということになり、２つ条件が必要だったものが１つで済むようになった。

　そこから、行動可能な部分の座標になった場合、上下左右、どのキーを入力を受け付けるのか、座標ベースで全て書いていった。以下は実際に書いて、現在公開されているひんしねこ迷路の行動範囲に関連する条件文だ。

━━━━━━━━

a = (hinsi_neko.x * 1000) + (hinsi_neko.y);

/*　下　*/

if (a == 0 || a == 132385 || a == 396550 || a == 1056275) {

downs = 1;

}

/*　上　下　*/

if (a == 55 || a == 110 || a == 330 || a == 385 || a == 495 || a == 605 || a == 132055 || a == 132110 || a == 132220 || a == 264165 || a == 264115 || a == 264275 || a == 264330 || a == 264385 || a == 264440 || a == 264495 || a == 330055 || a == 396385 || a == 462165 || a == 528055 || a == 528495 || a == 528550 || a == 660110 || a == 660165 || a == 726550 || a == 726605 || a == 792220 || a == 924220 || a == 924275 || a == 990110 || a == 1188055 || a == 1188110 || a == 1188385 || a == 1188495 || a == 1188550 || a == 1188605) {

ups = 1;

downs = 1;

}

/*　上　右　*/

if (a == 165 || a == 660 || a == 396440 || a == 528605 || a == 594660 || a == 660385 || a == 924055 || a == 1056330) {

ups = 1;

rights = 1;

}

/*　下　右　*/

if (a == 275 || a == 132000 || a == 264110 || a == 330605 || a == 396330 || a == 462110 || a == 726495 || a == 792000 || a == 792165 || a == 858330 || a == 858605 || a == 924440 || a == 990550 || a == 1056000) {

rights = 1;

downs = 1;

}

/*　上　下　右　*/

if (a == 440 || a == 550 || a == 264220 || a == 660055) {

ups = 1;

downs = 1;

rights = 1;

}

/*　左　右　*/

if (a == 66165 || a == 66275 || a == 66440 || a == 66550 || a == 66660 || a == 132550 || a == 132660 || a == 198000 || a == 198550 || a == 198660 || a == 264000 || a == 264660 || a == 330220 || a == 396220 || a == 462330 || a == 462440 || a == 528330 || a == 594000 || a == 594330 || a == 660660 || a == 726055 || a == 726385 || a == 792385 || a == 792495 || a == 792660 || a == 858000 || a == 858165 || a == 858495 || a == 924605 || a == 990440 || a == 1056440 || a == 1122000 || a == 1122330 || a == 1122440) {

lefts = 1;

rights = 1;

}

/*　上　下　左　*/

if (a == 132165 || a == 990605 || a == 1188440) {

ups = 1;

downs = 1;

lefts = 1;

}

/*　上　左　*/

if (a == 132275 || a == 132440 || a == 264550 || a == 330110 || a == 330660 || a == 396605 || a == 462220 || a == 528110 || a == 660220 || a == 792055 || a == 792275 || a == 858385 || a == 858660 || a == 924330 || a == 924495 || a == 990165 || a == 1056055 || a == 1188165) {

ups = 1;

lefts = 1;

}

/*　下　左　*/

if (a == 330000 || a == 528440 || a == 594605 || a == 660000 || a == 660330 || a == 924000 || a == 1188000 || a == 1188330) {

downs = 1;

lefts = 1;

}

/*　右　*/

if (a == 462000 || a == 594220 || a == 726275 || a == 1122165) {

rights = 1;

}

/*　下　左　右　*/

if (a == 528000 || a == 924165 || a == 990055) {

downs = 1;

lefts = 1;

rights = 1;

}

/*　上　左　右　*/

if (a == 726660) {

ups = 1;

lefts = 1;

rights = 1;

}

/*　上　*/

if (a == 990660) {

ups = 1;

}

/*　左　*/

if (a == 1056550) {

lefts = 1;

}

━━━━━━━━

　今思うと、よくぞこんなにも１つ１つ書いたものだよなぁと思う。後ほど書くが、今同じものを作るなら、２次元配列を使用してもっと簡単に制御できるようにする所だが、当時はそこまで考えが及ばなかったのだろう。

　ちなみに、壁の表示については、こんな感じに

━━━━━━━━

//迷路の壁表示

ctx.drawImage(wall.img, 0, 220);

ctx.drawImage(wall.img, 66, 0);

ctx.drawImage(wall.img, 66, 55);

ctx.drawImage(wall.img, 66, 110);

ctx.drawImage(wall.img, 66, 220);

ctx.drawImage(wall.img, 66, 330);

ctx.drawImage(wall.img, 66, 385);

ctx.drawImage(wall.img, 66, 495);

ctx.drawImage(wall.img, 66, 605);

ctx.drawImage(wall.img, 132, 330);

ctx.drawImage(wall.img, 132, 495);

ctx.drawImage(wall.img, 132, 605);

ctx.drawImage(wall.img, 198, 55);

ctx.drawImage(wall.img, 198, 110);

ctx.drawImage(wall.img, 198, 165);

ctx.drawImage(wall.img, 198, 220);

ctx.drawImage(wall.img, 198, 275);

ctx.drawImage(wall.img, 198, 330);

ctx.drawImage(wall.img, 198, 385);

ctx.drawImage(wall.img, 198, 440);

ctx.drawImage(wall.img, 198, 495);

ctx.drawImage(wall.img, 198, 605);

ctx.drawImage(wall.img, 264, 55);

ctx.drawImage(wall.img, 264, 605);

ctx.drawImage(wall.img, 330, 165);

ctx.drawImage(wall.img, 330, 275);

ctx.drawImage(wall.img, 330, 330);

ctx.drawImage(wall.img, 330, 385);

ctx.drawImage(wall.img, 330, 440);

ctx.drawImage(wall.img, 330, 495);

ctx.drawImage(wall.img, 330, 550);

ctx.drawImage(wall.img, 396, 0);

ctx.drawImage(wall.img, 396, 55);

ctx.drawImage(wall.img, 396, 110);

ctx.drawImage(wall.img, 396, 165);

ctx.drawImage(wall.img, 396, 275);

ctx.drawImage(wall.img, 396, 495);

ctx.drawImage(wall.img, 396, 660);

ctx.drawImage(wall.img, 462, 55);

ctx.drawImage(wall.img, 462, 275);

ctx.drawImage(wall.img, 462, 385);

ctx.drawImage(wall.img, 462, 495);

ctx.drawImage(wall.img, 462, 550);

ctx.drawImage(wall.img, 462, 605);

ctx.drawImage(wall.img, 462, 660);

ctx.drawImage(wall.img, 528, 165);

ctx.drawImage(wall.img, 528, 220);

ctx.drawImage(wall.img, 528, 275);

ctx.drawImage(wall.img, 528, 385);

ctx.drawImage(wall.img, 528, 660);

ctx.drawImage(wall.img, 594, 55);

ctx.drawImage(wall.img, 594, 110);

ctx.drawImage(wall.img, 594, 165);

ctx.drawImage(wall.img, 594, 275);

ctx.drawImage(wall.img, 594, 385);

ctx.drawImage(wall.img, 594, 440);

ctx.drawImage(wall.img, 594, 495);

ctx.drawImage(wall.img, 594, 550);

ctx.drawImage(wall.img, 660, 275);

ctx.drawImage(wall.img, 660, 440);

ctx.drawImage(wall.img, 660, 495);

ctx.drawImage(wall.img, 660, 550);

ctx.drawImage(wall.img, 660, 605);

ctx.drawImage(wall.img, 726, 0);

ctx.drawImage(wall.img, 726, 110);

ctx.drawImage(wall.img, 726, 165);

ctx.drawImage(wall.img, 726, 220);

ctx.drawImage(wall.img, 726, 330);

ctx.drawImage(wall.img, 726, 440);

ctx.drawImage(wall.img, 792, 110);

ctx.drawImage(wall.img, 792, 330);

ctx.drawImage(wall.img, 792, 440);

ctx.drawImage(wall.img, 792, 550);

ctx.drawImage(wall.img, 792, 605);

ctx.drawImage(wall.img, 858, 55);

ctx.drawImage(wall.img, 858, 110);

ctx.drawImage(wall.img, 858, 220);

ctx.drawImage(wall.img, 858, 275);

ctx.drawImage(wall.img, 858, 440);

ctx.drawImage(wall.img, 858, 550);

ctx.drawImage(wall.img, 924, 110);

ctx.drawImage(wall.img, 924, 385);

ctx.drawImage(wall.img, 924, 550);

ctx.drawImage(wall.img, 924, 660);

ctx.drawImage(wall.img, 990, 0);

ctx.drawImage(wall.img, 990, 220);

ctx.drawImage(wall.img, 990, 275);

ctx.drawImage(wall.img, 990, 330);

ctx.drawImage(wall.img, 990, 385);

ctx.drawImage(wall.img, 990, 495);

ctx.drawImage(wall.img, 1056, 110);

ctx.drawImage(wall.img, 1056, 165);

ctx.drawImage(wall.img, 1056, 220);

ctx.drawImage(wall.img, 1056, 385);

ctx.drawImage(wall.img, 1056, 495);

ctx.drawImage(wall.img, 1056, 605);

ctx.drawImage(wall.img, 1056, 660);

ctx.drawImage(wall.img, 1122, 55);

ctx.drawImage(wall.img, 1122, 110);

ctx.drawImage(wall.img, 1122, 220);

ctx.drawImage(wall.img, 1122, 275);

ctx.drawImage(wall.img, 1122, 385);

ctx.drawImage(wall.img, 1122, 495);

ctx.drawImage(wall.img, 1122, 550);

ctx.drawImage(wall.img, 1122, 605);

ctx.drawImage(wall.img, 1122, 660);

ctx.drawImage(wall.img, 1188, 220);

ctx.drawImage(wall.img, 1188, 275);

━━━━━━━━

　これに関しても１つ１つ書いていった。これも、実際に今使われている文をそのまま貼り付けたものだ。

　この単純な作業だけでかなりの時間がかかった。

　だが、これが終わってしまえば後は見た目を整えるだけ。軽く操作方法について書いて、完成した。