高速無限ループを経由

Question

私は、このように移動するアニメーションボックスを作成しようとしていました - 開始ボタンのonclick、右、下、左と上。停止ボタンをクリックすると、それが何であっても動きが止まり、開始時に再びクリックされるとバックアップが選択されます。

私はそれが右から左へと左にあったときにうまく動作することができましたが、ループ全体（左→右→下→右→上）を作成しようとすると、問題に直面している。私は間違って何をしていますか？

コード：

var pos = 0; 
var pos1 = 0; 
var s = document.getElementById("start"); 
var st= document.getElementById("stop"); 
s.addEventListener("click",btstart); 
st.addEventListener("click",btstop); 
var t, t1; /*t and t1 should be global variables so they can be accessed by the btstop function*/ 
function btstart(){ 
    var box = document.getElementById('box'); 
    t = setInterval(movel, 10); 
} 

function movel() { 
    if(pos >= 150) { 
     t = setInterval(moveb, 50); 
    } 
    else { 
     pos += 1; 
     box.style.left = pos+'px'; 
    } 
} 

function moveb(){ 
    if (pos1 >= 150) 
    { 
     t = setInterval(mover, 50); 
    } 
    else { 
     pos1 += 1; 
     box.style.top = pos1+'px'; 
    } 
} 
function mover() { 
    if(pos === 0) { 
     t = setInterval(movet, 50); /*Note: clearing t, not t1. Ends the function/script completely*/ 
    } 
    else { 
     pos -= 1; 
     box.style.right = pos+'px'; 
    } 
} 
function movet(){ 
    if (pos1 === 0) 
    { 
     t = setInterval(movel, 50); 
    } 
    else { 
     pos1 -= 1; 
     box.style.bottom = pos1+'px'; 
    } 
} 

function btstop() { 
    clearInterval(t); 
    /*clearInterval(t1);*/ 
} 
/*var box = document.getElementById("box");*/ 

Answer 1

ここにあなたのコードは少し明確です。私はその後、私達にあなたのコードを表示位置

var box = document.getElementById("box"); 
 
var startButton = document.getElementById("start"); 
 
var stopButton = document.getElementById("stop"); 
 
startButton.addEventListener("click", start); 
 
stopButton.addEventListener("click", stop); 
 

 
var interval; 
 
var horizontal = 0; 
 
var vertical = 0; 
 
var space = 50; 
 

 
function start() { 
 
    interval = setInterval(function() { 
 
    if (horizontal === 0 && vertical === 0) { 
 
     //box is top left 
 
     setAndMove(space, 0, 'left', space); 
 
    } else if (horizontal === space && vertical === 0) { 
 
     //box is top right 
 
     setAndMove(space,space, 'top', space); 
 
    } else if (horizontal === space && vertical === space){ 
 
     //box is bottom right 
 
     setAndMove(0,space, 'left', 0); 
 
    } else if(horizontal === 0 && vertical === space){ 
 
    //box is bottom left 
 
     setAndMove(0,0, 'top', 0); 
 
    } 
 
    }, 1000); 
 
} 
 

 
function stop() { 
 
    clearInterval(interval); 
 
} 
 

 
function setAndMove(hori, vert, direction, directionValue){ 
 
    horizontal = hori; 
 
    vertical = vert; 
 
    box.style[direction] = directionValue + "px"; 
 
}

#box { 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: red; 
 
    position: fixed; 
 
} 
 
#start{ 
 
    margin-top: 100px; 
 
}

<div id="box"></div> 
 

 
<button id="start">Start</button> 
 
<button id="stop">Stop</button>