写贪吃蛇代码网页版

抱歉，我是一个语言模型，无法进行编程操作。不过，以下是一个简单的贪吃蛇游戏代码示例，供您参考：
<!DOCTYPE html>
<html>
<head>
    <title>贪吃蛇游戏</title>
    <style>
        #game-board {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }
        .snake {
            width: 20px;
            height: 20px;
            background-color: green;
            position: absolute;
        }
        .food {
            width: 20px;
            height: 20px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <h1>贪吃蛇游戏</h1>
    <div id="game-board">
    </div>
    <script>
        // 创建贪吃蛇
        var snake = [
            {x: 1, y: 1},
            {x: 2, y: 1},
            {x: 3, y: 1},
            {x: 4, y: 1}
        ];

        // 创建食物
        var food = {x: 10, y: 10};

        // 初始化游戏面板
        var gameBoard = document.getElementById("game-board");

        // 生成贪吃蛇和食物
        function render() {
            // 清空游戏面板
            gameBoard.innerHTML = "";

            // 生成贪吃蛇
            for (var i = 0; i < snake.length; i++) {
                var snakeBody = document.createElement("div");
                snakeBody.className = "snake";
                snakeBody.style.left = snake[i].x * 20 + "px";
                snakeBody.style.top = snake[i].y * 20 + "px";
                gameBoard.appendChild(snakeBody);
            }

            // 生成食物
            var foodElement = document.createElement("div");
            foodElement.className = "food";
            foodElement.style.left = food.x * 20 + "px";
            foodElement.style.top = food.y * 20 + "px";
            gameBoard.appendChild(foodElement);
        }

        // 移动贪吃蛇
        function move() {
            // 计算贪吃蛇头部的下一个位置
            var head = snake[snake.length - 1];
            var newHead = {x: head.x, y: head.y};
            if (direction === "up") {
                newHead.y -= 1;
            } else if (direction === "down") {
                newHead.y += 1;
            } else if (direction === "left") {
                newHead.x -= 1;
            } else if (direction === "right") {
                newHead.x += 1;
            }

            // 判断是否吃到食物
            if (newHead.x === food.x && newHead.y === food.y) {
                // 生成新的食物
                food = {
                    x: Math.floor(Math.random() * 20),
                    y: Math.floor(Math.random() * 20)
                };
            } else {
                // 移除贪吃蛇尾部
                snake.shift();
            }

            // 更新贪吃蛇的位置
            snake.push(newHead);

            // 判断游戏是否结束
            if (newHead.x < 0 || newHead.x > 19 || newHead.y < 0 || newHead.y > 19) {
                alert("游戏结束！");
                clearInterval(intervalId);
            }

            for (var i = 0; i < snake.length - 1; i++) {
                if (newHead.x === snake[i].x && newHead.y === snake[i].y) {
                    alert("游戏结束！");
                    clearInterval(intervalId);
                }
            }
        }

        // 监听键盘事件
        var direction = "right";
        document.addEventListener("keydown", function(event) {
            if (event.keyCode === 37 && direction !== "right") {
                direction = "left";
            } else if (event.keyCode === 38 && direction !== "down") {
                direction = "up";
            } else if (event.keyCode === 39 && direction !== "left") {
                direction = "right";
            } else if (event.keyCode === 40 && direction !== "up") {
                direction = "down";
            }
        });

        // 每隔一定时间移动贪吃蛇
        var intervalId = setInterval(function() {
            move();
            render();
        }, 100);
    </script>
</body>
</html>
该代码使用 HTML、CSS 和 JavaScript 实现了一个简单的贪吃蛇游戏，包括贪吃蛇的移动和食物的生成，以及游戏结束的判断。您可以将其复制到 HTML 文件中并打开浏览器进行测试。