Двумерный массив выдает undefined

@Спрашыватель · Регистрация: 30.05.2016

Студворк — интернет-сервис помощи студентам

В чем проблема?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .cell{
            width: 18px;
            height: 18px;
            padding: 0;
            background: white;
        }
        .floor{
            background: black;
        }
        .wall{
            background: grey;
        }
 
    table {
        border-spacing: 0;
    }
        div#game {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .settings {
        width: 175px;
       
    }
        </style>
</head>
<body>
    <div class="settings">
        <form onsubmit="return false">
            <label for="width" >Width </label>   <input id="width" type="text">
            <label for="height">Height </label> <input id="height" type="text">
            <label for="numRoom" >Number Rooms</label><input id="numRoom" type="text">
            <button  class="send"  onclick="init();">Generate</button>
        </form>
    </div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let tile;
let type = {
floor: "white",
wall:  "grey",
inane: "black"
}
 init = () => {
    let form = document.forms[0],
    tileX = +form.elements[0].value,
    tileY = +form.elements[1].value;
    //numRoom = +form.elements[2].value;
    canvas.width = width;
    canvas.height = height;
 
    tiles=new Array();
    for(let i=0; i < tileX; i++){
        tiles[i]=new Array();
        for(let j=0; j < tileY; j++){
            tiles[i][j].push(new Tile(i+1, j+1, type, null, null))
        }
    }
 
}

@klopp · 28.01.2019, 19:50

метод push добавляет новый элемент в конец массива. Массива tiles[i][j] не существует, есть массив tiles[i].
строка 19 либо так

JavaScript
1
tiles[i].push(new Tile(i+1, j+1, type, null, null));

либо так

JavaScript
1
tiles[i][j] = new Tile(i+1, j+1, type, null, null);

@amr-now · 28.01.2019, 19:51

Спрашыватель, где переменная canvas ?
Скрипт не достаточно полный.

@Спрашыватель · 28.01.2019, 19:59 **[ТС]**

klopp, klopp, у меня 19 из 20 элементов пусты - Почему
весь код

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<script>
    
let canvas = document.querySelector('canvas');
let c = canvas.getContext('2d');
 
 class Tile {
    constructor(x, y, type, RoomId, CoridorId){
        this.x = x;
        this.y = y;
        this.widthTile = 18;
        this.heightTile = 18;
        this.type = type;
        this.RoomId = RoomId;
        this.CoridorId = CoridorId;
    }
    isRoom(){
        if(this.RoomId!= null){
            return true
        }else{
            return false
        }
    }
    isCoridor(){
        if(this.CoridorId!= null){
            return true
        }else{
            return false
        }
           
       
    }
    draw () {
        c.beginPath();
        c.fillStyle = this.type.inane;
        c.fillRect(this.x, this.y, this.widthTile,  this.heightTile);
 
    }
   
 }
 
 
 
 let tiles;
let type = {
floor: "white",
wall:  "grey",
inane: "black"
}
 init = () => {
    let form = document.forms[0],
    tileX = +form.elements[0].value,
    tileY = +form.elements[1].value;
    //numRoom = +form.elements[2].value;
    canvas.width =  tileX ;
    canvas.height = tileY ;
 
    tiles=new Array();
    for(let i=0; i < tileX; i++){
        tiles[i]=[];
        for(let j=0; j < tileY; j++){
            tiles[i]=[];
            tiles[i][j] = new Tile(i+1, j+1, type, null, null)
            
 
        }
    }
    console.log(tiles);
 
   // animate();
}
 
 
 animate = () => {
 c.clearRect(0, 0, canvas.width, canvas.height);
 tiles.draw(); 
 }
    </script>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .cell{
            width: 18px;
            height: 18px;
            padding: 0;
            background: white;
        }
        .floor{
            background: black;
        }
        .wall{
            background: grey;
        }
 
    table {
        border-spacing: 0;
    }
        div#game {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .settings {
        width: 175px;
       
    }
        </style>
</head>
<body>
    <div class="settings">
        <form onsubmit="return false">
            <label for="width" >Width </label>   <input value="20" id="width" type="text">
            <label for="height">Height </label> <input value="20" id="height" type="text">
            <label for="numRoom" >Number Rooms</label><input id="numRoom" type="text">
            <button  class="send"  onclick="init();">Generate</button>
        </form>
    </div>
    <canvas>
 
    </canvas></body>
