如何在javascript上创建一个简单的重力引擎

// 创建画布
var canvas = document.createElement("canvas");
canvas.width = 800;
canvas.height = 600;
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");

// 创建物体
var object = {
  x: 400, // 初始位置的x坐标
  y: 100, // 初始位置的y坐标
  velocity: 0, // 初始速度
  acceleration: 0.1 // 加速度（重力）
};

// 更新物体的位置和速度
function updateObject() {
  object.velocity += object.acceleration;
  object.y += object.velocity;
  
  // 碰撞检测，当物体触底时反弹
  if (object.y + 20 > canvas.height) {
    object.velocity *= -0.8; // 反弹系数
    object.y = canvas.height - 20;
  }
}

// 渲染物体
function renderObject() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "red";
  ctx.fillRect(object.x, object.y, 20, 20);
}

// 游戏循环
function gameLoop() {
  updateObject();
  renderObject();
  requestAnimationFrame(gameLoop);
}

gameLoop();