Чтобы элемент передвигался рандомно
 

По полю передвигается квадратик (вверх-вниз, влево-вправо)
http://plnkr.co/edit/wx0ygfaGTWHj9dSz07G0?p=preview

1) Как сделать так чтобы он передвигался рандомно?
Т.е. либо влево на 20рх, либо вправо на 20рх, либо вверх, либо вниз.
Естественно нужно чтобы он это это делал в пределах контейнера,
и передвигался постоянно
(знаю что может помочь Math.random(), но как именно его прописать?)

2) На поле есть неподвижные квадратики - это камни. На них элемент не может заходить - он должен их обходить

3) Как создать второй такой же элемент, чтобы он рождался в рандомном месте(кроме камня и другого элемента), также ходил, но при встрече двух элементов, они не могли вставать друг на друга, а обходили друг друга

yaparoff,
массив надо делать, чтобы знать где можно ходить, а где какой-то обьект.много кода ... коллизии обьектов вычислять.

В сети нашел что-то и свое подставил.
Т.е. есть массив массивов list где есть 8 вариантов, куда сделать шаг,
потом это перебирается Math.random() и выбирается одно направление.

и как результат этого вставить в мой код?

var randomDirection = {
		list: [
			[0, -20],
			[20, -20],
			[20, 0],
			[20, 20],
			[0, 20],
			[-20, 20],
			[-20, 0],
			[-20, -20]
		],
		already: [],
		random: function () {
			return this.directions[Math.floor(Math.random() * this.list.length)];
		},
		get: function () {
			var direction = this.random();

			if (this.already.length >= this.list.length) {
				this.already = [];
				return direction;
			}
			if (this.already.indexOf(direction) !== -1) {
				return this.get();
			} else {
				this.already.push(direction);
				return direction;
			}
		}
	};
	
	alert(randomDirection.get());

Вот. Так вычисляем координаты камней:

var stones = document.querySelectorAll('.stone');
	var stonesCoords = [];
	for (var i = 0; i < stones.length; i++) {
		stonesCoords.push(getCoords(stones[i]));
	}
	function getCoords(element) {
		var box = element.getBoundingClientRect();

		return {
			top: box.top + pageYOffset,
			left: box.left + pageXOffset,
			right: box.right + pageXOffset,
			bottom: box.bottom + pageYOffset
		};
	}

В код добавил http://plnkr.co/edit/wx0ygfaGTWHj9dSz07G0?p=preview

Хотелось бы добавить, что элемент должен видеть только в пределах одного хода - дальше он не видит.

Как теперь это все воедино соединить?

yaparoff,
может ну его нафиг?

Не получиться. Нужно сделать обязательно. Эта задача - не моя прихоть

Rise,
Да. Из книги выразительный JavaScript
Автор рассказывает как делать, НО нужна своя реализация, нельзя копировать код.
Автор так объясняет, что мне не остается просто брать и копировать оттуда код. Но так нельзя. Мне код автора во многих местах не понятен.
Поэтому реализовываю по своему, чтобы каждая строчка кода мне понятна была.

В итоге примерно вот что должно получиться http://eloquentjavascript.net/code/#7.2

но объектов может быть меньше чем там

yaparoff, может чем поможет
Броуновское движение на js

Как сделать собственную реализацию этого куска кода:
(о нем здесь написано)
Копировать нельзя

function Vector(x, y) {
  this.x = x;
  this.y = y;
}
Vector.prototype.plus = function(other) {
  return new Vector(this.x + other.x, this.y + other.y);
};

var grid = ["top left",    "top middle",    "top right",
            "bottom left", "bottom middle", "bottom right"];

function Grid(width, height) {
  this.space = new Array(width * height);
  this.width = width;
  this.height = height;
}
Grid.prototype.isInside = function(vector) {
  return vector.x >= 0 && vector.x < this.width &&
         vector.y >= 0 && vector.y < this.height;
};
Grid.prototype.get = function(vector) {
  return this.space[vector.x + this.width * vector.y];
};
Grid.prototype.set = function(vector, value) {
  this.space[vector.x + this.width * vector.y] = value;
};

var grid = new Grid(5, 5);
grid.set(new Vector(1, 1), "X");
console.log(grid.get(new Vector(1, 1)));