const canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 600;
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');

function gameLoop() {
  update();   // 更新游戏逻辑
  render();   // 渲染画面
  requestAnimationFrame(gameLoop);
}

class GameObject {
  constructor(x, y, width, height, color) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.color = color;
  }

  update() {
    // 子类可重写此方法处理逻辑
  }

  draw(ctx) {
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}

const player = new GameObject(100, 100, 50, 50, 'blue');

// 添加控制逻辑
document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowRight') player.x += 10;
  if (e.key === 'ArrowLeft') player.x -= 10;
  if (e.key === 'ArrowUp') player.y -= 10;
  if (e.key === 'ArrowDown') player.y += 10;
});

const gameObjects = [player];

function update() {
  gameObjects.forEach(obj => obj.update());
}

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
  gameObjects.forEach(obj => obj.draw(ctx));
}

class MovableObject extends GameObject {
  constructor(x, y, width, height, color) {
    super(x, y, width, height, color);
    this.vx = 0;
    this.vy = 0;
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;
  }
}

const enemy = new MovableObject(600, 200, 40, 40, 'red');
enemy.vx = -2;
gameObjects.push(enemy);