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

[yaparoff]

И вот это как самому реализовать, не копируя?

var directions = {
  "n":  new Vector( 0, -1),
  "ne": new Vector( 1, -1),
  "e":  new Vector( 1,  0),
  "se": new Vector( 1,  1),
  "s":  new Vector( 0,  1),
  "sw": new Vector(-1,  1),
  "w":  new Vector(-1,  0),
  "nw": new Vector(-1, -1)
};

/* Вот простое тупое существо, которое просто идёт, пока не врезается в препятствие, а затем отскакивает в случайном направлении. */

function randomElement(array) {
  return array[Math.floor(Math.random() * array.length)];
}
function BouncingCritter() {
  this.direction = randomElement(Object.keys(directions));
};
BouncingCritter.prototype.act = function(view) {
  if (view.look(this.direction) != " ")
    this.direction = view.find(" ") || "s";
  return {type: "move", direction: this.direction};
};

[yaparoff]

Лицензия MIT не запрещает копирование.

Уже бы давно скопировал.
У меня задача - сделать собственную реализацию. Копировать запрещено

В поисках этого решения и пришел сюда.

Просто забить и сказать "да ну его нафиг" - не получиться. Мне обязательно нужно это сделать

[yaparoff]

(удалено)

[Dilettante_Pro]

черновой набросок

<style>
.container {
   position:absolute;
   top:30px;
   left:20px;
   width:400px;
   height:400px;
   border:1px solid gray;
}
.animal {
   width:20px;
   height:20px;
   transition: 0.3s;
   border-radius: 10px;
   background-color: red;
}
.stone {
   width:20px;
   height:20px;
   border-radius: 10px;
   background-color: black;
}
</style>
Количество животных: <input type='number' id ='aCount' value='2'>
  Количество камней: <input type='number' id ='sCount' value='10'>
<input type='button' id='mainBut' value='Пуск'>
<div class='container'></div>
<script>
var field = document.querySelector('.container'),
     fieldTop = +field.style.top,
     fieldLeft = +field.style.left,
     unit,
     units = [],
     animals = [],
     stoneCount = 10,
     animalCount = 2,
     stopFlag = false;

function createUnit(unitType) {
    var unitTop, unitLeft, noFree = true, unitPos = {};
    do {
        unitTop = (Math.round(Math.random() * 19 ) * 20 - fieldTop) + 'px';
        unitLeft = (Math.round(Math.random() * 19 ) * 20 - fieldLeft) + 'px';
        noFree = false;
        for(var i = 0; i < units.length; i++){
           if(units[i].top == unitTop && units[i].left == unitLeft) noFree = true;
        } 
    } while (noFree);
    unit = document.createElement('div');
    unit.classList.add(unitType);
    unit.style.position = 'absolute';
    unit.style.top = unitTop;
    unit.style.left = unitLeft; 
    field.appendChild(unit); 
    unitPos.top = unitTop;
    unitPos.left = unitLeft;
    units.push(unitPos);
    if(unitType == 'animal') {
       animals.push(unitPos);
       unit.id = "a" + i;
       unit.innerText = i;
    }
}
function moveAnimals() {
   var stepTop, stepLeft, unitTop, unitLeft, noFree, unitPos = {};
   for(var i = 0; i<animals.length;i++) {
      noFree = true;
      do {
         stepTop = Math.round(Math.random() * 2 - 1) * 20;
         stepLeft = Math.round(Math.random() * 2 - 1) * 20;

         unitTop = +animals[i].top.replace(/\D/g,"") + stepTop;
         unitLeft = +animals[i].left.replace(/\D/g,"") + stepLeft;
         if(unitTop < 0 || unitLeft < 0 || unitTop >  380 || unitLeft > 380) { noFree = true; }
         else {
            unitTop = unitTop + "px";
            unitLeft = unitLeft + "px";  
            noFree = false;
            for(var j = 0; j< units.length; j++){
               if(units[j].top == unitTop && units[j].left == unitLeft) noFree = true;
           } 
        }
     } while (noFree);      
     units[i].top = unitTop;
     units[i].left = unitLeft;
     animals[i].top = unitTop;
     animals[i].left = unitLeft;
     var elem = document.querySelector('#a' + i);
     elem.style.top = unitTop;
     elem.style.left = unitLeft;
   }
}

function start() {
    if(stopFlag) return;
    moveAnimals();
    setTimeout(start, 500); 
};

function startLife() {
   for(var i = 0; i < animalCount;i++){
       createUnit('animal');
   }
   for(var i = 0; i < stoneCount;i++){
       createUnit('stone');
   }

    start();
}
document.querySelector('#mainBut').onclick = function() {
    if(this.value == 'Пуск') {
        stopFlag = false;
        animalCount = +document.querySelector('#aCount').value;
        stoneCount = +document.querySelector('#sCount').value;
        this.value = 'Стоп';
        startLife();
    }
    else {
        stopFlag = true;
        this.value = 'Пуск';
        field.innerHTML = "";
        units = [];
        animals = [];
    }
}
</script>

[yaparoff]

Dilettante_Pro, огромное спасибо!
В целом код понятен, правда хотелось бы некоторые моменты уточнить:

1) Для чего стоит "+" у +field.style.top. Он преобразует в число, но ведь там и так будет число. Или нет?
А понял, туда поступает допустим 20рх и он обрезает "рх" и оставляет только "20" - я правильно понял?

2) Что означает noFree = true ? То что ячейка занята?
3) На 36 строке для чего мы Math.random() умножаем именно на 19 ? Затем всё это умножаем на 20 и после вычитаем fieldTop?
Почему именно так?

