Невозможно прочитать свойство '1' неопределенной ошибки

Question

Я проверил несколько вопросов, очень похожих на мои, и попробовал все, что знал. Эта ошибка сводит меня с ума.

Я делаю «игру», которая состоит из таблиц NxN с цифрами 1-8 и числом 0 (эти числа представлены в виде файлов изображений, а число 0 - прозрачное изображение). Пурпуна игры должна привести все цифры в порядок. Это ссылка, поэтому вы получите краткое представление о том, что я говорю ->Game.

Поэтому, когда я нажимаю номер 2 (в примере), он должен опускаться, и прозрачное изображение должно увеличиваться (изменение src).

Это мой код:

<script language="JavaScript"> 
const N=3; 
var aTabla= CrearTabla(N); 

document.write("<table>"); 
for (f=0;f<N;f++){ 
    document.write("<tr>"); 
    for (c=0;c<N;c++){ 
     document.write("<td>"); 
     document.write('<img src = "Numbers2/n'+aTabla[f][c]+'.gif" id="im'+f+c+'" onclick="mover('+f+','+c+');tiempo()" >'); 
     document.write("</td>"); 
    } 
    document.write("</tr>"); 
} 
document.write("</table>"); 


function mover(f,c){ 

    //Derecha 
    if(aTabla[f][c+1] == 0){ 

     aAux = aTabla[f][c+1]; 
     aTabla[f][c+1] = aTabla[f][c]; 
     aTabla[f][c] = aAux; 

     aux = document.images["im"+f+(c+1)].src; 
     document.images["im"+f+(c+1)].src = document.images["im"+f+c].src; 
     document.images["im"+f+c].src = aux; 
    }//Izquierda 
    if(aTabla[f][c-1] == 0){ 

     aAux = aTabla[f][c-1]; 
     aTabla[f][c-1] = aTabla[f][c]; 
     aTabla[f][c] = aAux; 

     aux = document.images["im"+f+(c-1)].src; 
     document.images["im"+f+(c-1)].src = document.images["im"+f+c].src; 
     document.images["im"+f+c].src = aux; 
    } 
    //Arriba 
    if(aTabla[f-1][c] == 0 && aTabla[f-1][c] != 'undefined'){ 

     aAux = aTabla[f-1][c]; 
     aTabla[f-1][c] = aTabla[f][c]; 
     aTabla[f][c] = aAux; 

     aux = document.images["im"+(f-1)+c].src; 
     document.images["im"+(f-1)+c].src = document.images["im"+f+c].src; 
     document.images["im"+f+c].src = aux; 
    } 
    //Abajo 
    if(aTabla[f+1][c] == 0 && aTabla[f+1][c] != 'undefined'){ 

     aAux = aTabla[f+1][c]; 
     aTabla[f+1][c] = aTabla[f][c]; 
     aTabla[f][c] = aAux; 

     aux = document.images["im"+(f+1)+c].src; 
     document.images["im"+(f+1)+c].src = document.images["im"+f+c].src; 
     document.images["im"+f+c].src = aux; 
    } 



} 

функция CrearTabla (N) является уже сделано функция, которая работает perfecty. Он возвращает 2D-массив. И параметр используется как NxN, поэтому в моем случае он создает таблицу 3x3.

Игры отлично работают, когда я перемещаю числа влево, вправо и вверх, даже когда я перемещаю числа вниз, если они находятся в строках 2 и 3 (f == 0 и f == 1 в позициях массива). Но когда я пытаюсь двигаться и элемент, который находится на первой линии (номер 2 в моей ссылке, которую я предоставил) Это дает ошибку: неперехваченным TypeError: Не удается прочитать свойство «2» неопределенной

Что я могу сделать, чтобы исправить это? Я новичок в javascript.

Answer 1

Что вам нужно сделать, это проверить, что вы всегда получаете доступ к допустимому местоположению, то есть как строка, так и столбец между 0 и 2. В вашей функции мы можем предположить, что (f, c) является действительным место в доске. Но такие вещи, как (f-1, c), могут не всегда быть допустимым местом. Таким образом, вы должны проверить их:

if(c+1 <= 2 && aTabla[f][c+1] == 0){... 
if(c-1 >= 0 && aTabla[f][c-1] == 0){... 
if(f-1 >= 0 && aTabla[f-1][c] == 0){... 
if(f+1 <= 2 && aTabla[f+1][c] == 0){... 

Если первое условие ложно, the second condition will not be evaluated, предотвращая TypeError в текущем коде.