Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Animate [jQuery] (https://javascript.ru/forum/misc/30477-animate-%5Bjquery%5D.html)

dixonich 06.08.2012 00:05

Animate [jQuery]
 
Анимирую передвижение элемента (меняю свойство top), и надо узнать, пока оно летит, попадает ли этот элемент в нужную область. Т.е. можно ли динамически (пока летит элемент) проверять, равен ли top нужному числу?

Deff 06.08.2012 00:59

dixonich,
Вопрос - а что: Объект куды попадать - тоже движецо - или что ? Вы ведь заранее можете расчитать позицию перед запуском анимашки ?

dixonich 06.08.2012 11:21

Нет, не могу. Пытаюсь делать так :
setInterval(
	function() { 
		if($(".pifpaf").css("top") >= "400px" && $(".pifpaf").css("top") <= "405px") alert(1);
	}, 0.1);


Объектов много и они постоянно в движении, если что. Один раз запускаю объект, получаю алерты, запускаю ещё раз и тишина. В чём проблема?

Deff 06.08.2012 11:54

dixonich,
Нужен запускаемый код на два объекта(движимый и цель) вместе с HTML
Код должен как то работать и показывать трабл

dixonich 06.08.2012 12:10

Цитата:

Сообщение от Deff (Сообщение 194884)
dixonich,
Нужен запускаемый код на два объекта(движимый и цель) вместе с HTML
Код должен как то работать и показывать трабл

setInterval(
	function() { 
		if($(".pifpaf").css("top") >= "400px" && $(".pifpaf").css("top") <= "405px") alert(1);
	}, 0.1);

var i = 0;
function GetKey (event) {
  var key = event.keyCode;
  var left = $("#machine").css("left");
  if(key == 39 && left != "600px") {
    $("#machine").animate({"left": "+=30px"}, 1);
  }
  if(key == 37 && left != "0px" ) {
    $("#machine").animate({"left": "-=30px"}, 1);
  }
  if(key == 38) {
    i++;
    var _left = $("#pistol").css("left"); 
    var summ = parseInt(_left) + parseInt(left);
    $("#main").append("<div class = 'pifpaf'id = 'pifpaf" + i +"'style = 'left:" + summ + "'></div>");
    $("#pifpaf" + i).animate({"top": "-=800px"}, 5000);
  }
}
function getRandom(){
  return (Math.floor(Math.random() * 9) % 2);
}

function GenerateArray(){
  var map = new Array();
  for(var i = 0; i < 20; i++) {
    map[i] = new Array();
    for(var j = 0; j < 4; j++) {
      map[i][j] = getRandom();
    }
  }
}
function RandomAttack () {
  var _left = 35;
  var _top = 0;
  $("#main").append("<div class = 'enemy' style = 'left:"+ _left +"''></div>");
  var map = new Array();
  for(var i = 0; i < 20; i++) {
    map[i] = new Array();
    for(var j = 0; j < 4; j++) {
      map[i][j] = getRandom();
    }
  }
  var it = 0;
  for(var i = 0; i < 20; i++) {
    for(var j = 0; j < 4; j++) {
        if(it == 20) {
          it = 0;
          _top += 30;
          _left = 35;
        }
        it++;
        $("#main").append("<div class = 'enemy' style = 'left:"+ _left +";top:"+ _top +"'></div>");
        _left += 30;
    }
  }
}

<html>
<head>
	<title></title>
	<link rel = "stylesheet" href = "style.css" />
	<script type="text/javascript" src = "logic.js"></script>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body onkeydown="GetKey(event);" onload = "RandomAttack();">
	<div id = "container">
		<div id = "content">
			<div id = "main">
				<div id = "bullet">

				</div>
			</div>
			<div id = "footer">
				<div id = "machine" onclick="fly()"> 
					<div id = "pistol"> </div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Код:

html, body {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
}
div#container {
        width:100%;
        height:100%;
}
div#footer {
        width:100%;
        height: 5%;
        min-height:50px;
        background: #7B68EE;
}
div#content {
        width:80%;
        height:100%;
        min-width: 680px;
        max-width: 680px;
        min-height: 800px;
        background: #FFDAB9;
        position: relative;
        margin:0px auto;
}
div#main {
        width:100%;
        height:95%;
        min-height: 680px;
        background: #0000CD;
}
div#machine {
        width:80px;
        height: 5%;
        min-height:50px;
        background: #1C1C1C;
        position: absolute;
        left:0px;
}
div#pistol {
        background: red;
        position: absolute;
        width:10px;
        height: 20px;
        left:35px;
}
.pifpaf {
        width:10px;
        height: 10px;
        left:0px;
        top:920px;
        position: absolute;
        background: green;
        border-radius: 50%;
}
.enemy {
        width:20px;
        height: 20px;
        left:0px;
        top:0px;
        position: absolute;
        background: yellow;
}


