Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 23.04.2016, 16:19   #1
Amx1337
 
Регистрация: 23.04.2016
Сообщений: 4
По умолчанию Шарики летящие навтречу друг-другу JS

Здравствуйте господа, передо мной стала делема, есть код(два шарика летят на встречу друг другу и отбиваются от верхней и нижней границы браузера). мне нужно чтобы они долетали только до центра и летели обратно, с первым шаром у меня получилось ето зделать путем деления "clientHeight" пополам(переменная Н). А со вторым так зделать не получается(стоит на месте), в чем проблема подскажите пожалуйста?

Код:
<html >
 
<head>
  <title></title>
</head>
 
<body id="body" >
        <img  id="move-me"  src="p1.bmp" style="position: absolute;"  height="80" width="80">
        <img  id="p"  src="p2.bmp" style="position: absolute;" height="80" width="80">
 
        <script type="text/javascript">
                var p = Math.PI / 2;
                var p1 = Math.PI / 2;   
                var r = 0;
                var r1 =0;   
                var l=document.getElementById('move-me').offsetLeft;
         var w=document.getElementById('move-me').offsetWidth;
         var W=document.getElementById('body').clientWidth-20;
         var t=document.getElementById('move-me').offsetTop;
         var h=document.getElementById('move-me').offsetHeight;
         var H=document.getElementById('body').clientHeight;
 
 
         var l1=document.getElementById('p').offsetLeft;
         var w1=document.getElementById('p').offsetWidth;
         var t1=document.getElementById('p').offsetTop;
         var h1=document.getElementById('p').offsetHeight;
        //  var W=document.getElementById('body').clientWidth;
             var  m1=H-h1, k1=0;
            function moveByLine() {
 
         
 
         var ln,tn,ln1, tn1;
                         ln=l+r*Math.cos(p);
                         tn=t+r*Math.sin(p);
 
                         ln1=k1+r*Math.cos(p1);
                         tn1=m1+r*Math.sin(p1);
 
                     // if(ln<0 || (ln+w)>=W ){p=Math.PI-p ;  r=1;}
                        if(tn<0 || (tn+h)>=H/2 ){p=-p ; r=1;}
                        l=l+r*Math.cos(p);
                         t=t+r*Math.sin(p);
 
                         //if(ln1<0 || (ln1+w1)>=W ){p1=Math.PI-p1 ;  r1=1;}
                        if(tn1<0 || (tn1+h1)>=H ){p1=-p1 ; r1=1;}
                        k1=k1+r1*Math.cos(p1);
                         m1=m1+r1*Math.sin(p1);
                         
                         
                        
 
                       document.getElementById('move-me').style.left=(l) + 'px';
                       document.getElementById('move-me').style.top=(t) + 'px';
                       document.getElementById('p').style.left=(k1) + 'px';
                       document.getElementById('p').style.top=(m1) + 'px';
                        r=r+0.1;
                        r1=r1+0.1;
 
    }
 
 
             document.getElementById('p').style.left=(0) + 'px';
           document.getElementById('p').style.top=(H-h1) + 'px';
 
           var moveInterval = setInterval(moveByLine, 20);
 
        </script>
</body>
 
</html>
Amx1337 вне форума Ответить с цитированием
Старый 23.04.2016, 19:30   #2
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

Вот так пойдет ?? http://pompiduskus2.0fees.us/public/js/bals-movement/

Это может будет тебе полезным. http://pompiduskus2.0fees.us/public/...2/sin.cos.html

И еще, я тебе очень рекомендую называть переменные по человечески.

Представь что ты пишешь программу которая имеет на борту 400 переменных. И все они имеют название вот такого типа

PHP код:
    var A_1A_2A_3;
    var 
B_1B_2B_3
Согласись что так не понятно что это такое. А если открыть такой код через год, то даже сам автор кода будет пол часа втыкать в монитор.

Лучше вот так. Любой человек, даже который вообще ни разу не присал программы, откроет и хоть примерно поймет что к чему!

PHP код:
    var BOX_A_TOPBOX_A_LEFTBOX_A_RIGHT;
    var 
