canvasのy軸について

Question

if ( key.up === true ) {
let x = man.x/32;
let y = man.y/32;
if ( map[y][x] === 0 ) {
man.move = 32;
key.push = 'up';
}
}

canvasで1マス32pxで、20×20のmapを作って迷路を作っています。迷路の道を0、壁を1として1を主人公の男の子が歩くイメージです。mapは20個の配列×20で、map[y][x]で考えています。man.xやman.yの現在地は(32,64など)正確に出ているので、そこからx,yをだしてmapに入れて上下左右が0かチェックしています。
y軸のとき(upとdown)のときだけ、はみ出るとエラーになり、map内に戻そうとしても戻りません。

if ( key.up === true ) {
var x = rico.x/32;
var y = rico.y/32;
if ( y > 0) {
y--;
if ( map[y][x] === 0 ) {
rico.move = 32;
key.push = 'up';
}
}
}

y軸が関係するとき(up,down)このようにif(y > 0)をいれることで正常に動くようですが、なぜx軸(right,left)にはif(x > 0)としなくてよいのでしょうか。

プログラミング、質問ともに初心者であるため至らぬ点が多いと思いますがよろしくお願いします。
私の質問の仕方が悪く伝わらない場合、改善していきたいと思いますのでご指摘していただけると幸いです。

Comments

[Zuishin]

壁があるからじゃないですか？
知らないけど。
エスパー以外の人に伝わる質問かどうか読み直してみてください。

Answer 1

こたえ：インデックスの1次元目が範囲外になると、undefinedになり、2次元目のインデックスでアクセスできなくなるから。

具体例：
map[y] のindex「y」が範囲外になったとき、 map[y]はundefinedになる。
undefinedに対して インデックスでアクセスできないのでエラーになる。

たとえば map に -1というプロパティがない状態で
map[-1][0] とすると、map[-1]はundefinedになるから、map[-1][0]はundefined[0] を実行することになり、エラーが発生する。

一方、yが範囲内であれば、map[y]はインデックスでアクセスできるということなので、たとえ2次元目のxが範囲外であってもエラーにならない。
たとえばmap[5][-1] としても map[5]は正常な値を返し、map[5][-1]自体は undefined になるだけで、これ自体でエラーが発生するわけではない。
（後続の処理で map[5][-1]がundefinedになっていることによりエラーが発生するかもしれないがコードが示されて無いのでなんともいえない）

---

以下を実行してみるとわかりやすいかも

const map=[['a','b'],['c','d']];

console.log(map[0][-1]);
>>> undefined

console.log(map[-1][0]);
>>> Uncaught TypeError: Cannot read properties of undefined (reading '0')  at <anonymous>:1:6

console.log(map[1][1000]);
>>> undefined

console.log(map[1000][1]);
>>> Uncaught TypeError: Cannot read properties of undefined (reading '1')  at <anonymous>:1:19

Comments

[退会済みユーザー]

拙い質問文であるにも関わらず意味を汲み取ってくださり、まさに知りたいことでした。具体例で実行することでよりわかりやすかったです。ありがとうございました。

Answer 2

y--;

これがあるからでは