贪吃蛇是一款经典的游戏，我们可以用 HTML5 来制作自己的贪吃蛇游戏！以下是 HTML5 制作贪吃蛇的详细步骤：

// HTML 部分
<canvas id="canvas" width="400" height="400"></canvas>

// JavaScript 部分
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// 贪吃蛇的初始化
var snake = [];
snake[0] = { x: 200, y: 200 };
snake[1] = { x: 190, y: 200 };
snake[2] = { x: 180, y: 200 };

// 食物的初始化
var food = { x: Math.floor(Math.random() * 30) * 10, y: Math.floor(Math.random() * 30) * 10 };

// 贪吃蛇的移动
function moveSnake() {
    // 删除末尾
    snake.pop();
    // 添加新头
    snake.unshift({ x: newX, y: newY });
}

// 监听键盘事件
document.addEventListener("keydown", function(event) {
    // 左: 左箭头或 A
    if (event.keyCode == 37 || event.keyCode == 65) {
        direction = "LEFT";
    }
    // 右: 右箭头或 D
    else if (event.keyCode == 39 || event.keyCode == 68) {
        direction = "RIGHT";
    }
    // 上: 上箭头或 W
    else if (event.keyCode == 38 || event.keyCode == 87) {
        direction = "UP";
    }
    // 下: 下箭头或 S
    else if (event.keyCode == 40 || event.keyCode == 83) {
        direction = "DOWN";
    }
});

// 判断是否吃到食物
if (snake[0].x == food.x && snake[0].y == food.y) {
    // 添加新头而不是删除尾巴
    snake.unshift({ x: newX, y: newY });
    // 重新随机食物位置
    food = { x: Math.floor(Math.random() * 30) * 10, y: Math.floor(Math.random() * 30) * 10 };
}

// 绘制贪吃蛇和食物
for (var i = 0; i < snake.length; i++) {
    ctx.fillStyle = "black";
    ctx.fillRect(snake[i].x, snake[i].y, 10, 10);
}

ctx.fillStyle = "red";
ctx.fillRect(food.x, food.y, 10, 10); 

以上就是用 HTML5 制作贪吃蛇游戏的代码，如需更多详细信息和完整代码，请参考相关教程。