05.05.2015, 15:35
|
|
Профессор
|
|
Регистрация: 21.03.2014
Сообщений: 173
|
|
|
Разместить блоки на случайных координатах экрана.
Здравствуйте.
Развиваю "пазл". В результате работы моей программы, получаю длинную линейку с блоками изображений. Хочу расположить их на случайных координатах окна браузера. Проблемы с кодом ниже:
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", поэтому, теперь в именах всех переменных ошибка. В редакторе заменить не получается (код перестаёт работать). Приношу свои извинения.
Последний раз редактировалось Blondinka, 05.05.2015 в 15:37.
|
|
05.05.2015, 18:33
|
 |
Профессор
|
|
Регистрация: 16.07.2014
Сообщений: 267
|
|
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); }
|
|
05.05.2015, 18:57
|
|
Профессор
|
|
Регистрация: 21.03.2014
Сообщений: 173
|
|
Sigizmund2012, спасибо. Я изменила свою функцию, как вы предложили. Затем подставила главную строку в другой цикл.
$(".block"+currentCell).offset({ top: getYPositionOfElement(), left: getXPositionOfElement() });
Работает. Размещает случайные блоки на случайных координатах. Не все, но я это исправлю. Код на GitHub обновила.
|
|
05.05.2015, 22:15
|
|
Профессор
|
|
Регистрация: 21.03.2014
Сообщений: 173
|
|
Моя программа генерирует блоки-невидимки.  Всего таких блоков 100. Но отображаются 0-10 штук. Кто-нибудь догадывается почему? |
|
05.05.2015, 22:31
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Blondinka,
1. relative
2. порядок вставки на страницу
3. zIndex
|
|
05.05.2015, 22:59
|
|
Профессор
|
|
Регистрация: 21.03.2014
Сообщений: 173
|
|
рони,
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/
Если долго перемещать блоки, то можно собрать картинку  , но это не удобно, потому что нужно постоянно скролить вниз. Интересно, почему?
|
|
05.05.2015, 23:15
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Blondinka,
зачем вам пазл? где-то идёт конкурс ?
|
|
05.05.2015, 23:30
|
|
Профессор
|
|
Регистрация: 21.03.2014
Сообщений: 173
|
|
|
рони, хочу стать программистом. Придумываю себе задания.
А что за конкурс?
|
|
05.05.2015, 23:37
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
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>
Последний раз редактировалось рони, 26.09.2018 в 14:42.
|
|
06.05.2015, 00:08
|
|
Профессор
|
|
Регистрация: 21.03.2014
Сообщений: 173
|
|
|
рони, спасибо. Работает.
|
|
|
|