Deff 06.08.2012 12:45

<html>
<head>
	<title></title>
	<!--<link rel = "stylesheet" href = "style.css" />-->
<style type="text/css">

html, body {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}
div#container {
	width:100%;
	height:100%;
}
div#footer {
	width:100%;
	height: 5%;
	min-height:50px;
	background: #7B68EE;
}
div#content {
	width:80%;
	height:100%;
	min-width: 680px;
	max-width: 680px;
	min-height: 800px;
	background: #FFDAB9;
	position: relative;
	margin:0px auto;
}
div#main {
	width:100%;
	height:95%;
	min-height: 680px;
	background: #0000CD;
}
div#machine {
	width:80px;
	height: 5%;
	min-height:50px;
	background: #1C1C1C;
	position: absolute;
	left:0px;
}
div#pistol {
	background: red;
	position: absolute;
	width:10px;
	height: 20px;
	left:35px;
}
.pifpaf {
	width:10px;
	height: 10px;
	left:0px;
	top:920px;
	position: absolute;
	background: green;
	border-radius: 50%;
}
.enemy {
	width:20px;
	height: 20px;
	left:0px;
	top:0px;
	position: absolute;
	background: yellow;
}

</style>

	<script type="text/javascript" src = "logic.js"></script>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body onkeydown="GetKey(event);" onload = "RandomAttack();">
	<div id = "container">
		<div id = "content">
			<div id = "main">
				<div id = "bullet">

				</div>
			</div>
			<div id = "footer">
				<div id = "machine" onclick="fly()"> 
					<div id = "pistol"> </div>
				</div>
			</div>
		</div>
	</div>
<script>
var ThisTimId;
ThisTimId = setInterval(
	function() { 
		if($(".pifpaf:last").css("top") >= "400px" && $(".pifpaf").css("top") <= "405px") alert(1);
	}, 10);

var i = 0;
function GetKey (event) {
  var key = event.keyCode;
  var left = $("#machine").css("left");
  if(key == 39 && left != "600px") {
    $("#machine").animate({"left": "+=30px"}, 1);
  }
  if(key == 37 && left != "0px" ) {
    $("#machine").animate({"left": "-=30px"}, 1);
  }
  if(key == 38) {
    i++;
    var _left = $("#pistol").css("left"); 
    var summ = parseInt(_left) + parseInt(left);
    $("#main").append("<div class = 'pifpaf'id = 'pifpaf" + i +"'style = 'left:" + summ + "'></div>");
    $("#pifpaf" + i).animate({"top": "-=800px"}, 5000);
  }
}
function getRandom(){
  return (Math.floor(Math.random() * 9) % 2);
}

function GenerateArray(){
  var map = new Array();
  for(var i = 0; i < 20; i++) {
    map[i] = new Array();
    for(var j = 0; j < 4; j++) {
      map[i][j] = getRandom();
    }
  }
}
function RandomAttack () {
  var _left = 35;
  var _top = 0;
  $("#main").append("<div class = 'enemy' style = 'left:"+ _left +"''></div>");
  var map = new Array();
  for(var i = 0; i < 20; i++) {
    map[i] = new Array();
    for(var j = 0; j < 4; j++) {
      map[i][j] = getRandom();
    }
  }
  var it = 0;
  for(var i = 0; i < 20; i++) {
    for(var j = 0; j < 4; j++) {
        if(it == 20) {
          it = 0;
          _top += 30;
          _left = 35;
        }
        it++;
        $("#main").append("<div class = 'enemy' style = 'left:"+ _left +";top:"+ _top +"'></div>");
        _left += 30;
    }
  }
}

