Объект движется по кругу, меняя направление по клику

Question

При нажатии "Запустить" квадрат должен начать двигаться по часовой стрелке, после нажатия левой/правой кнопки мыши меняется направление по часовой стрелке/против. При нажатии "стоп" квадрат должен остановиться, далее после нажатия "Запустить" продолжить двигаться в том же направлении, что и до остановки.

Код работает, но некорректно, меняется направление только при двойном клике и не останавливается, почему-то отклоняется. Подскажите, как исправить, что изменить, чтобы корректно работало?

var t=0;
    st=false //остановить процесс
    
    function Start_stop()
    {   if(st)
       {    window.clearInterval(proc)    //остановиться
            st=false
            //заменить надпись на кнопке с именем В1
            document.all.B1.innerHTML="Запустить"  
       }
            else   //двигаться (запустить процесс с именем proc)
            {   
               
               proc=window.setInterval("move()",10)
               document.all.B1.innerHTML="Стоп" //заменить надпись на кнопке с именем В1
               st=true
              
               document.getElementById('click_me').oncontextmenu = function() {
               proc=window.setInterval("move_()",10)  
               
               }
               
               document.getElementById('click_me').onclick = function() {
               proc=window.setInterval("move()",10)       
               
               }
               
             }
    }
    
    function move()
    {   
        
        var R = 2;
        var dx = R * Math.cos(t);
        var dy = R * Math.sin(t);
        
        var y = parseFloat(square.style.top);
        var x = parseFloat(square.style.left);
            
        square.style.top = y + dy + "px";
        square.style.left = x + dx + "px";

        t += 0.02;
        }

    
    function move_()
    {
       var square = document.getElementById("square");
        var R = 2;
        var dx = R * Math.cos(t);
        var dy = R * Math.sin(t);
        
        var y = parseFloat(square.style.top);
        var x = parseFloat(square.style.left);

        square.style.top = y - dy + "px";
        square.style.left = x - dx + "px";

        t -= 0.02;
    }

<BUTTON ID="B1" onclick=Start_stop() STYLE="position:absolute">Запустить</button>
<button id="click_me" STYLE="position:absolute;left:700;top:5; margin-top:30px;">Правая - против часовой стрелки/левая - по часовой</button>
<div ID="square" style="top:100px; left:150px; position: absolute; background-color:red; width: 50px; height: 50px;"></div>

Answer 1

Не очищал интервал при нажатии. И это, ещё одно, всё-таки в жс не оч приветствуется сишный стиль :)

Вот тут надо ещё clearInterval() вызывать

document.getElementById('click_me').onclick = function() {
  window.clearInterval(proc) // <-------
  proc=window.setInterval(move,10)       
}

ну и соответсвенно в колбэке rmb так же.

var t=0;
st=false //остановить процесс
    
  function Start_stop() {   
    if(st) {    
      window.clearInterval(proc)    //остановиться
      st=false
      //заменить надпись на кнопке с именем В1
      document.all.B1.innerHTML="Запустить"  
    } else { //двигаться (запустить процесс с именем proc)
      proc=window.setInterval(move,10)
      document.all.B1.innerHTML="Стоп" //заменить надпись на кнопке с именем В1
      st=true
      document.getElementById('click_me').oncontextmenu = function() {
        window.clearInterval(proc)
        proc=window.setInterval(move_,10)  
      }               
      document.getElementById('click_me').onclick = function() {
        window.clearInterval(proc)
        proc=window.setInterval(move,10)       
      }        
    }
  }
    
   function move() {   
    var R = 2;
    var dx = R * Math.cos(t);
    var dy = R * Math.sin(t);
        
    var y = parseFloat(square.style.top);
    var x = parseFloat(square.style.left);
            
    square.style.top = y + dy + "px";
    square.style.left = x + dx + "px";

    t += 0.02;
   }

    
   function move_() {
     var square = document.getElementById("square");
     var R = 2;
     var dx = R * Math.cos(t);
     var dy = R * Math.sin(t);
        
     var y = parseFloat(square.style.top);
     var x = parseFloat(square.style.left);

     square.style.top = y - dy + "px";
     square.style.left = x - dx + "px";

     t -= 0.02;
   }

<BUTTON ID="B1" onclick=Start_stop() STYLE="position:absolute">Запустить</button>
<button id="click_me" STYLE="position:absolute;left:700;top:5; margin-top:30px;">Правая - против часовой стрелки/левая - по часовой</button>
<div ID="square" style="top:100px; left:150px; position: absolute; background-color:red; width: 50px; height: 50px;"></div>

БЛОГ НА HUSL

Объект движется по кругу, меняя направление по клику

Ответы (1 шт):