Перебор соседних элементов по "кругу"
 

Страничка заполняется квадратами, размер которых задается с помощью prompt. Ширина и высота окна формируется в соответствии от размера самого окна.

Хочу сделать что бы при клике на один из квадратов, все квадраты вокруг него изменяли цвет и так по степени нарастания области (как волна после того как кинул предмет в воду).

Но не хватает опыта, помогите придумать саму логику. Думал по индексам писать формулу, но тогда формула нужна для каждого квадрата.

формула будет одна, на входе индекс клетки на выходе массив индексов клеток вокруг.
как вы угадаите, чтоб клетки заполнили весь обьем, а не больше или меньше.

Вот так я заполняю страничку квадратами.

function myFunction() {
    var square = prompt("Please enter square size in px");
    var squareSize = parseInt(square);
    if (square != null) {
    	var wrapper = $('.wrapper').width();
    	var wrapperHeight = $('.wrapper').height();
    	var a = (wrapper / squareSize |0) * (wrapperHeight / squareSize |0);	
        var items = wrapper / squareSize |0;
        for (var i = 0; i < a; i++) {
          $('.wrapper').append('<div class="child">' + i +'<div>');
          $('.child').css({
             width: squareSize,
             height: squareSize
         });
      };
}
}

Как тогда быть, если я выберу угловой квадрат, тогда ведь массив инддексов должен совсем иначе считаться чем при выборе квадрата где то в центре странички.

Вот код в действии http://jsfiddle.net/falkone/73gLc3ap/1/

нет просто функция выдаст массив с меньшим числом клеток

Тогда как более правильно обойти выбранный и получить массив элементов вокруг него? Может изначально посчитать его порядковый номер именно в плане координат Х и У(строка и столбик) и потом уже из этого думаю будет не так сложно искать соседние?

falkone,
пример работы такой функции.

да вы на верном пути, потом взять (согласно шагу, для примера 1 )ряд сверху, ряд в котором клетка, и ряд снизу проверить на существование рядов -- а потом и клеток в рядах

их надо сначала вычислить :write: потом можно волну гнать

Можно более подробно как работает этот метод и как его использовать?:write:

jQuery ваще не знаю, поэтому перепишешь правильно =).

function adjacentItems(index){
    var $parent = $('.wrapper'),
        $child = $('.child');
    
    var count = $child.length;
    
    // сколько элементов в линии
    var xItems = Math.floor($parent.width() / $child.width());
    
    // шаг вправо
	var $right = null,
        right = index + 1;
    
    if (right <= count && right % xItems !== 0) {
    	$right = $child.eq(right)
    }
    
    // шаг влево
	var $left = null,
        left = index - 1;
    
    if (left >= 0 && index % xItems !== 0) {
    	$left = $child.eq(left)
    }
    
    // шаг вверх
	var $top = null,
        top = index - xItems;
    
    if (top >= 0 && index % xItems !== 0) {
    	$top = $child.eq(top)
    }
    
    // шаг вниз
	var $bottom = null,
        bottom = index + xItems;
    
    if (bottom <= count && bottom - 1 % xItems !== 0) {
    	$bottom = $child.eq(bottom)
    }
    
    // массив элементов
    var data = [];
    
    // собственно, если он есть, то записываем в массив.
    if ($right) {
    	data.push($right);
    }
    if ($left) {
    	data.push($left);
    }
    if ($top) {
    	data.push($top);
    }
    if (bottom) {
    	data.push($bottom);
    }
    return data;
}

$('.wrapper').on('click', '.child', function() {
        // получаем список эелемнтов
	var $items = adjacentItems($(this).index());
    // перебираем массив
    $items.forEach(function($item){
    	$item.css('background', 'yellow');
    });
});

p.s я тут убрал ввод с prompt, добавишь.
http://jsfiddle.net/73gLc3ap/4/

p.s А почему не сделаешь используя матрицу? Я про

data[x][y]

Было бы проще искать элемементы

falkone,
:)

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

falkone, ищи "волновой алгоритм поиска кратчайшего пути" =)
И от туда черпай не поиск пути, а способ запуска - той самой волны=)

nerv_,
давал ссылку PathFinding
тут все виды волн :)