资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

从零开始实现一个经典贪吃蛇游戏：Canvas绘图与游戏逻辑详解

创作时间:

作者:

@小白创作中心

从零开始实现一个经典贪吃蛇游戏：Canvas绘图与游戏逻辑详解

引用

CSDN

https://blog.csdn.net/qq_43129878/article/details/146279551

贪吃蛇游戏是一个经典的入门级游戏项目，它不仅能帮助我们理解基本的游戏开发概念，还能锻炼我们的编程思维。本文将详细介绍如何使用HTML5 Canvas和JavaScript实现一个完整的贪吃蛇游戏，包括游戏核心逻辑、Canvas绘图、碰撞检测等关键技术点。

项目架构设计

1. 核心类设计

我们的游戏主要包含两个核心类：

Snake类：负责蛇的数据结构和行为
Game类：负责游戏整体逻辑和渲染

这种设计遵循了单一职责原则，使代码结构清晰，便于维护和扩展。

2. 数据结构

蛇的身体使用数组存储，每个节点包含x和y坐标：

body = [
    { x: 3, y: 1 }, // 蛇头
    { x: 2, y: 1 },
    { x: 1, y: 1 }  // 蛇尾
];

核心功能实现

1. 蛇的移动逻辑

蛇的移动采用数组操作实现：

根据方向计算新的头部位置
使用unshift()将新头部添加到数组开头
如果没有吃到食物，使用pop()移除尾部

move(food) {
    const head = { ...this.body[0] };
    switch (this.direction) {
        case 'up': head.y--; break;
        case 'down': head.y++; break;
        case 'left': head.x--; break;
        case 'right': head.x++; break;
    }
    this.body.unshift(head);
    if (head.x === food.x && head.y === food.y) {
        return true; // 吃到食物
    }
    this.body.pop();
    return false;
}

2. 碰撞检测

游戏中需要处理两种碰撞：

撞墙：检查蛇头是否超出游戏边界
自身碰撞：检查蛇头是否与身体重叠

checkCollision(gridSize) {
    const head = this.body[0];
    
    // 检查是否撞墙
    if (head.x < 0 || head.x >= gridSize || 
        head.y < 0 || head.y >= gridSize) {
        return true;
    }

    // 检查是否撞到自己
    for (let i = 1; i < this.body.length; i++) {
        if (head.x === this.body[i].x && 
            head.y === this.body[i].y) {
            return true;
        }
    }
    return false;
}

3. Canvas绘制

使用Canvas进行游戏画面渲染，主要包括：

draw() {
    // 清空画布
    this.ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

    // 绘制网格
    this.ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)';
    for (let i = 0; i < this.gridSize; i++) {
        // ... 网格绘制代码 ...
    }

    // 绘制食物和蛇身
    this.ctx.fillStyle = '#FF4081';
    this.ctx.fillRect(
        this.food.x * this.tileSize,
        this.food.y * this.tileSize,
        this.tileSize,
        this.tileSize
    );

    // 使用不同颜色区分蛇头和身体
    this.snake.body.forEach((segment, index) => {
        this.ctx.fillStyle = index === 0 ? '#2196F3' : '#4CAF50';
        this.ctx.fillRect(
            segment.x * this.tileSize,
            segment.y * this.tileSize,
            this.tileSize,
            this.tileSize
        );
    });
}

游戏优化技巧

1. 方向控制优化

为防止蛇快速反向导致游戏结束，我们实现了方向控制限制：

setDirection(direction) {
    const opposites = {
        'up': 'down',
        'down': 'up',
        'left': 'right',
        'right': 'left'
    };
    if (opposites[this.direction] !== direction) {
        this.nextDirection = direction;
    }
}

2. 难度递增

随着得分增加，通过减少游戏循环间隔来提高游戏难度：

if (this.speed > this.minSpeed) {
    this.speed = Math.max(this.minSpeed, this.speed - 5);
    clearInterval(this.gameLoop);
    this.gameLoop = setInterval(() => this.update(), this.speed);
}

3. 食物生成优化

确保食物不会生成在蛇身上：

generateFood() {
    let food;
    do {
        food = {
            x: Math.floor(Math.random() * this.gridSize),
            y: Math.floor(Math.random() * this.gridSize)
        };
    } while (this.snake.body.some(segment => 
        segment.x === food.x && segment.y === food.y));
    return food;
}

开发经验总结

模块化设计 ：将蛇的逻辑和游戏主逻辑分离，使代码更易维护和测试。
性能优化 ：
- 使用requestAnimationFrame代替setInterval可以获得更流畅的动画
- 适当的游戏循环间隔确保游戏难度适中
- Canvas绘制时注意性能优化
用户体验 ：
- 清晰的视觉反馈（蛇头和身体使用不同颜色）
- 合理的难度递增
- 完善的游戏状态管理（开始、结束、重启）