Javascript-форум - Разместить блоки на случайных координатах экрана.

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Разместить блоки на случайных координатах экрана. (https://javascript.ru/forum/dom-window/55586-razmestit-bloki-na-sluchajjnykh-koordinatakh-ehkrana.html)

Разместить блоки на случайных координатах экрана.

Здравствуйте.
Развиваю "пазл". В результате работы моей программы, получаю длинную линейку с блоками изображений. Хочу расположить их на случайных координатах окна браузера. Проблемы с кодом ниже:

function getXPositionOfElement() {//Получить случайные координаты x окна браузера.
        var x_position = Math.floor(Math.random() * window.innerWidth);
	    return x_position;
    }
	
	function getYPositionOfElement() {//Получить случайные координаты y окна браузера.
        var y_position = Math.floor(Math.random() * window.innerHeight);
	    return y_position;
    }
	
	function putPazzleInRandomXYCoordinats(){//Поместить в случайные координаты (см. функция getXPositionOfElement()) элементы массива в цикле.
	    for(var k=0; k<100; k++){
			getXPositionOfElement();
			getYPositionOfElement();
			$("div.block"+k).offset({ top: y_position, left: x_position });
			alert(y_position);//не работает даже с getXPositionOfElement()
		}
	}

Ссылка на остальной код https://github.com/VaAlina/puzzle

P.S. Я вовремя не проверила, как правильно писать слово "puzzle", поэтому, теперь в именах всех переменных ошибка. В редакторе заменить не получается (код перестаёт работать). Приношу свои извинения.

for(var k=0; k<100; k++){
13	            getXPositionOfElement();
14	            getYPositionOfElement();
15	            $("div.block"+k).offset({ top: y_position, left: x_position });
16	            alert(y_position);//не работает даже с getXPositionOfElement()
17	        }

Эти 2 функции вызываются и возвращают значения в никуда, попробуйте так:

for(var k=0; k<100; k++){
	            $("div.block"+k).offset({ top: getYPositionOfElement(), left: getXPositionOfElement() });
	            alert(y_position);	        }

Sigizmund2012, спасибо. Я изменила свою функцию, как вы предложили. Затем подставила главную строку в другой цикл.

$(".block"+currentCell).offset({ top: getYPositionOfElement(), left: getXPositionOfElement() });

Работает. Размещает случайные блоки на случайных координатах. Не все, но я это исправлю. Код на GitHub обновила.

Моя программа генерирует блоки-невидимки.

Всего таких блоков 100. Но отображаются 0-10 штук. Кто-нибудь догадывается почему?

Blondinka,
1. relative
2. порядок вставки на страницу
3. zIndex

рони,
1. Меняла на absolute, но ничего не улучшилось (в плане отображения).
2. Элементу, который создаётся в цикле, присваивается случайное положение на мониторе в том же цикле.

for(var currentCell=0; currentCell<cellAmount; currentCell++){//Пока, текущая ячейка меньше общего количества ячеек.
                ...
		$(".block"+currentCell).css({'position': 'relative','top' : verticalIndent+"px",'left' : horizontalIndent+"px"});//Присвоить текущему элементу уникальную позицию. Если в этой строке применить "position: absolute;" - блоков с изображениями будет еще меньше.
		$(".block"+currentCell).offset({ top: getYPositionOfElement(), left: getXPositionOfElement() });//Задать координаты.
		verticalIndent = verticalIndent-cellSize;
	}

Или, что вы хотите сказать?
3. Так-же, установила z-index: 1000, с тем же результатом. Блоку #pazzleHolder (div, который должен содержать все мелкие элементы, тот что с черной границей) присвоила z-index: 0.

Эта же программа, но без случайно расположенных блоков - http://mangal.biz/test/04_05_backup_v2/
Если долго перемещать блоки, то можно собрать картинку :lol: , но это не удобно, потому что нужно постоянно скролить вниз. Интересно, почему?

Blondinka,
зачем вам пазл? где-то идёт конкурс ?

рони, хочу стать программистом. Придумываю себе задания.
А что за конкурс?

Blondinka,
вам ненужно что-либо делать с классом картинок $(".block"+currentCell). вы их прячите тем самым внутри .pazzlePartHolder -- рандомизировать надо как раз этот класс.(над кодом можно ещё работать)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #eee;
}

