【問題】弾む箱

プログラミング問題

今日はアクションゲームが作れそうなネタです。

問

下記のコードをカスタマイズして弾む箱を描画してください。

サンプルコード

<!DOCTYPE html>
<style>
.box {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 100px;
  top: 100px;
  background: #000;
}
.field {
  position: absolute;
  width: 480px;
  height: 16px;
  left: 0px;
  top: 300px;
  background: #008;
}
</style>
<div class="box"></div>
<div class="field"></div>
<script>
const box = document.querySelector('.box');
/**
 * boxを描画する
 * 
 * @param pos {{x:number, y:number}}
 */
function drawBox(pos) {
  box.style = `left:${pos.x}px; top:${pos.y}px`;
}

var step = 0;
var pos = {x:0, y:0};// boxの初期位置
var roopId = setInterval(()=>{// 一定間隔でループする
  // 少し動かす
  pos.x += 0.5;

  // 描画
  drawBox(pos);

  if(step++ > 1000) {// ある程度動かしたら止める。1000は適当。
    clearInterval(roopId);
  }
}, 1/20); //20FPS

</script>

このコードでは実行すると箱が左から右に移動していきます。
setIntervalの中身が定期的に実行され、実行される毎にx座標を少しだけ変更し描画しています。
これにより箱が右に動いていく表現ができます。

さてこの箱をビヨンビヨン弾ませるにはどうすればいいでしょう。
すこし難しいかもしれませんが、がんばって考えてみてください。