HTML5 Canvas实战：30分钟教你打造可玩贪吃蛇（附完整源码）-CSDN博客

HTML5 Canvas实战：30分钟教你打造可玩贪吃蛇（附完整源码）

每次看到那些经典的像素小游戏，心里总会痒痒的，想着自己是不是也能动手做一个。对于前端开发者来说，HTML5 Canvas 就像一块数字画布，给了我们无限的可能性。今天，我们不谈复杂的框架和库，就用最纯粹的 JavaScript 和 Canvas API，来亲手实现一个属于我们自己的贪吃蛇游戏。这个过程不仅能让你重温童年的乐趣，更重要的是，它能帮你打通 Canvas 图形绘制、游戏循环、用户交互和状态管理这些前端核心技能的任督二脉。无论你是刚入门的前端新手，还是想找点乐子的游戏开发爱好者，跟着这篇实战指南，30分钟内，你就能得到一个可玩、可扩展、并且代码完全掌握在自己手里的贪吃蛇。

1. 项目初始化与 Canvas 基础搭建

在动手写逻辑之前，我们得先把“舞台”搭好。贪吃蛇游戏的核心视觉呈现都依赖于 Canvas 元素。首先，创建一个标准的 HTML5 文档结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas贪吃蛇 | 前端实战</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #333;
            padding: 20px;
        }
        .game-container {
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            text-align: center;
        }
        h1 {
            margin-bottom: 10px;
            color: #2d3748;
        }
        .subtitle {
            color: #718096;
            margin-bottom: 30px;
        }
        #gameCanvas {
            display: block;
            background-color: #1a202c;
            border-radius: 8px;
            border: 4px solid #4a5568;
        }
        .stats-panel {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            font-size: 1.2rem;
            font-weight: bold;
        }
        .controls {
            margin-top: 25px;
        }
        button {
            background-color: #4299e1;
            color: white;
            border: none;
            padding: 12px 24px;
            margin: 0 8px;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        button:hover {
            background-color: #3182ce;
            transform: translateY(-2px);
        }
        button:disabled {
            background-color: #cbd5e0;
            cursor: not-allowed;
            transform: none;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <h1>🐍 Canvas 贪吃蛇</h1>
        <p class="subtitle">使用原生 JavaScript 与 HTML5 Canvas 构建</p>
        <canvas id="gameCanvas" width="400" height="400"></canvas>
        <div class="stats-panel">
            <div>得分: <span id="score">0</span></div>
            <div>最高分: <span id="highScore">0</span></div>
            <div>速度: <span id="speedLevel">普通</span></div>
        </div>
        <div class="controls">
            <button id="startBtn">开始游戏</button>
            <button id="pauseBtn" disabled>暂停</button>
            <button id="resetBtn">重置</button>
            <select id="speedSelect">
                <option value="150">简单</option>
                <option value="100" selected>普通</option>
                <option value="70">困难</option>
                <option value="50">极难</option>
            </select>
        </div>
    </div>
    <script src="game.js"></script>
</body>
</html>