</script>
</body>
</html>

Не запускается - Возможно из-за этого
<script type="text/javascript" src = "logic.js"></script>
Т.е летящего объекта - не вижу

dixonich 06.08.2012 16:06

logic.js - это код, который я кинул.
запускается клавишами : влево, вправо - движение, вперёд - пускает шарик в полёт

Deff 06.08.2012 16:23

dixonich,
:-E Чот поправил ( свойства могут считывацо ток у единственного элемента - посольку строит класс - поставил last

function() { 
096	        if($(".pifpaf:last").css("top") >= "400px" && $(".pifpaf").css("top") <= "405px") alert(1);
097	    }, 10);

dixonich 06.08.2012 20:13

не, это плохое решение) я чего-то не подумал, что будет удаляться ещё то, что летит)

не могу сообразить, как можно сделать всё это.

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

Deff 06.08.2012 20:16

dixonich,
Лучший способ - наращивать id у кадого нового мячика - по пуску - для каждого лично запускать свой таймер проверки и по окончании движения - обязательно его удалять
установка-удаление таймера

var intervalIDNum1 = setInterval(...)
clearInterval(intervalIDNum1)


http://javascript.ru/setInterval

Для каждого таймера - свой идентификатор

dixonich 06.08.2012 21:22

Ну, т.е., как я понял, делаю так.

var i;

нажали_кнопку {
i++;
пускать_пулю(<div id = "pifpaf" + i ...);
}

Т.е. пускаю пулю со своим идентификатором, но, как в таймере проверять, попала ли пуля?
И ещё, как можно узнать, находится ли координаты pifpaf + i находятся в объекте?
Т.е. такой объект : var obj = { enemy1: "top-35;left-50", .... }; ?

Deff 06.08.2012 21:34

dixonich,
На каждую пулю ставим(по кнопке) свой таймер с своим идентификатором
После остановки пули убираем таймер - путем

clearInterval(Тут идентификатор нужного таймера)

Deff 06.08.2012 21:37

Цитата:

Сообщение от dixonich
И ещё, как можно узнать, находится ли координаты pifpaf + i находятся в объекте?
Т.е. такой объект : var obj = { enemy1: "top-35;left-50", .... }; ?

http://javascript.ru/forum/offtopic/...tml#post189280 Вот идея от Раед -пост 13

dixonich 06.08.2012 21:56

Не могу никак понять :)
Можете примерный псевдокод накидать, пожалуйста.

dixonich 06.08.2012 22:27

Цитата:

Сообщение от Deff (Сообщение 195084)
dixonich,
На каждую пулю ставим(по кнопке) свой таймер с своим идентификатором
После остановки пули убираем таймер - путем

clearInterval(Тут идентификатор нужного таймера)

Пытаюсь сделать так :
setInterval(
	function() { 
		if($("#pifpaf" + i).css("top") >= "400px" && $("#pifpaf" + i).css("top") <= "405px") {$("#pifpaf" + i).remove(); }
	}, 1);


то есть каждую милисекунду проверяю, попал ли div с нужным идентификатором в область, но почему-то всё не успевает он поймать, если запустить много объектов. если по-тихоньку - всё ловит.
i - глобальная переменная, которая плюсуется каждый раз, как запустили пулю.

Deff 06.08.2012 22:52

dixonich,
1 - cтавь от 12 милисекунд и выше - чаще запускаться не будет
2. Нет идентификатора для каждого таймера - у Вас будет память ужирацо поскольку функция запускается даже после уничтожения объекта слежения!
Читайте по ссылке про ID таймера и пример я Вам привёл - пост 10 (к id таймера - добавлем тот же i что и к id шарика
тогда функция сможет сама себя делетить после окончания движения шара

dixonich 07.08.2012 00:25

И как мне пристроить i то туда тогда? ))
чтобы было var id + i =

Deff 07.08.2012 00:54

dixonich,
var IntervalId=[];

