| IVAAAAN | 08.07.2013 15:44 |
Цитата:
|
Сообщение от skrudjmakdak
(Сообщение 261012)
я раз 100 сгенерил, у меня все норм.. можете тогда скрин прислать??
|
Генерация блоков
Вот я генерирую блоки так
var level, size;
level = 1;
for(var i = level;i<level+4;i++){
$("#game_area").append('<div class="num'+i+'"><p class="numValue'+i+'">'+rand(1,10)+'</p></div>');
size = rand(50,100);
margin = rand(1,120);
marginLeft = rand(1, 300);
$(".num" +i).css({
'width':size,
'height':size,
'border-radius':size + 1,
'margin-top':margin,
'margin-left':marginLeft,
'border':'1px solid #000',
'text-align': 'center',
'cursor': ' pointer'
});
$(".numValue").css({
'padding':rand(50,100)/5
});
}
Но случается когда они вылазят за нужную мне область, этом случае #game_area, не могу никак рассчитать чтобы они не вылазили, помогите |
где то я это уже видел)))
|
Цитата:
|
кстати, где сама функция rand, как вы ее описали.. покажите
|
не понимаю зачем она вам, но вот
function rand(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
|
ну.. что можно сказать? как высчитать область?? это размер самого блока плюс его сдвиг, поэтому
максимальный размер блока у нас равен: 100 пикселей (плюс рамка, по 1-му пикселю с каждой из сторон) итого конечный максимальный размер блока МОЖЕТ составить 104px, а максимальный сдвиг по оси: Y: 120 пикселей X: 300 пикселей тогда рабочая область у нас должна быть: x: 404px y: 224px |
skrudjmakdak,
что-то как-то не ясно ничего :-? |
какая у вас сейчас рабочая область?
|
700x500px
|
ммм. а можно всю страничку показать, видимо я чего то недогоняю
|
index.html:
<!DOCTYPE HTML> <div id="game_area"> </div> script.js:
function rand(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function generate(){
var level, size;
level = 1;
for(var i = level;i<level+level+1;i++){
var num = rand(1,10);
$("#game_area").append('<div class="num'+i+'"><p class="numValue'+i+'">'+num+'</p></div>');
size = rand(50,100);
margin = rand(1,104);
marginLeft = rand(1, 300);
$(".num" +i).css({
'width':size,
'height':size,
'border-radius':size + 1,
'margin-top':margin,
'margin-left':marginLeft,
'border':'1px solid #000',
'text-align': 'center',
'cursor': ' pointer'
});
$(".numValue").css({
'padding':rand(50,100)/5
});
}
}
css:
#game_area{
width: 700px;
height: 500px;
border:1px solid #ccc;
margin: 0 auto;
margin-top: 5px;
}
|
А где html, head, body, кодировка? :blink:
|
Цитата:
|
я раз 100 сгенерил, у меня все норм.. можете тогда скрин прислать??
|
Цитата:
|
ааа. нудак конечно.. у вас позиционирование какое? статичное, разумеется будет в низ тянуть. делайте абсолютное, а game_area релативное
|
ну и соответственно не margin-left и margit-top использовать надо будет.. а top и left
|
Цитата:
|
IVAAAAN, или поставьте для gamearea overflow:hidden, тогда ничего вылазить не будет :D
|
Цитата:
|
вы хотите реализовать такой алгоритм не парясь)) а так как вы хотите придется по парится.. либо заплатить за работу
|
либо ваш game_area не делать фиксированной высотой, а делать динамичным
|
я же код не прошу, просто подскажите как вычислить можно))
|
да тут сразу в голову и не придет как это все реализовать. написать можно, но это все таки дело времени. и я думаю что за даром вам мало кто поможет.. может и найдутся добрые люди))
|
Цитата:
|
Перед генерацией нового блока, циклом пробегайтесь по всем блокам, вычисляйте их позицию, ширину, высоту, составьте из этого математическое выражение и если новый блок никак не равен позициям других блоков, то добавляйте его, а если равен - то добавляйте его сместив на другие свободные координаты.
|
ну это уже не равномерное распределение..
|
function rand(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function maxArray(array ){
return Math.max.apply( Math, array );
}
function generate(){
var size, margins, level; //размер блока с числом, отступы между блоками, уровень
var margins = [];
level=10; //уровень
for(var i = level;i<level+level+1;i++){ //заносим сгенерированые отступы в массив
margins.push(rand(1,300));
}
for(var i = 0; i<margins.length;i++){ //сравниваем дабы избежать пересечений
if(maxArray(margins)==margins[0]){
margins.reverse();
}
var m =maxArray(margins)-margins[i];
if(m<=10){
$("#debug").html('Результат: блоки пересекутся;<br>Максимальный отступ: '+maxArray(margins)+'; <br>Разница: '+m + '<br>Числа:' + margins);
}
else{
size = rand(50,100);
$("#game_area").append('<div class="num'+i+'">'+rand(1,10) + '</div>');
$(".num"+i).css({
'position':'absolute',
'width': size,
'height': size,
'border-radius': size+1,
'top':margins[rand(0, margins.length)],
'left':margins[rand(0, margins.length)],
'border':'1px solid #ccc'
});
$("#debug").html('Результат: блоки не пересекутся;<br>Максимальный отступ: '+maxArray(margins)+'; <br>Разница: '+m + '<br>Числа:' + margins);
}
}
}
ну вот, что-то я наговнокодил, работает наполовину. т.е сравнение идет по left(x), т.е по координате x все ок, они не пересекаются, а по координате y(top) бывает пересекаются. как поправить ума не приложу :blink: |
| Часовой пояс GMT +3, время: 04:18. |