Форум

Mkaa · #1 (**permalink**) 01.09.2012, 02:55

Здравствуйте.
Имеются две функции. Обе работают по таймеру.
1.

function UnitCr(){

	var round = Math.round(Math.random() * 4);
	new_unit=document.createElement('div');
	new_unit.innerHTML='<img src="img/sq.png" />';
	new_unit.setAttribute("style","left:"+_xhostile[round]+"px;top:0px;position:absolute;");
	new_unit.setAttribute("id",count);
	_units[count]=new_unit;
	_xunits[count]=0;
	
	
	
	new_input.appendChild(_units[count]);
	
	count=count+1;
	
	}

^ Создание Элемента ^
2.

function UnitMov(){
	for(i=0;i<=count;i++)
	{	stick.value=i;
		_xunits[i]=_xunits[i]+2;
		_units[i].style.top=_xunits[i]+'px';
		
		if(_xunits[i]>400){
		//_units[i].style.top="0px";
		//_units[i].style.display="none";
		
		
		new_input.removeChild(_units[i]);<<< См. Сюда
		_units[i]=_units[count];
		_xunits[i]=_xunits[count];
		count=count-1;
		//var unitdel=_units[i];
		//document.getElementById('hostile').removeChild();
		
		
		
		/////neww_input._units[i].style.display="none";
		
		}
		
	}
	
}

^Движение элементов.^
После удаления элемента перестает работать функция движения элементов.

Вот сижу не сплю, пытаюсь понять почему.

bes · #2 (**permalink**) 01.09.2012, 11:03

Выложите тестовый пример с возможностью запуска [html run], экстрасенсы общаются на другом форуме

Mkaa · #3 (**permalink**) 01.09.2012, 14:28

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="0">
<meta http-equiv="last-modified" content="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://l2gj.gev1.ru/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
var _units=new Array();
var _xunits=new Array();
var _xhostile=new Array(0,40,80,120,160);
var count=0;
var stick;
var new_input;

var new_unit;

document.ready=function(){
stick = document.createElement("INPUT");
stick.setAttribute("value",count);
var new_put=document.getElementById('stick');
	new_put.appendChild(stick);
	
}
function UnitMov(){
	for(var i=0;i<=count;i++)
	{	stick.value=i;
		_xunits[i]=_xunits[i]+2;
		_units[i].style.top=_xunits[i]+'px';
		
		if(_xunits[i]>400){
		//_units[i].style.top="0px";
		//_units[i].style.display="none";
		
		new_input.removeChild(_units[i]);
		//new_input.removeChild(_units[i]);
		_units[i]=_units[count];
		_xunits[i]=_xunits[count];
		count=count-1;
		//var unitdel=_units[i];
		
		
		
		
		/////neww_input._units[i].style.display="none";
		
		}
		
	}
	
}
function UnitCr(){

	var round = Math.round(Math.random() * 4);
	new_unit=document.createElement('div');
	new_unit.innerHTML='<img src="http://l2gj.gev1.ru/img/sq.png" />';
	new_unit.setAttribute("style","left:"+_xhostile[round]+"px;top:0px;position:absolute;");
	new_unit.setAttribute("id",count);
	_units[count]=new_unit;
	_xunits[count]=0;
	
	
	new_input=document.getElementById('hostile');
	new_input.appendChild(_units[count]);
	
	count=count+1;
	
	}


var _unitmovetimer=setInterval(UnitMov, 10);
var _unitcrtimer=setInterval(UnitCr, 1000);
</script>

<style type="text/css">
body{background-color:#000000;}
.ground{border:1px solid #ffffff;margin: 1px auto;width:200px;height:400px;position:relative;}
#as{position: absolute; top: 320px; left: 160px; box-shadow: 1px 1px 5px #000000; }
#hostile{width:200px;height:400px;position:relative;}
#unit{background:url(http://l2gj.gev1.ru/img/sq.png);width:40px;height:40px;position:absolute;left:0px;right:0px;display:inline;}
#stick{border:1px solid #ffffff;margin: 1px auto;width:100px;height:50px;position:absolute;background-color:#ffffff;color:#000000;left:200px;top:0px;}
</style>
<body>
<div class="ground">
<div id="stick"></div>
<div id="hostile"></div>


</div>
</body></html>

bes · #4 (**permalink**) 01.09.2012, 15:08

В итоге-то, какой эффект должен получиться?

Mkaa · #5 (**permalink**) 01.09.2012, 15:15

элементы которые заходят за поле(вниз) должны удалятся.
Массив в который записываются элементы должен изменятся, а именно последний элемент массива должен переместится на место удаленного элемента. И счетчик массива уменьшается на 1. Получается так что при удаление первого элемента, все остальные перестают двигаться. Т.е. цикл не работает.
Почему так происходит я не пойму=(.

bes · #6 (**permalink**) 01.09.2012, 15:24

Вот база, остальное прикрутите

<style>
	.div {
		position: absolute;
		left: 100px;
		width: 20px;
		height: 20px;
		border: solid 3px navy;
	}
</style>
<body>

<script>
window.onload = function () {
	function move () {
		var elem = document.createElement('div');
		elem.className = 'div';
		elem.style.top = '0px';
		document.body.appendChild(elem);
		var int = setInterval(function () {
			var top = parseInt(elem.style.top);
			if (top > 200) {
				clearInterval(int);
				document.body.removeChild(elem);
			} else {
				elem.style.top = top + 1 + 'px';
			}
		}, 10)
	}
	
	setInterval(function () {move()}, 1000);
}
</script>

Mkaa · #7 (**permalink**) 01.09.2012, 15:42

В принципе работает, но мне интересно почему цикл не пашет? Ведь все очевидно, блин... Ошибок же не выдает...

Mkaa · #8 (**permalink**) 01.09.2012, 15:43

_units[i]=_units[count];

что происходит в этот момент, что цикл вырубается.

Deff · #9 (**permalink**) 01.09.2012, 15:56

Mkaa,
А выведите в консоль count и =_units[count];

bes · #10 (**permalink**) 01.09.2012, 16:20

Deff, там ссылки на элементы, неувязка в том, что всё происходит не синхронно, так как новый элемент, ссылка на который добавляется в конец массива происходит раньше и ссылки на элементы, которые ещё не дошли до низа просто теряются, так как заменяются новыми

Mkaa, объясняйте подробнее конечный эффект, который должен получиться

Форум

Справочник

Discord чат

Курсы javascript