Нужно сделать так чтобы текст по квадрату, но он двигается только вправо и вниз, немогу остановить if statement,

Question

Хотел сделать так чтобы текст двигался по краям квадрата 200x200 но сделал максимум направо и вниз, помогите в решении этой задачи и желательно с объяснением, так как это для обучения:

<!DOCTYPE html>
<html>
<head>
    <title>JS</title>
</head>
<body>
    <h1 id="heading">Hi, world!</h1>
    

 


<script src = "https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        var leftOffset = 0;
        var topOffset = 0;
            function moveHeadingleft () {
                $("#heading").offset({ left: leftOffset})
                $("#heading").offset({ top: topOffset})

                if (leftOffset ===207) {

                }

                if (leftOffset < 207) {
                    leftOffset++;
                }else if (topOffset < 222) {
                    topOffset++
                } else if (leftOffset != 0) {
                    leftOffset = 207;
                    leftOffset--
                } else if (topOffset != 0) {
                    topOffset--
                }
            }
            setInterval(moveHeadingleft, 30);

    </script>
</body>
</html>

Answer 1

В общем случае, так:

let x = 0, dx = 1,
    y = 0, dy = 0;

setInterval(moveHeadingleft, 10);

/***/
function moveHeadingleft() {
  $("#heading").offset({ left: x, top: y });

  x += dx;
  y += dy;
  
  if (x >= 150) { // Дошел до правого края, `x` перестает меняться, `y` растет
    x = 150; dx = 0; dy = 1;
  }
  if (y >= 150) { // до нижнего края: `x` начинает уменьшаться, `y` не меняется
    y = 150; dx = -1; dy = 0;
  }
  if (x < 0) {
    x = 0; dx = 0; dy = -1;
  }
  if (y < 0) {
    y = 0; dx = 1; dy = 0;
  }
}

body { margin: 0; }
.box { background: orange; width: 150px; height: 150px; position: absolute; top: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box"></div>
<h1 id="heading">Hi, world!</h1>

Т.е. В любой момент времени координаты x и y должны меняться на 1, -1 или 0.
Как только одна из координат превышает предельное значение, происходят переключения dx и dy.

Но надо подумать, может есть что-то красивее)

Answer 2

<!DOCTYPE html>
<html>
<head>
    <title>JS</title>
</head>
<body>
    <h1 id="heading">Hi, world!</h1>
    

 


<script src = "https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        var leftOffset = 0;
        var topOffset = 0;
            function moveHeadingleft () {
                $("#heading").offset({ left: leftOffset})
                $("#heading").offset({ top: topOffset})

                if (leftOffset ===207) {

                }

                if (leftOffset < 207) {
                    leftOffset++;
                }else if (topOffset < 222) {
                    topOffset++
                } else if (leftOffset != 0) {
                    leftOffset = 207;
                    leftOffset--
                } else if (topOffset != 0) {
                    topOffset--
                }
            }
            setInterval(moveHeadingleft, 30);

    </script>
</body>
</html>

БЛОГ НА HUSL

Нужно сделать так чтобы текст по квадрату, но он двигается только вправо и вниз, немогу остановить if statement,

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