wintercn/sim.html

## sim.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .ball {
      width:10px;
      height:10px;
      background-color:black;
      border-radius:5px;
      position:absolute;
      left:0;
      top:0;
      transform:translateY(180px);
    }
  </style>
</head>
<body>
  <label>运动时间：<input value="3.6" type="number" id="t" />s</label><br/>
  <label>初速度：<input value="-21" type="number" id="vy" /> px/s</label><br/>
  <label>水平速度：<input value="21" type="number" id="vx" /> px/s</label><br/>
  <label>重力：<input value="10" type="number" id="g" /> px/s²</label><br/>
  <button onclick="createBall()">来一个球</button>
</body>
</html>

## sim.js
function generateCubicBezier (v, g, t){
    var a = v / g;
    var b = t + v / g;

    return [[(a / 3 + (a + b) / 3 - a) / (b - a), (a * a / 3 + a * b * 2 / 3 - a * a) / (b * b - a * a)],
        [(b / 3 + (a + b) / 3 - a) / (b - a), (b * b / 3 + a * b * 2 / 3 - a * a) / (b * b - a * a)]];
}

function createBall() {
  var ball = document.createElement("div");
  var t = Number(document.getElementById("t").value);
  var vx = Number(document.getElementById("vx").value);
  var vy = Number(document.getElementById("vy").value);
  var g = Number(document.getElementById("g").value);
  ball.className = "ball";
  document.body.appendChild(ball)
  ball.style.transition = `left linear ${t}s, top cubic-bezier(${generateCubicBezier(vy, g, t)}) ${t}s`;
  setTimeout(function(){
    ball.style.left = `${vx * t}px`;
    ball.style.top = `${vy * t + 0.5 * g * t * t}px`;
  }, 100);
  setTimeout(function(){ document.body.removeChild(ball); }, t * 1000);
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style>
	.ball {
	width:10px;
	height:10px;
	background-color:black;
	border-radius:5px;
	position:absolute;
	left:0;
	top:0;
	transform:translateY(180px);
	}
	</style>
	</head>
	<body>
	<label>运动时间：<input value="3.6" type="number" id="t" />s</label><br/>
	<label>初速度：<input value="-21" type="number" id="vy" /> px/s</label><br/>
	<label>水平速度：<input value="21" type="number" id="vx" /> px/s</label><br/>
	<label>重力：<input value="10" type="number" id="g" /> px/s²</label><br/>
	<button onclick="createBall()">来一个球</button>
	</body>
	</html>
	function generateCubicBezier (v, g, t){
	var a = v / g;
	var b = t + v / g;

	return [[(a / 3 + (a + b) / 3 - a) / (b - a), (a * a / 3 + a * b * 2 / 3 - a * a) / (b * b - a * a)],
	[(b / 3 + (a + b) / 3 - a) / (b - a), (b * b / 3 + a * b * 2 / 3 - a * a) / (b * b - a * a)]];
	}

	function createBall() {
	var ball = document.createElement("div");
	var t = Number(document.getElementById("t").value);
	var vx = Number(document.getElementById("vx").value);
	var vy = Number(document.getElementById("vy").value);
	var g = Number(document.getElementById("g").value);
	ball.className = "ball";
	document.body.appendChild(ball)
	ball.style.transition = `left linear ${t}s, top cubic-bezier(${generateCubicBezier(vy, g, t)}) ${t}s`;
	setTimeout(function(){
	ball.style.left = `${vx * t}px`;
	ball.style.top = `${vy * t + 0.5 * g * t * t}px`;
	}, 100);
	setTimeout(function(){ document.body.removeChild(ball); }, t * 1000);
	}