パズルにおける配列

for文でrow = 0; row < ROW_COUNTだから{
tiles[row] = [];
for (col = 0; col < COL_COUNT; col++) {
tiles[row][col] = row * COL_COUNT + col;
}を実行して row。++ということでしょうか？

この文はfor文でも｛｝｛｝がふたつあり入れ子構造になっているので構造が読めません。構文の構造をおしえていただきたいです。

tiles[row] = []で初期化する意味これは変数=0という意味と同じでしょうか？

 targetRow = row + UDLR[i][1];
 targetCol = col + UDLR[i][0];の

UDLR[i][1]とUDLR[i][0];の
意味がわりません。宜しくお願い致します。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>15 Puzzle!</title>
6</head>
7<body>
8  <canvas id="stage" width="280" height="280">
9    Canvas not supported ...
10  </canvas>
11  <script>
12  (function() {
13    'use strict';
14
15    var canvas = document.getElementById('stage');
16    var context;
17    var image;
18    var IMAGE_URL = '15puzzle.png';
19    // tiles[0][0] = 0;
20    // tiles[0][1] = 1;
21    // tiles[0][2] = 2;
22    // tiles[0][3] = 3;
23    // tiles[1][0] = 4;
24    // ...
25    var tiles = [];
26    var ROW_COUNT = 4;
27    var COL_COUNT = 4;
28    var PIC_WIDTH = 280;
29    var PIC_HEIGHT = 280;
30    var TILE_WIDTH = PIC_WIDTH / COL_COUNT;
31    var TILE_HEIGHT = PIC_HEIGHT / ROW_COUNT;
32    var UDLR = [
33      [ 0, -1],
34      [ 0,  1],
35      [-1,  0],
36      [ 1,  0]
37    ];
38
39    function initTiles() {
40      var row, col;
41      for (row = 0; row < ROW_COUNT; row++) {
42        tiles[row] = [];
43        for (col = 0; col < COL_COUNT; col++) {
44          tiles[row][col] = row * COL_COUNT + col;
45        }
46      }
47      tiles[ROW_COUNT - 1][COL_COUNT - 1] = -1;
48      // console.log(tiles);
49    }
50
51    function drawPuzzle() {
52      var row, col;
53      var sx, sy;
54      var dx, dy;
55      for (row = 0; row < ROW_COUNT; row++) {
56        for (col = 0; col < COL_COUNT; col++) {
57          dx = col * TILE_WIDTH;
58          dy = row * TILE_HEIGHT;
59          if (tiles[row][col] === -1) {
60            context.fillStyle = '#eeeeee';
61            context.fillRect(dx, dy, TILE_WIDTH, TILE_HEIGHT);
62          } else {
63            sx = (tiles[row][col] % COL_COUNT) * TILE_WIDTH;
64            sy = Math.floor((tiles[row][col] / ROW_COUNT)) * TILE_HEIGHT;
65            context.drawImage(image, sx, sy, TILE_WIDTH, TILE_HEIGHT, dx, dy, TILE_WIDTH, TILE_HEIGHT);
66          }
67        }
68      }
69
70    }
71
72    if (!canvas.getContext) {
73      alert('Canvas not supported ...');
74      return;
75    }
76    context = canvas.getContext('2d');
77
78    image = document.createElement('img');
79    image.src = IMAGE_URL;
80    image.addEventListener('load', function() {
81      initTiles();
82      drawPuzzle();
83    });
84
85    canvas.addEventListener('click', function(e) {
86      var x, y;
87      var rect;
88      var row, col;
89      var i;
90      var targetRow, targetCol;
91
92      rect = e.target.getBoundingClientRect();
93      x = e.clientX - rect.left;
94      y = e.clientY - rect.top;
95      row = Math.floor(y / TILE_HEIGHT);
96      col = Math.floor(x / TILE_WIDTH);
97      if (tiles[row][col] === -1) {
98        return;
99      }
100      // console.log(row, col);
101
102      for (i = 0; i < UDLR.length; i++) {
103        targetRow = row + UDLR[i][1];
104        targetCol = col + UDLR[i][0];
105        if (targetRow < 0 || targetRow >= ROW_COUNT) {
106          continue;
107        }
108        if (targetRow < 0 || targetRow >= ROW_COUNT) {
109          continue;
110        }
111      }
112    });
113
114  })();
115  </script>
116</body>
117</html>
118
119```![イメージ説明](3260c714c172c2af6f1c6096a9bc4028.png)[リンク内容](http://dotinstall.com/lessons/15puzzle_js)
120
121今は見ながら打ってますが次から見ないで打つ練習をしないといけないので宜しくお願い致します。