javascript undefinedについて

発生している問題・エラーメッセージ

・chunk[count]がundefinedとなる
・console.log(splitDangeon(initChunk(16, 16)));がundefinedとなる

/workspace/Rouge-like:27
            let width = oldChunk.w - splitX;
                                 ^

TypeError: Cannot read properties of undefined (reading 'w')

該当のソースコード

javascript
1(function(){
2'use strict';
3
4const CHUNK_RANGE = 8;
5const CHUNK_SPLIT_MIN = 4;
6
7    let initChunk = (xChunkLoop, yChunkLoop) => {
8        let chunk = {
9            x:0,
10            y:0,
11            w:xChunkLoop,
12            h:yChunkLoop
13        };
14        let chunks = [chunk];
15        return chunks;
16    };
17    
18    let splitDangeon = (chunks, count = 0) => {
19    console.log(count)
20        let oldChunk = chunks[count];
21        if(Math.random() > 0.5) {//縦
22            let splitX = CHUNK_SPLIT_MIN;
23            for(let i = 0; Math.random() > i; i += 0.1) splitX++;
24
25            let width = oldChunk.w - splitX;
26            if(CHUNK_SPLIT_MIN < width){//チャンクが指定したサイズより小さくならないようにする
27                chunks[count + 1] = {//new chunk
28                    x:oldChunk.x,
29                    y:oldChunk.y,
30                    w:splitX,
31                    h:oldChunk.h
32                };
33                chunks[count] = {//old chunk
34                    x:splitX,
35                    y:oldChunk.y,
36                    w:width,
37                    h:oldChunk.h
38                };
39            }
40        } else {//横
41            let splitY = CHUNK_SPLIT_MIN;
42            for(let i = 0; Math.random() > i; i += 0.1) splitY++;
43
44            let height = oldChunk.h - splitY;
45            if(CHUNK_SPLIT_MIN < height){
46                chunks[count + 1] = {//new chunk
47                    x:oldChunk.x,
48                    y:oldChunk.y,
49                    w:oldChunk.w,
50                    h:splitY
51                };
52                chunks[count] = {//old chunk
53                    x:oldChunk.x,
54                    y:splitY,
55                    w:oldChunk.w,
56                    h:height
57                };
58            }
59        }
60        count++;
61        if(count < 10) {
62            splitDangeon(chunks, count);
63        } else {
64            console.log(chunks)
65            return chunks;
66            }
67        };
68        
69    console.log(splitDangeon(initChunk(16, 16)));
70    console.log('\n');
71
72})();

試したこと

console.logでcountの数を出力してみると、定義済みのkeyなのに
TypeError: Cannot read properties of undefined が出てしまう

回答2件

https://teratail.com/questions/guexi6p8deyckx
こちらについている回答がおすすめです。

投稿2022/09/19 16:26

._.

総合スコア150

ベストアンサー

console.log(count, chunks.length, chunks[count]) にしてみたところ、未定義のcountでしたよ。

js
10 1 { x: 0, y: 0, w: 16, h: 16 }
21 2 { x: 0, y: 0, w: 6, h: 16 }
32 2 undefined

修正案1：分割箇所が偏ってしまう懸念あり

