Moving a digit inside a table (or objects within a canvas table)

mkTbl("100px", 4); tbl = document.getElementById("tbl"); nGmFftngs(); // Глобальные переменные tbl = ""; // table link - очищение ссылки на таблицу RawSize = 0; // очищение размера таблицы dn = false; nFftngs = 0; // function mkTbl(tdSz, n) { // функция создающая n*n таблицу и принимающая аргументы - размер ячейки и таблицы RawSize = n; // размер заполняемой таблицы td = "<td style = 'background-color:#f0f0f0; width:" + tdSz + "; height:" + tdSz + "'"; // определение цвета, длины и ширины ячейки в html //td += " onclick = 'sayRC(this)'></td>"; // при нажатии вызов функции с нынешними значениями //td += " onmouseover = 'mkCrsr(this)' onclick = 'sayRC(this)'></td>"; // новая обработка курсора td += " onmouseover = 'mkCrsr(this)' onclick = 'mvFg(this)'></td>"; // новый обработчик перемещения цифры tHdr = "<table id = 'tbl' style = 'background-color:#ccccaa; cursor:pointer'; border = 1px"; // присовение таблице id, определение внешних границ и курсора document.write(tHdr); // дописать таблицу в html из javascript(строка выше её определяет) for (i = 0; i < RawSize; i++) { // пока i меньше размера заполняемой таблицы(определяется количество ячеек в таблице) document.write("<tr>"); // .. дописывать в документ столбец таблицы for (j = 0; j < RawSize; j++) { // тоже самое со строками document.write(td); // дописывать строку в документ } document.write("</tr>"); // после чего, закрыть все теги } document.write("</table>"); // ... и теги таблицы } function sayRC(cll) { // функция определяет номер столбца и строки нынешней ячейки // Номер столбца текущей ячейки c = cll.cellIndex; // получить столбец r = gtRw(cll, c); // получить строку из функции gtRW } // Возвращает номер строки, которой расположена ячейка cll function gtRw(cll, c) { for (i = 0; i < RawSize; i++) { // пока i не меньше размера заполняемой таблицы rw = tbl.rows[i]; // размер будет равен ссылке на таблицу по i if (rw.cells[c] == cll) return i; } } ///// генерация цифр function nGmFftngs() { // RawSize - размер заполняемой таблицы NewMas = RawSize * RawSize; // Массив генерируемых целых чисел MasFlags = new Array(NewMas); // Массив флажков генерируемых целых чисел // Элемент MasFlagsChck[k] равен false, если число k уже имеется в массиве MasFlags MasFlagsChck = new Array(NewMas); // проверка уже сгенерированных чисел for (k = 0; k < NewMas; k++) { // пока k < меньше сгенерированного числа, увеличить k и MasFlags[k] = 0; // присвоить элементу 0, присвоить флагу 0 MasFlagsChck[k] = true; // элемент массива не похож, значит подобного числа нет } kL = kL2 = 0; // диапазон заполнения не более 1(то есть от 0 до 2, например) // Цикл заполнения массива MasFlags // Число итераций не более 10000 while (kL < NewMas && kL2++ < 10000) { // Получаем целое случайное число из диапазона [1, NewMas] k = Math.floor(Math.random() * (NewMas + 1)); // случайное число, которое меньше или равно if (k > 0 && MasFlagsChck[k - 1]) { // проверка полученного значения, если больше или равно 0, то MasFlagsChck[k - 1] = false; // false MasFlags[kL] = k; // снова присвоить и kL++; // перейти к следующему интервалу } } kL = 0; // Цикл заполнения таблицы числами из массива MasFlags for (i = 0; i < RawSize; i++) { rw = tbl.rows[i]; for (j = 0; j < RawSize; j++) { k = MasFlags[kL++]; rw.cells[j].innerHTML = (k > NewMas - 14) ? "" : 2; // в данном случае выставлено ограничение на генерацию двух чисел, поскольку нам необходимы только они } } } /*document.addEventListener('keydown', function(e){ alert(e.keyCode); //console.log(); });*/ function mkCrsr(cll) { // обработка курсора if (dn) mvd = false; else { c = cll.cellIndex; r = gtRw(cll, c); if (r == -1) mvd = false; else for (kL = 0; kL < 4; kL++) { switch (kL) { case 0: mvd = chkC2(r - 1, c, cll); break; case 1: mvd = chkC2(r, c - 1, cll); break; case 2: mvd = chkC2(r + 1, c, cll); break; case 3: mvd = chkC2(r, c + 1, cll); break; } if (mvd) break; } } tbl.style.cursor = (mvd) ? 'pointer' : 'crosshair'; } // Возвращает true, если ячейка r2:c2 является пустой function chkC2(r2, c2, cll) { if (r2 == -1 || c2 == -1 || r2 == RawSize || c2 == RawSize) return false; cll2 = tbl.rows[r2].cells[c2]; if (cll2.innerHTML == "") return true; } function mvFg(cll) { if (dn) return; c = cll.cellIndex; r = gtRw(cll, c); if (r == -1) return; NewMas = RawSize * RawSize; for (kL = 0; kL < 4; kL++) { switch (kL) { case 0: mvd = chkC(r - 1, c, cll); break; case 1: mvd = chkC(r, c - 1, cll); break; case 2: mvd = chkC(r + 1, c, cll); break; case 3: mvd = chkC(r, c + 1, cll); break; } } } function chkC(r2, c2, cll) { if (r2 == -1 || c2 == -1 || r2 == RawSize || c2 == RawSize) return false; cll2 = tbl.rows[r2].cells[c2]; if (cll2.innerHTML == "") { nFftngs++; cll2.innerHTML = cll.innerHTML; cll.innerHTML = ""; tbl.style.cursor = 'crosshair'; return true; } } /*document.body.onkeydown=function restrict(event){ switch(event.keyCode){ case 37: // <-- стрелочка влево if (object.x !=0) object.x -= peremeshenie; break; case 38:// ^ стрелочка вверх if (object.y != 0) object.y -= peremeshenie; break; case 39: // --> стрелочка вправо if (object.x !=750) object.x += peremeshenie; break; case 40: // v стрелочка вниз if (object.y != 750) object.y += peremeshenie; break; } }*/ 

 td { text-indent: 0; text-align: center; font-weight: bold; font-size: 27px; color: black; } #myTBL td { background: white; color: black } #myTBL td.act { background: black; color: white } 

 <div class="element2"></div>