function SetTimer(i) { 
IntervalId[i]= setInterval(
	function() { 
		if($("#pifpaf" + i).css("top") >= "400px" && $("#pifpaf" + i).css("top") <= "405px")
		{
			$("#pifpaf" + i).remove(); clearInterval(IntervalId[i]);
		}
	}, 12);
}


По кнопке запускаем шарик и функцию SetTimer(i)

dixonich 07.08.2012 15:33

Цитата:

Сообщение от Deff (Сообщение 195118)
dixonich,
var IntervalId=[];

function SetTimer(i) { 
IntervalId[i]= setInterval(
	function() { 
		if($("#pifpaf" + i).css("top") >= "400px" && $("#pifpaf" + i).css("top") <= "405px")
		{
			$("#pifpaf" + i).remove(); clearInterval(IntervalId[i]);
		}
	}, 12);
}


По кнопке запускаем шарик и функцию SetTimer(i)

Спасибо больше. И, последний вопрос. Вот функция проверки :
function checker(i) {
  var ids = new Array();
  ids[i]  = setInterval(
  	function check() { 
		var left = $("#pifpaf" + i).css("left");
		var top = $("#pifpaf" + i).css("top");
		//var met = parseInt(left) + parseInt(top);
		var met = parseInt(left) + "|" + parseInt(top);
		if(met in enemy) { $("#pifpaf" + i).remove(); $("#" + enemy[met]).remove(); clearInterval(ids[i]);}
  		
  	}, 12);
}


в у enemy такая структура : enemy = {"120|150" : "enemy1" ... }

т.е. координаты объекта и его айди.

проверяю координаты пули, и если координаты пули в объекте есть, то удаляю по айдишнику противника.

но, работает крайне странно, то удаляет, то не удаляет, то пропускает противника, то нет. не подскажите, в чём проблема?

Deff 07.08.2012 15:57

dixonich,
Не вижу проверки
Есть top; left (левый верхний край мишени) и размеры мишени width и height
проверяете
x > left ?; x < left+ width ?
y < top ?; x > top - height ?

dixonich 07.08.2012 16:49

Цитата:

Сообщение от Deff (Сообщение 195325)
dixonich,
Не вижу проверки
Есть top; left (левый верхний край мишени) и размеры мишени width и height
проверяете
x > left ?; x < left+ width ?
y < top ?; x > top - height ?

что есть x и y ?
как тогда организовать проверку без циклов и пробега и по объекту?

у меня проверка if (met in enemy) т.е. если объект полностью попал на соперника.

Deff 07.08.2012 16:54

dixonich,
x и у - координаты пули всё остальное - координаты мишени
хотя есть такая тема http://javascript.ru/forum/offtopic/...tml#post189280
в посте 13 была просьба определить соседний объект - точно так же можно определить и объект под текущей координатой

dixonich 07.08.2012 19:13

Цитата:

Сообщение от Deff (Сообщение 195354)
dixonich,
x и у - координаты пули всё остальное - координаты мишени
хотя есть такая тема http://javascript.ru/forum/offtopic/...tml#post189280
в посте 13 была просьба определить соседний объект - точно так же можно определить и объект под текущей координатой

а как можно организовать формат данных, чтобы проверка была наиболее быстрой?
то есть у меня заранее известны координаты мишеней, но координаты пули постоянно меняются, и бегать туда сюда циклами - это слишком долго. какие есть варианты?

Deff 07.08.2012 19:27

dixonich,
я же вам дал ссылку ? там по координатам - можно определить , к примеру id мишени(или её остутствие

dixonich 07.08.2012 20:36

Цитата:

Сообщение от Deff (Сообщение 195420)
dixonich,
я же вам дал ссылку ? там по координатам - можно определить , к примеру id мишени(или её остутствие

чего то не очень я понимаю) т.е. по координатам пули я определю координаты мишени? не очень я понимаю, как это возможно) даже смотря в код)

Deff 07.08.2012 20:38

Цитата:

Сообщение от dixonich
я определю координаты мишени? не очень я понимаю, как это возможно

Читайте тот топик, попробуйте задать вопрос втам


Часовой пояс GMT +3, время: 12:59.