js
1'use strict';
2
3const CHUNK_RANGE = 8;
4const CHUNK_SPLIT_MIN = 4;
5
6let initChunk = (xChunkLoop, yChunkLoop) => {
7    let chunk = {
8        x:0,
9        y:0,
10        w:xChunkLoop,
11        h:yChunkLoop
12    };
13    let chunks = [chunk];
14    return chunks;
15};
16
17let splitDangeon = (chunks, oldIndex = 0) => {
18    const newIndex = chunks.length;
19    const {x, y, w, h} = chunks[oldIndex];
20    if(Math.random() > 0.5) {//縦
21        let splitW = CHUNK_SPLIT_MIN;
22        for(let i = 0; Math.random() > i; i += 0.1) splitW++;
23
24        let width = w - splitW;
25        if(width < CHUNK_SPLIT_MIN){//チャンクが指定したサイズより小さくなったら分割しない
26            return chunks;
27        }
28        chunks[newIndex] = { x, y, w:splitW, h };
29        chunks[oldIndex] = { x:x+splitW, y, w:width, h };
30    } else {//横
31        let splitH = CHUNK_SPLIT_MIN;
32        for(let i = 0; Math.random() > i; i += 0.1) splitH++;
33
34        let height = h - splitH;
35        if(height < CHUNK_SPLIT_MIN){
36            return chunks;
37        }
38        chunks[newIndex] = { x, y, w, h:splitH };
39        chunks[oldIndex] = { x, y:y+splitH, w, h:height };
40    }
41    if(chunks.length < 10) {
42        chunks = splitDangeon(chunks, oldIndex);
43    }
44    if(chunks.length < 10) {
45        chunks = splitDangeon(chunks, newIndex);
46    }
47    return chunks;
48};
49
50const dump = (chunks, w, h) => {
51    console.log(chunks);
52    const width = Math.max(...chunks.map(chunk => chunk.x + chunk.w));
53    const height = Math.max(...chunks.map(chunk => chunk.y + chunk.h));
54    const map = Array(height).fill([]).map(row => Array(width).fill(' '));
55    chunks.forEach(chunk => {
56        for (let x = chunk.x; x < chunk.x + chunk.w; x++) {
57            map[chunk.y][x] = '-';
58            map[chunk.y + chunk.h - 1][x] = '-';
59        }
60        for (let y = chunk.y; y < chunk.y + chunk.h; y++) {
61            map[y][chunk.x] = '|';
62            map[y][chunk.x + chunk.w - 1] = '|';
63        }
64        map[chunk.y][chunk.x] = '+';
65        map[chunk.y][chunk.x + chunk.w - 1] = '+';
66        map[chunk.y + chunk.h - 1][chunk.x] = '+';
67        map[chunk.y + chunk.h - 1][chunk.x + chunk.w - 1] = '+';
68    });
69    for (const row of map) {
70        console.log(row.join(' '));
71    }
72}
73
74dump(splitDangeon(initChunk(16, 16)));
75console.log('\n');

修正案2：偏らないように分割位置をランダムに選択（再帰呼び出ししない）

js
1'use strict';
2
3const CHUNK_RANGE = 8;
4const CHUNK_SPLIT_MIN = 4;
5
6const initChunk = (xChunkLoop, yChunkLoop) => {
7    const chunk = {
8        x:0,
9        y:0,
10        w:xChunkLoop,
11        h:yChunkLoop
12    };
13    const chunks = [chunk];
14    return chunks;
15};
16
17const splitDangeon = (chunks, limit = 10) => {
18    for (let i = 0; i < limit; i++) {
19        const newIndex = chunks.length;
20        const oldIndex = Math.floor(Math.random() * chunks.length);
21        const {x, y, w, h} = chunks[oldIndex];
22        if(Math.random() > 0.5) {//縦
23            let splitW = CHUNK_SPLIT_MIN;
24            for(let i = 0; Math.random() > i; i += 0.1) splitW++;
25            const width = w - splitW;
26            if(width >= CHUNK_SPLIT_MIN){//最小サイズより大きいときに分割
27                chunks[oldIndex] = { x, y, w: splitW, h };
28                chunks[newIndex] = { x: x + splitW, y, w: width, h };
29            }
30        } else {//横
31            let splitH = CHUNK_SPLIT_MIN;
32            for(let i = 0; Math.random() > i; i += 0.1) splitH++;
33            const height = h - splitH;
34            if(height >= CHUNK_SPLIT_MIN){
35                chunks[oldIndex] = { x, y, w, h: splitH };
36                chunks[newIndex] = { x, y: y + splitH, w, h: height };
37            }
38        }
39    }
40    return chunks;
41};
42
43const dump = (chunks, w, h) => {
44    console.log(chunks);
45    const width = Math.max(...chunks.map(chunk => chunk.x + chunk.w));
46    const height = Math.max(...chunks.map(chunk => chunk.y + chunk.h));
47    const map = Array(height).fill([]).map(row => Array(width).fill(' '));
48    chunks.forEach(chunk => {
49        for (let x = chunk.x; x < chunk.x + chunk.w; x++) {
50            map[chunk.y][x] = '-';
51            map[chunk.y + chunk.h - 1][x] = '-';
52        }
53        for (let y = chunk.y; y < chunk.y + chunk.h; y++) {
54            map[y][chunk.x] = '|';
55            map[y][chunk.x + chunk.w - 1] = '|';
56        }
57        map[chunk.y][chunk.x] = '+';
58        map[chunk.y][chunk.x + chunk.w - 1] = '+';
59        map[chunk.y + chunk.h - 1][chunk.x] = '+';
60        map[chunk.y + chunk.h - 1][chunk.x + chunk.w - 1] = '+';
61    });
62    for (const row of map) {
63        console.log(row.join(' '));
64    }
65}
66
67dump(splitDangeon(initChunk(16, 16)));
68console.log('\n');
69