.pazzlePartHolder{
width: 50px;
height: 50px;
overflow: hidden;
 position: absolute;
}

.topOfTheRow{
float: left;
display: inline-block;
display: inline;
}

#pazzleHolder{
margin-left: 25%;
border: 2px solid black;
width: 600px;
height: 600px;
}
</style>
<title>Pazzle</title>
</head>
<body>

<input type="button" value="start new game" onclick ="location.reload();" />
<input type="button" value="display random element position" onclick ="putPazzleInRandomXYCoordinats()" />

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script>$(document).ready(function(){
//Переменную cellSize не менять!!! Не присваивать ей ноль.
var cellSize = 50, //Размер ячейки.
    imgSize = 500, //Размер изображения.
	rowAmountConst = imgSize/cellSize, //Количество колонок. Будет задано одинаковое количество колонок и рядов.
	rowAmount = 0,//Количество колонок для счётчика, чтоб не менять основную переменную.
	currentRow = 0,//Текущий ряд.
	cellAmount = rowAmountConst*10, //Общее количество ячеек.
	horizontalIndent = 0,//Горизонтальный отступ.
	verticalIndent = 0;//Вертикальный отступ.
	//$(".pazzlePartHolder").css({"width":cellSize+"px", "height":cellSize+"px"});//Функция работает некорректно.
    $("body").append("<div id='pazzleHolder'>");//Открыть div, содержащий весь пазл.
    for(var currentCell=0; currentCell<cellAmount; currentCell++){//Пока, текущая ячейка меньше общего количества ячеек.
	    $("div#pazzleHolder").append("<div id="+currentCell+" class='pazzlePartHolder draggable'></div>");//Добавить блок, содержащий часть пазла.
        $("div#"+currentCell).append("<img src='http://mangal.biz/test/04_05_backup_v2/wallpaper.jpg' class='"+"block"+currentCell+"' alt='img' />");//В этот блок добавить img и присвоить уникальный класс "block"+i+.
		if(currentCell==0){//Если отображается первая ячейка, то задать ей нулевое смещение вверх.
		    $(".block"+currentCell).css({'position': 'relative','top' : 0+"px",'left' : 0+"px", 'padding':'0px'});
		}else if(currentCell==cellAmount)break;//Если цикл добрался до последней ячейки - завершить итерации.
		if(currentCell==rowAmount){
		    rowAmount+=rowAmountConst;//Если текущая ячейка равна концу ряда, то увеличить её на количество ячеек в ряду. Чтоб можно было сравнивать с крайними числами (например: 3, 6, 9, 12, 16).
			horizontalIndent=horizontalIndent-cellSize;//Сдвинуть координаты отступа (смещения) left.
			verticalIndent = 0;//...и top. Сдвинуть координаты в начало следующего столбца.
			$(currentCell).addClass("topOfTheRow");//Присвоить класс текущему элементу, благодаря чему, в стилях можно будет задать display: inline-block;, для данного класса.
		}
		$(".block"+currentCell).css({'position': 'relative','top' : verticalIndent+"px",'left' : horizontalIndent+"px"});//Присвоить текущему элементу уникальную позицию.
	//	$(".block"+currentCell).offset({ top: getYPositionOfElement(), left: getXPositionOfElement() });
		verticalIndent = verticalIndent-cellSize;
	}
	//$("body").append("</div>");


	for(var currentCell=0; currentCell<cellAmount; currentCell++){
	   //	$(".block"+currentCell).offset({ top: getYPositionOfElement(), left: getXPositionOfElement() });
	}
    $(".pazzlePartHolder").each(function(indx, element){
          $(this).css({top: getYPositionOfElement(), left: getXPositionOfElement()})

          });

	$( ".draggable" ).draggable();
});

	function getXPositionOfElement() {//Получить случайные координаты x окна браузера.
        var x_position = Math.floor(Math.random() * $(window).width());
	    return x_position;
    }

	function getYPositionOfElement() {//Получить случайные координаты y окна браузера.
        var y_position = Math.floor(Math.random() * $(window).height());
	    return y_position;
    }
	</script>
</body>

</html>

рони, спасибо. Работает.