Помогите написать код на Javascript: Движение с ускорением вверх и вниз(анимация)

Question

Пользователь вводит с клавиатуры начальную скорость при броске мяча вверх. Нужно визуализировать его движение согласно законам физики. То есть он должен взлетать с постепенно уменьшающейся скоростью(ускорение 9.8), а потом падать вниз с постепенно увеличивающейся скоростью. У нас есть два кода, но один не работает, а другой работает, но чрезвычайно неверно и криво.

Попытка 1 (Криво работает(очень))

var inputtt = document.getElementById('v0')
var brick = document.getElementById('brick')
let h = h1 = Number(inputtt.value);
let u = -100; // начальное ускорение
let k = h1 * h1 / 20; // высота полёта
let step = h1; // скорость полёта
brick.onclick = () => {
  let timer = setInterval(() => {
    brick.style.top = h + "px";
    h += u * step; // как меняется высота
    u += 9.81 * step * k; // как меняется ускорение
    if (h > h1) {
      clearInterval(timer);
      u = -100;
    }
  }, 20);
}

#brick {
  width: 40px;
  height: 20px;
  background: #EE6B47;
  position: relative;
  cursor: pointer;
}

<input type='number' id='v0' value="10">
<div id="brick"></div>

Попытка 2 (Не работает)

var inputtt = document.getElementById('v0')
var brick = document.getElementById('brick')
let v = Number(inputtt.value);
let h = v * v / 20;
brick.onclick = () => {
  let timer = setInterval(() => {
    let s = s + v * 0.2
    brick.style.top = s + "px";
    v = v - 9.8 * 0.05;
    if (v <= 0) {
      clearInterval(timer);
    }
  }, 50);
}

#brick {
  width: 40px;
  height: 20px;
  background: #EE6B47;
  position: relative;
  cursor: pointer;
}

<input type='number' id='v0' value="10">
<div id="brick"></div>

И да, я не особо шарю в JS;

Answer 1

Ввели скорость v = v0 (положительное направление - вверх)
Присвоили начальное положение, например, h = h0 = 0
Назначили временной интервал dt
На каждом шаге:
..Если h < 0 (или другой критерий) - закончили
..Вывели положение h или отрисовали
..Изменили положение h = h + v * dt
..Изменили скорость v = v - g * dt

БЛОГ НА HUSL

Помогите написать код на Javascript: Движение с ускорением вверх и вниз(анимация)

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