Форум

рони · #11 (**permalink**) 30.03.2015, 23:20

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

%= || += и тд?

http://javascript.ru/assignment-operators

SergeiGeek · #12 (**permalink**) 31.03.2015, 14:04

Спасибо тебе друг за помощь!

Не хочу быть навязчивым, но сильно хочу разобраться во всем.

window.onload = function() {
     createMatrix();
     setCell(1, 1, true);
     var b = {
     39: ["left", 1],
     37: ["left", -1],
     40: ["top", 1],
     38: ["top", -1],
     top: 1,
     left: 1
     };

В переменной заданы значения.. если первые 4 это коды JS по стрелочкам на клаве.. а вот TOP LEFT - это зачем? И каким образом они взаимодействуют с кодом?

рони · #13 (**permalink**) 31.03.2015, 14:22

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

TOP LEFT - это зачем

названия учавствовали в изменении стиля (код взят из ранее сделанного)-- можно заменить на любые теже row и col

рони · #14 (**permalink**) 31.03.2015, 14:25

SergeiGeek,
если интересно
Жук который ползает

SergeiGeek · #15 (**permalink**) 02.04.2015, 15:12

var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_RIGHT = 39;
var KEY_DOWN = 40;
var CELL_COLOR = 'red';
var BG_COLOR = 'white';

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 getCellEl (row, col) {
	return document.getElementById('matrix').children[(row - 1) * 20 + col - 1];
}

function setCell(row, col, val) {
	var cell = getCellEl(row, col);
	cell.style.backgroundColor = (val == true) ? CELL_COLOR : BG_COLOR; 
}

function getCell(row, col) {
	var cell = getCellEl;
	return cell.style.backgroundColor == CELL_COLOR;
}

window.onload = function() {
	var currentRow = 1;
	var currentCol = 1;
	createMatrix();
	setCell(currentRow, currentCol, true);

	window.onkeydown = function(event) {

		setCell(currentRow, currentCol, false);

		switch (event.keyCode) {
			case KEY_LEFT:
				currentCol -= 1;
				break;
			case KEY_UP:
				 currentRow -= 1;
				break;
			case KEY_DOWN:
				 currentRow += 1;
				break;
			case KEY_RIGHT:
				currentCol += 1;
				break;
		}

		if ( currentRow < 1) {
			currentRow = 1;
		}
		else if (currentRow > 20) {
			currentRow = 20;
		}

		if (currentCol < 1) {
			currentCol = 1;
		}
		else if (currentCol > 20) {
			currentCol = 20;
		}

		setCell(currentRow, currentCol, true);
	}
}

Как заставить этот квадрат двигаться постоянно? без нажатия клавиш в одном направлении? И менять курс клавишами на клавиатуре. А по достижении стенки - выводить сообщение о поражении? =))

рони · #16 (**permalink**) 02.04.2015, 15:42

SergeiGeek,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body,html{background:#FC9;height:100%}
  div{height:100px;width:100px;background:#006400;position:relative;left:200px;top:200px}
  </style>
  <script>
window.onload = function() {
    function move() {
     if (b.left < 0 || b.left > document.documentElement.clientWidth - 100|| b.top < 0 || b.top > document.documentElement.clientHeight-100) {alert('game over!'); return}
       for (var a in c)
            if (c[a]) {
                var d = b[a][0];
                b[d] += b[a][1];
                div.style[d] = b[d] + "px"
            }

        window.requestAnimationFrame(move)
    }
    var b = {
            39: ["left", 3],
            37: ["left", -3],
            40: ["top", 3],
            38: ["top", -3],
            left: 200,
            top: 200
        },
        c = {};
    move();
    var div = document.getElementById("show");
    document.body.onkeydown = function(a) {
        a = a || window.event;
        a = a.keyCode;
        a in b && (c = {},   c[a] = true);
        return false
    };
};
</script>
</head>

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

SergeiGeek · #17 (**permalink**) 02.04.2015, 17:59

var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_RIGHT = 39;
var KEY_DOWN = 40;
var CELL_COLOR = 'red';
var BG_COLOR = 'white';

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 getCellEl (row, col) {
	return document.getElementById('matrix').children[(row - 1) * 20 + col - 1];
}

function setCell(row, col, val) {
	var cell = getCellEl(row, col);
	cell.style.backgroundColor = (val == true) ? CELL_COLOR : BG_COLOR; 
}

function getCell(row, col) {
	var cell = getCellEl;
	return cell.style.backgroundColor == CELL_COLOR;
}

window.onload = function() {
	var currentRow = 1;
	var currentCol = 1;
	createMatrix();
	setCell(currentRow, currentCol, true);
	window.onkeydown = function(event) {

		setCell(currentRow, currentCol, false);

		switch (event.keyCode) {
			case KEY_LEFT:
				currentCol--;
				break;
			case KEY_UP:
				currentRow--;
				break;
			case KEY_DOWN:
				currentRow++;
				break;
			case KEY_RIGHT:
				currentCol++;
				break;
		}

		if ( currentRow < 1) {
			currentRow = 1;
			alert("The End");
		}
		else if (currentRow > 20) {
			currentRow = 20;
			alert("The End");
		}

		if (currentCol < 1) {
			currentCol = 1;
			alert("The End");
		}
		else if (currentCol > 20) {
			currentCol = 20;
			alert("The End");
		}

		setCell(currentRow, currentCol, true);
	}
}

Всю голову изломал.... как можно через setInterval запустить эту змейку?

Спасибо за вышеизложенный пример, я не знаю как его применить к моему примеру.

рони · #18 (**permalink**) 02.04.2015, 18:18

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

как можно через setInterval запустить эту змейку

вроде вам показал как

SergeiGeek · #19 (**permalink**) 02.04.2015, 18:29

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

вроде вам показал как

У вас Frame(move) я не знаю как его подставить в мой код

чтобы работало... у вас все хитро сделано.. мой IQ программирования пока слишком слаб дабы обработать вашу подачу информации. =) В данном случае, если вам не сложно, измените мой код, как он должен выглядеть чтобы квадратик сам двигался а я им управлял с клавиш?

рони · #20 (**permalink**) 02.04.2015, 18:32

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: ["col", 0.05],
              37: ["col", -0.05],
              40: ["row", 0.05],
              38: ["row", -0.05],
              row: 10,
              col: 10
          },
        c = {};
   function move() {
     if (b.col < 0 || b.col > 19|| b.row < 0 || b.row > 19) {alert('game over!'); return}
       for (var a in c)
            if (c[a]) {
                setCell(b.row|0, b.col|0, false)
                  var d = b[a][0];
                  b[d] += b[a][1];
                setCell(b.row|0, b.col|0, true)
            }
        window.requestAnimationFrame(move)
    }
   move();
           document.body.onkeydown = function(a) {
              a = a || window.event;
              a = a.keyCode;
              a in b && (c = {}, c[a] = true);
              return false
          };

      };
  </script>
</head>

<body>

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

Форум

Справочник

Discord чат

Курсы javascript