Animate [jQuery]
Анимирую передвижение элемента (меняю свойство top), и надо узнать, пока оно летит, попадает ли этот элемент в нужную область. Т.е. можно ли динамически (пока летит элемент) проверять, равен ли top нужному числу?
|
dixonich,
Вопрос - а что: Объект куды попадать - тоже движецо - или что ? Вы ведь заранее можете расчитать позицию перед запуском анимашки ? |
Нет, не могу. Пытаюсь делать так :
setInterval( function() { if($(".pifpaf").css("top") >= "400px" && $(".pifpaf").css("top") <= "405px") alert(1); }, 0.1); Объектов много и они постоянно в движении, если что. Один раз запускаю объект, получаю алерты, запускаю ещё раз и тишина. В чём проблема? |
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 { |
<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> Т.е летящего объекта - не вижу |
logic.js - это код, который я кинул.
запускается клавишами : влево, вправо - движение, вперёд - пускает шарик в полёт |
dixonich,
:-E Чот поправил ( свойства могут считывацо ток у единственного элемента - посольку строит класс - поставил last function() { 096 if($(".pifpaf:last").css("top") >= "400px" && $(".pifpaf").css("top") <= "405px") alert(1); 097 }, 10); |
не, это плохое решение) я чего-то не подумал, что будет удаляться ещё то, что летит)
не могу сообразить, как можно сделать всё это. если у меня много однотипных объектов летят, как их обозначать и как получать к ним доступ? чтобы проверка на то, что объект попал в другой объект. |
dixonich,
Лучший способ - наращивать id у кадого нового мячика - по пуску - для каждого лично запускать свой таймер проверки и по окончании движения - обязательно его удалять установка-удаление таймера var intervalIDNum1 = setInterval(...) clearInterval(intervalIDNum1) http://javascript.ru/setInterval Для каждого таймера - свой идентификатор |
Ну, т.е., как я понял, делаю так.
var i; нажали_кнопку { i++; пускать_пулю(<div id = "pifpaf" + i ...); } Т.е. пускаю пулю со своим идентификатором, но, как в таймере проверять, попала ли пуля? И ещё, как можно узнать, находится ли координаты pifpaf + i находятся в объекте? Т.е. такой объект : var obj = { enemy1: "top-35;left-50", .... }; ? |
dixonich,
На каждую пулю ставим(по кнопке) свой таймер с своим идентификатором После остановки пули убираем таймер - путем clearInterval(Тут идентификатор нужного таймера) |
Цитата:
|
Не могу никак понять :)
Можете примерный псевдокод накидать, пожалуйста. |
Цитата:
setInterval( function() { if($("#pifpaf" + i).css("top") >= "400px" && $("#pifpaf" + i).css("top") <= "405px") {$("#pifpaf" + i).remove(); } }, 1); то есть каждую милисекунду проверяю, попал ли div с нужным идентификатором в область, но почему-то всё не успевает он поймать, если запустить много объектов. если по-тихоньку - всё ловит. i - глобальная переменная, которая плюсуется каждый раз, как запустили пулю. |
dixonich,
1 - cтавь от 12 милисекунд и выше - чаще запускаться не будет 2. Нет идентификатора для каждого таймера - у Вас будет память ужирацо поскольку функция запускается даже после уничтожения объекта слежения! Читайте по ссылке про ID таймера и пример я Вам привёл - пост 10 (к id таймера - добавлем тот же i что и к id шарика тогда функция сможет сама себя делетить после окончания движения шара |
И как мне пристроить i то туда тогда? ))
чтобы было var id + i = |
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" ... } т.е. координаты объекта и его айди. проверяю координаты пули, и если координаты пули в объекте есть, то удаляю по айдишнику противника. но, работает крайне странно, то удаляет, то не удаляет, то пропускает противника, то нет. не подскажите, в чём проблема? |
dixonich,
Не вижу проверки Есть top; left (левый верхний край мишени) и размеры мишени width и height проверяете x > left ?; x < left+ width ? y < top ?; x > top - height ? |
Цитата:
как тогда организовать проверку без циклов и пробега и по объекту? у меня проверка if (met in enemy) т.е. если объект полностью попал на соперника. |
dixonich,
x и у - координаты пули всё остальное - координаты мишени хотя есть такая тема http://javascript.ru/forum/offtopic/...tml#post189280 в посте 13 была просьба определить соседний объект - точно так же можно определить и объект под текущей координатой |
Цитата:
то есть у меня заранее известны координаты мишеней, но координаты пули постоянно меняются, и бегать туда сюда циклами - это слишком долго. какие есть варианты? |
dixonich,
я же вам дал ссылку ? там по координатам - можно определить , к примеру id мишени(или её остутствие |
Цитата:
|
Цитата:
|
Часовой пояс GMT +3, время: 12:59. |