怎样用JavaScript创建2D游戏？

// 获取Canvas元素
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// 定义角色
const player = {
    x: 50,
    y: 50,
    width: 30,
    height: 30,
    color: 'blue'
};

// 绘制角色
function drawPlayer() {
    ctx.fillStyle = player.color;
    ctx.fillRect(player.x, player.y, player.width, player.height);
}

// 游戏循环
function gameLoop() {
    // 清除Canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制角色
    drawPlayer();

    // 请求下一帧
    requestAnimationFrame(gameLoop);
}

// 启动游戏循环
gameLoop();

// 键盘事件监听
document.addEventListener('keydown', (event) => {
    switch(event.key) {
        case 'ArrowUp':
            player.y -= 5;
            break;
        case 'ArrowDown':
            player.y += 5;
            break;
        case 'ArrowLeft':
            player.x -= 5;
            break;
        case 'ArrowRight':
            player.x += 5;
            break;
    }
});

// 定义敌人
const enemies = [
    { x: 200, y: 100, width: 20, height: 20, color: 'red' },
    { x: 300, y: 200, width: 20, height: 20, color: 'green' }
];

// 绘制敌人
function drawEnemies() {
    enemies.forEach(enemy => {
        ctx.fillStyle = enemy.color;
        ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
    });
}

// 敌人移动逻辑
function moveEnemies() {
    enemies.forEach(enemy => {
        enemy.x += Math.random() * 2 - 1; // 随机移动
        enemy.y += Math.random() * 2 - 1;
    });
}

// 更新游戏循环
function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    drawPlayer();
    drawEnemies();
    moveEnemies();

    requestAnimationFrame(gameLoop);
}