怎样用JavaScript创建2D游戏？

JavaScript本身具备操作浏览器渲染能力和处理交互的能力，配合Canvas API就能完成2D游戏的开发，不需要额外引入复杂的游戏引擎，适合新手入门尝试。

开发前的准备

只需要准备一个现代的浏览器和一个文本编辑器即可，不需要安装额外的运行环境。首先创建一个HTML文件，在文件中添加一个<canvas>标签作为游戏的渲染容器，然后通过JavaScript获取这个标签的上下文对象，后续所有的绘制操作都会在这个上下文上完成。

核心基础：游戏循环

2D游戏运行的本质是不断重复“更新游戏状态-绘制画面”的过程，这个重复的过程就是游戏循环。浏览器提供了requestAnimationFrame方法，它会在浏览器每次刷新画面之前执行回调函数，比传统的setInterval更适合做游戏循环，能避免画面撕裂和卡顿。

下面是一个最基础的游戏循环示例：

// 获取canvas元素和2D上下文
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// 设置canvas的尺寸
canvas.width = 800;
canvas.height = 600;

// 游戏状态变量
let playerX = 100;
let playerY = 100;

// 游戏循环函数
function gameLoop() {
    // 1. 更新游戏状态
    playerX += 1;
    if (playerX > canvas.width) {
        playerX = 0;
    }

    // 2. 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 3. 绘制游戏元素
    ctx.fillStyle = 'blue';
    ctx.fillRect(playerX, playerY, 50, 50); // 绘制一个蓝色的方块作为玩家

    // 4. 请求下一帧继续执行循环
    requestAnimationFrame(gameLoop);
}

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

绘制游戏元素

Canvas的2D上下文提供了多种绘制方法，常用的包括：

• fillRect(x, y, width, height)：绘制填充的矩形
• strokeRect(x, y, width, height)：绘制矩形边框
• drawImage(image, x, y)：绘制图片元素，适合加载精灵图或者背景图
• fillText(text, x, y)：绘制文本，可用于显示分数、提示信息

如果需要绘制复杂的图形或者动画，可以提前将素材加载为Image对象，再在绘制的时候调用drawImage方法。

处理用户交互

2D游戏需要响应用户的键盘、鼠标操作，只需要给document或者canvas绑定对应的事件监听器即可。比如监听键盘按下事件控制玩家移动：

// 记录按键状态的对象
const keys = {};

// 监听按键按下事件
document.addEventListener('keydown', (e) => {
    keys[e.key] = true;
});

// 监听按键松开事件
document.addEventListener('keyup', (e) => {
    keys[e.key] = false;
});

// 在游戏循环的更新阶段处理输入
function handleInput() {
    if (keys['ArrowLeft']) {
        playerX -= 5;
    }
    if (keys['ArrowRight']) {
        playerX += 5;
    }
    if (keys['ArrowUp']) {
        playerY -= 5;
    }
    if (keys['ArrowDown']) {
        playerY += 5;
    }
}

// 修改游戏循环，加入输入处理
function gameLoop() {
    // 处理用户输入
    handleInput();

    // 更新游戏状态
    // ... 其他状态更新逻辑

    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制游戏元素
    ctx.fillStyle = 'blue';
    ctx.fillRect(playerX, playerY, 50, 50);

    requestAnimationFrame(gameLoop);
}

碰撞检测与游戏逻辑

完成基础绘制和交互后，需要添加碰撞检测、分数计算等游戏逻辑。简单的矩形碰撞检测可以通过判断两个矩形的坐标和尺寸是否重叠实现：

// 检测两个矩形是否碰撞
function checkCollision(rect1, rect2) {
    return rect1.x < rect2.x + rect2.width &&
           rect1.x + rect1.width > rect2.x &&
           rect1.y < rect2.y + rect2.height &&
           rect1.y + rect1.height > rect2.y;
}

// 示例：检测玩家和障碍物的碰撞
const obstacle = { x: 300, y: 200, width: 60, height: 60 };
const playerRect = { x: playerX, y: playerY, width: 50, height: 50 };

if (checkCollision(playerRect, obstacle)) {
    console.log('发生碰撞');
    // 这里可以添加游戏结束、扣血等逻辑
}

优化与扩展

当游戏元素变多的时候，可以把不同的游戏对象封装成类，比如玩家类、敌人类、道具类，每个类负责自己的状态更新和绘制逻辑，这样代码结构会更清晰。如果需要更复杂的物理效果、动画系统，也可以考虑引入轻量级的游戏引擎，比如Phaser，但核心的Canvas绘制和游戏循环逻辑和原生开发是一致的。

JavaScript2D游戏开发Canvas_APIrequestAnimationFrame游戏循环修改时间：2026-06-06 07:40:08