4) Что означает эта запись (строка 40):
if(units[i].top == unitTop && units[i].left == unitLeft) noFree = true;

5) Для чего в 60-ой строке стоит noFree = true; ?
6) Для чего нужен второй цикл на 71 строке ?
7) Строки 77 и 79: для чего мы задаем одно и то же значение для units[i].left и animals[i].left ?
8) Как существо понимает, что на камень нельзя заходить?

[Diphenyl Oxalate]

76     units[i],top = unitTop;

78     animals[i],top = unitTop;

Вот, а в strict mode бы не пустило.

[yaparoff]

Вот, а в strict mode бы не пустило.

Ничего страшного, это я заметил и исправил у себя

[Dilettante_Pro]

yaparoff,

2) Что означает noFree = true ? То что ячейка занята?

Ну ведь понятно же - именно это.

3) На 36 строке для чего мы Math.random() умножаем именно на 19 ? Затем всё это умножаем на 20 и после вычитаем fieldTop?
Почему именно так?

сначала получаем случайное число от 0 до 19 - т.к у нас 20 ячеек по вертикали и по горизонтали, а потом умножаем на 20 - размер ячейки, корректируем полученные координаты относительно положения контейнера

4) Что означает эта запись (строка 40):
if(units[i].top == unitTop && units[i].left == unitLeft) noFree = true;

если две новых координаты unitTop и unitLeft есть у каких-то units - ячейка занята

5) Для чего в 60-ой строке стоит noFree = true; ?

Убрать значение предыдущей итерации. Чтобы цикл do-while заработал.

6) Для чего нужен второй цикл на 71 строке ?

Первый цикл - новые координаты для животных, второй - проверка занятости ячеек

7) Строки 77 и 79: для чего мы задаем одно и то же значение для units[i].left и animals[i].left ?

Запоминаем новые позиции животных.
units - все элементы - камни и животные, для проверки занятости ячеек
animals - животные, для управления

8) Как существо понимает, что на камень нельзя заходить?

Смотри ответ на вопрос 4

76     units[i],top = unitTop;


78     animals[i],top = unitTop;


Вот, а в strict mode бы не пустило.

Спасибо. Просто я писал наскоро, на смартфоне (Очень неудобно!). Специально написал, что черновик. Поправил. Убрались некоторые глюки

PS: имейте в виду, что строки скрипта немного сдвинулись в связи с расширением функциональности в последней редакции

[yaparoff]

Спасибо.

Тебе спасибо! )))

[рони]

yaparoff,
запусти кроликов в огород (клик по полю)

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  *{
    padding: 0;
    margin: 0;
  }

  .cell {
    text-align: center;
     float: left;
     height: 23px;
     width: 23px;
     border: #0000CD 1px solid;
     background-color: #FFEBCD;
     font-size: 12px;
     -webkit-transition: all .5s ease-in-out;
     -moz-transition: all .5s ease-in-out;
     -o-transition: all .5s ease-in-out;
     transition: all .5s ease-in-out;
  }
  #matrix{
    display: inline-block;
    margin: 50px auto;
  }
  .red{
    border-radius: 4px;
    background-image: url(http://www.smayly.ru/gallery/big/vkBunny/12.png);
    background-repeat: no-repeat;
    background-size: cover;
  }
 .yellow{
     background: #FFFF00;
   }
  .green{
    background-image: url(http://moyhutor.net/images/klubnika2.png);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .blue{
    background: #0000FF
  }
  </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
    var matrix = document.getElementById("matrix"),
        l = (Math.random() * 15 | 0) + 10;
    t = (Math.random() * 10 | 0) + 10, n = l * t;

    function createMatrix() {
        var w;
        for (var i = 0; i < n; i++) {
            var div = document.createElement("div");
            div.className = "cell";
            Math.random() < .07 && div.classList.add("green");
            div.dataset.index = i;
            matrix.appendChild(div);
            if (i == l - 1) w = matrix.offsetWidth + 1
        }
        matrix.style.width = w + "px";
        matrix.style.display = "block"
    }

    function chec(indx, size) {
        var s = [],
            x = indx % l,
            y = indx / l |
            0;
        size = size || 1;
        for (var i = y - size; i <= y + size; i++)
            for (var k = x - size; k <= x + size; k++) {
                var num = k + i * l,
                    max = Math.max(Math.abs(i - y), Math.abs(k - x));
                i > -1 && i < t && k > -1 && k < l && num < i * l + l && num != indx? s.push(num): s.push(null)
            }
        return {
            s: s
        }
    }
    createMatrix();
    var divs = [].slice.call(document.querySelectorAll(".cell"), 0);
    matrix.addEventListener("click", function(event) {
        var el = event.target,
            cls = el.classList;
        if (cls && cls.contains("cell") && !cls.contains("green") && !cls.contains("red")) {
            var index = el.dataset.index;
            move(index, Math.random() * 8 | 0)
        }
    });

    function move(index, num) {
        var arr = chec(index, 1);
            m = [];
        var k = arr.s.filter(function(indx,i) {
            return indx !== null && !divs[indx].classList.contains("green") && !divs[indx].classList.contains("red") && indx != index && m.push(i)
        });

        if (k.length) {
            divs[index].classList.remove("red");
            if (m.indexOf(num) == -1|| Math.random() < .17) num = m[Math.floor(Math.random() * m.length)];
            k = arr.s[num];
            divs[k].classList.add("red");
            window.setTimeout(function() {
                move(k, num)
            }, 500)
        }
       else window.setTimeout(function() {
                move(index, num)
            }, 2000)
    }
});
  </script>
</head>

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

</body>
</html>