BOX_B_TOPBOX_B_LEFTBOX_B_RIGHT
PHP код:
<!DOCTYPE html>
<
html>
<
head>
    <
meta charset="utf-8"/>
    <
title>bal-movement</title>

</
head>
 
<
body id="body" >
        <
img id="bal_1" src="bal_1.png" style="transition: all 0.2s; position: absolute; width: 80px; margin-top: 150px;"/>
        <
img id="bal_2" src="bal_2.png" style="transition: all 0.2s; position: absolute; width: 80px; margin-top: 150px;"/>
 
        <
script type="text/javascript">

            
// ========================================================================
            
var bal_1
            var 
bal_1_MARGIN_LEFT 250;

            var 
bal_2
            var 
bal_2_MARGIN_LEFT 700;


            var 
move_step 0.01;
            var 
moveInterval;

            var 
loop_counter 0;

            
// ========================================================================
            
window.addEventListener('load', function(){

                
// -------------------------------------------------------------
                
bal_1 document.getElementById('bal_1').style
                
bal_2 document.getElementById('bal_2').style

                
moveInterval setInterval(moveByLine20);
                
// -------------------------------------------------------------

            
});

            
// ========================================================================
            
function moveByLine() {

                
// -------------------------------------------------------------
                
loop_counter += move_step;
                
bal_1.marginLeft bal_1_MARGIN_LEFT+( Math.cos(loop_counter)*200 )+"px";

                
bal_2.marginLeft bal_2_MARGIN_LEFT+( Math.sin(loop_counter)*200 )+"px";
 
                
// -------------------------------------------------------------

            
}
            
            
// ========================================================================
 
        
</script>
</body>
 
</html> 
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/

Последний раз редактировалось pompiduskus; 23.04.2016 в 19:38.
pompiduskus вне форума Ответить с цитированием
Старый 23.04.2016, 21:00   #3
Amx1337
 
Регистрация: 23.04.2016
Сообщений: 4
По умолчанию

Спасибо за совет, обязательно учту))) А по поводу задания немножко не то, мне нужно что бы учитывалось масштабирование страницы. Тоесть при любом размере страницы они одинаково работали. Но все равно спасибо что откликнулись))
Amx1337 вне форума Ответить с цитированием
Старый 24.04.2016, 00:29   #4
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

Тогда вот так. как вариант. Мы тут ограничены только фантазией.

PHP код:
<script type="text/javascript">

    
// ========================================================================
    
var SCR_WIDTH document.body.clientWidth;


    var 
bal_1
    var 
bal_1_MARGIN_LEFT SCR_WIDTH/4*1;

    var 
bal_2
    var 
bal_2_MARGIN_LEFT SCR_WIDTH/4*3;

    var 
move_step 0.01;
    var 
moveInterval;

    var 
loop_counter 0;

    
// ========================================================================
    
window.addEventListener('load', function(){

        
// -------------------------------------------------------------
        
bal_1 document.getElementById('bal_1').style
        
bal_2 document.getElementById('bal_2').style

        
moveInterval setInterval(moveByLine20);
        
// -------------------------------------------------------------

    
});

    
// ========================================================================
    
function moveByLine() {

        
// -------------------------------------------------------------
        
loop_counter += move_step;
        
bal_1.marginLeft bal_1_MARGIN_LEFT+( Math.cos(loop_counter)*200 )+"px";

        
bal_2.marginLeft bal_2_MARGIN_LEFT+( Math.sin(loop_counter)*200 )+"px";

        
// -------------------------------------------------------------

    
}
    
    
// ========================================================================

</script> 
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
pompiduskus вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогаем друг другу в поиске музыки mihali4 Свободное общение 56 16.02.2017 22:03
Соответствует ли это железо друг к другу? _Dancer_ Компьютерное железо 149 31.08.2015 17:56
C++. Две функции в разных файлах мешают друг другу. Крот Помощь студентам 13 21.03.2012 14:56
Привязка окон друг к другу при перетаскивании Alexxx5800 Общие вопросы .NET 2 10.10.2010 20:19