</html>

@klopp · 28.01.2019, 20:04

Сообщение от Спрашыватель

у меня 19 из 20 элементов пусты - Почему

строка 61 в js лишняя

@Спрашыватель · 28.01.2019, 20:10 **[ТС]**

Да как-то не заметил. Спасибо Большое!

@amr-now · 28.01.2019, 20:20

Спрашыватель, для проверки ошибок помогает сделать <script type="module">

Сразу высвечивает криво навешенный обработчик кнопки и два неправильных объявления функции:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .cell{
            width: 18px;
            height: 18px;
            padding: 0;
            background: white;
        }
        .floor{
            background: black;
        }
        .wall{
            background: grey;
        }
 
    table {
        border-spacing: 0;
    }
        div#game {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .settings {
        width: 175px;
       
    }
        </style>
</head>
<body>
    <div class="settings">
        <form onsubmit="return false">
            <label for="width">Width </label> <input value="20" id="width" type="text">
            <label for="height">Height </label> <input value="20" id="height" type="text">
            <label for="numRoom">Number Rooms</label><input id="numRoom" type="text">
            <button class="send">Generate</button><!-- Здесь был устаревший вызов функции -->
        </form>
    </div>
    <canvas>
 
    </canvas>
    <script type="module">
        let canvas = document.querySelector('canvas');
        let c = canvas.getContext('2d');
        document.querySelector(".send").onclick = init;
 
        class Tile {
            constructor(x, y, type, RoomId, CoridorId) {
                this.x = x;
                this.y = y;
                this.widthTile = 18;
                this.heightTile = 18;
                this.type = type;
                this.RoomId = RoomId;
                this.CoridorId = CoridorId;
            }
            isRoom() {
                if (this.RoomId != null) {
                    return true
                } else {
                    return false
                }
            }
            isCoridor() {
                if (this.CoridorId != null) {
                    return true
                } else {
                    return false
                }
            }
            draw() {
                c.beginPath();
                c.fillStyle = this.type.inane;
                c.fillRect(this.x, this.y, this.widthTile, this.heightTile);
            }
        }
 
        let tiles;
        let type = {
            floor: "white",
            wall: "grey",
            inane: "black"
        }
 
        function init() {                        // Здесь была ошибка
            let form = document.forms[0],
                tileX = +form.elements[0].value,
                tileY = +form.elements[1].value;
            //numRoom = +form.elements[2].value;
            canvas.width = tileX;
            canvas.height = tileY;
 
            tiles = [];
            for (let i = 0; i < tileX; i++) {
                tiles[i] = [];
                for (let j = 0; j < tileY; j++) {
                    tiles[i][j] = new Tile(i + 1, j + 1, type, null, null);
                }
            }
            console.log(tiles);
 
            // animate();
        }
 
        function animate() {
            c.clearRect(0, 0, canvas.width, canvas.height);  // Здесь была ошибка
            tiles.draw();
        }
    </script>
</body>
</html>

@Спрашыватель · 29.01.2019, 14:11 **[ТС]**

amr-now, Спасибо, учту)

@klopp · 29.01.2019, 16:31

Сообщение от amr-now

сделать <script type="module">

как вы этим пользуетесь? у меня Хром ошибку выбивает
Access to script at 'file://..... ' from origin 'null' has been blocked by CORS policy: The response is invalid.

@amr-now · 29.01.2019, 17:06

klopp, а мы с ТС локальный веб-сервер подняли.

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Нашел на реддите интересную статью под названием «Кто-нибудь знает, где получить бесплатный компьютер или. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	28.01.2019, 19:51
	Спрашыватель, где переменная canvas ? Скрипт не достаточно полный. 0

@Спрашыватель 0 / 0 / 3 Регистрация: 30.05.2016 Сообщений: 171
	28.01.2019, 20:10 [ТС]
	Да как-то не заметил. Спасибо Большое! 0

@Спрашыватель 0 / 0 / 3 Регистрация: 30.05.2016 Сообщений: 171
	29.01.2019, 14:11 [ТС]
	amr-now, Спасибо, учту) 0

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	29.01.2019, 17:06
	klopp, а мы с ТС локальный веб-сервер подняли. 1

Двумерный массив выдает undefined

Решение