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 Для каждого таймера - свой идентификатор |
| Часовой пояс GMT +3, время: 15:52. |