Форум

SergeiGeek · #1 (**permalink**) 29.03.2015, 18:12

Только начал изучение.
JS

Код:

function createMatrix()
{
	var matrix = document.getElementById('matrix');
	var n = 20 * 20;	
	
	for (var i = 0; i < n; i++)
	{
		var div = document.createElement('div');
		div.className = 'cell';
		matrix.appendChild(div);
	}
}
function getCell(row, col)
{

}

function setCell(row, col, val)
{

}
window.onload = function()
{
	createMatrix();	
	setCell(1, 1, true);
}

Получается матрица из 400 элементов (Квадрат), из DIV элементов. Как обратиться к нужному DIV элементу? Нужно заполнить функции setCell getCell - чтобы закрасился первый див элемент. Как это сделать?

рони · #2 (**permalink**) 29.03.2015, 19:36

SergeiGeek,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .cell {
     float: left;
     height: 12px;
     width: 12px;
     border: #0000CD 1px solid;
  }
  #matrix{
    width: 280px;
  }
  .red{
    background: #FF0000;
  }

  </style>
  <script>
      function createMatrix()
{
    var matrix = document.getElementById('matrix');
    var n = 20 * 20;

    for (var i = 0; i < n; i++)
    {
        var div = document.createElement('div');
        div.className = 'cell';
        matrix.appendChild(div);
    }
}
function getCell(row, col)
{
    var divs = document.querySelectorAll('.cell');
    return divs[--row * 20 + --col]
}

function setCell(row, col, val)
{
   getCell(row, col).classList[val ? 'add' : 'remove']('red')
}
window.onload = function()
{
    createMatrix();
    setCell(1, 1, true);
}
  </script>
</head>

<body>
<div id="matrix"></div>
</body>

</html>

SergeiGeek · #3 (**permalink**) 29.03.2015, 21:06

Великолепно!

Поясните каждый пункт, для более лучшего понимания, если вам не сложно

Код:

getCell(row, col).classList[val ? 'add' : 'remove']('red')

В КлассЛист квадратные скобки, это массив? Почему после val вопросительный знак?

рони · #4 (**permalink**) 29.03.2015, 21:12

Сообщение от SergeiGeek

В КлассЛист квадратные скобки, это массив?

это свойство classList которое определится в зависимости от val
Условный оператор
доступ-через-квадратные-скобки

SergeiGeek · #5 (**permalink**) 30.03.2015, 19:14

Спасибо друг!

А можно теперь задать движение этому квадрату за счет стрелочек клавиатуры. К этому всему я добавил вот что:

document.onkeyDown = function()
{
	var KEY_CODE = {
  		LEFT: 37,
  		UP: 38,
  		RIGHT: 39,
  		DOWN: 40
	};
	if (event.keyCode == KEY_CODE.LEFT) {
	
}

Лучше реализовать через IF или SWITCH ? Додумать не могу как заставить квадрат двигаться.

SergeiGeek · #6 (**permalink**) 30.03.2015, 19:19

То что ты мне написал выше.

function getCell(row, col)
37
{
38
    var divs = document.querySelectorAll('.cell');
39
    return divs[--row * 20 + --col]
40
}
41
 
42
function setCell(row, col, val)
43
{
44
   getCell(row, col).classList[val ? 'add' : 'remove']('red')
45
}

Такое возможно реализовать с помощью JQuerry?

рони · #7 (**permalink**) 30.03.2015, 19:33

Сообщение от SergeiGeek

Такое возможно реализовать с помощью JQuerry?

да можно но нафига?

рони · #8 (**permalink**) 30.03.2015, 19:35

Сообщение от SergeiGeek

движение этому квадрату за счет стрелочек клавиатуры

ищите по форуму недавно было

рони · #9 (**permalink**) 30.03.2015, 20:19

SergeiGeek,
кликнуть по квадратику потом нажать стрелки на клавиатуре.

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .cell {
     float: left;
     height: 12px;
     width: 12px;
     border: #0000CD 1px solid;
  }
  #matrix{
    width: 280px;
  }
  .red{
    background: #FF0000;
  }

  </style>
  <script>
      function createMatrix() {
          var matrix = document.getElementById('matrix');
          var n = 20 * 20;

          for (var i = 0; i < n; i++) {
              var div = document.createElement('div');
              div.className = 'cell';
              matrix.appendChild(div);
          }
      }

      function getCell(row, col) {
          var divs = document.querySelectorAll('.cell');
          return divs[row * 20 + col]
      }

      function setCell(row, col, val) {
          var div = getCell(row, col)
          div && div.classList[val ? 'add' : 'remove']('red')
      }
      window.onload = function() {
          createMatrix();
          setCell(10, 10, true);
          var b = {
              39: ["left", 1],
              37: ["left", -1],
              40: ["top", 1],
              38: ["top", -1],
              top: 10,
              left: 10
          };
          document.body.onkeydown = function(a) {
              a = a || window.event;
              a = a.keyCode;
              if (b[a]) {
                  setCell(b.top, b.left, false)
                  var d = b[a][0];
                  b[d] += b[a][1];
                  b[d] < 0 && (b[d] = 19)
                  b[d] %= 20;
                  setCell(b.top, b.left, true)
              }
return false;
          };

      };
  </script>
</head>

<body>

<div id="matrix"></div>
</body>
</html>

SergeiGeek · #10 (**permalink**) 30.03.2015, 23:06

спасибо! =)

a = a || window.event;
57
              a = a.keyCode;
58
              if (b[a]) {
59
                  setCell(b.top, b.left, false)
60
                  var d = b[a][0];
61
                  b[d] += b[a][1];
62
                  b[d] < 0 && (b[d] = 19)
63
                  b[d] %= 20;
64
                  setCell(b.top, b.left, true)

красиво это написано, а где можно прочесть про значения %= || += и тд?

Форум

Справочник

Discord чат

Курсы javascript