chatGPT写的网页版贪吃蛇小游戏

神秘剑客_CN

已于 2025-03-26 00:35:34 修改

阅读量1.1k

点赞数 12

分类专栏： html 文章标签： html

于 2025-02-03 20:33:46 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43465752/article/details/145432863

版权

html 专栏收录该内容

1 篇文章

订阅专栏

chatGPT写的网页版贪吃蛇小游戏

前言
网页版贪吃蛇小游戏

前言

之前无聊，让ChatGPT写了一段基于html语言的贪吃蛇小游戏代码

网页版贪吃蛇小游戏

将以下内容复制到记事本，重命名为xxx.html即可打开浏览器游玩

这里是一个使用HTML、CSS和JavaScript编写的可以在浏览器中直接运行的贪吃蛇游戏代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake Game by OpenAI</title>
    <style>
        canvas {
            display: block;
            margin: 0 auto;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        const snakeSize = 10;
        let snake = [{x: 150, y: 150}, {x: 140, y: 150}, {x: 130, y: 150}, {x: 120, y: 150}];
        let food = {x: 0, y: 0};
        let dx = 10;
        let dy = 0;
        let changingDirection = false;

        function drawSnakePart(snakePart) {
            ctx.fillStyle = 'green';
            ctx.strokeStyle = 'black';
            ctx.fillRect(snakePart.x, snakePart.y, snakeSize, snakeSize);
            ctx.strokeRect(snakePart.x, snakePart.y, snakeSize, snakeSize);
        }

        function drawSnake() {
            snake.forEach(drawSnakePart);
        }

        function moveSnake() {
            const head = {x: snake[0].x + dx, y: snake[0].y + dy};
            snake.unshift(head);

            const didEatFood = snake[0].x === food.x && snake[0].y === food.y;
            if (didEatFood) {
                createFood();
            } else {
                snake.pop();
            }
        }

        function changeDirection(event) {
            const LEFT_KEY = 37;
            const RIGHT_KEY = 39;
            const UP_KEY = 38;
            const DOWN_KEY = 40;

            if (changingDirection) return;
            changingDirection = true;

            const keyPressed = event.keyCode;
            const goingUp = dy === -10;
            const goingDown = dy === 10;
            const goingRight = dx === 10;
            const goingLeft = dx === -10;

            if (keyPressed === LEFT_KEY && !goingRight) {
                dx = -10;
                dy = 0;
            }

            if (keyPressed === UP_KEY && !goingDown) {
                dx = 0;
                dy = -10;
            }

            if (keyPressed === RIGHT_KEY && !goingLeft) {
                dx = 10;
                dy = 0;
            }

            if (keyPressed === DOWN_KEY && !goingUp) {
                dx = 0;
                dy = 10;
            }
        }

        function createFood() {
            food.x = Math.floor(Math.random() * canvas.width / 10) * 10;
            food.y = Math.floor(Math.random() * canvas.height / 10) * 10;
            snake.forEach(part => {
                if (part.x === food.x && part.y === food.y) {
                    createFood();
                }
            });
        }

        function drawFood() {
            ctx.fillStyle = 'red';
            ctx.strokeStyle = 'black';
            ctx.fillRect(food.x, food.y, snakeSize, snakeSize);
            ctx.strokeRect(food.x, food.y, snakeSize, snakeSize);
        }

        function checkCollision() {
            for (let i = 4; i < snake.length; i++) {
                if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
                    return true;
                }
            }
            const hitLeftWall = snake[0].x < 0;
            const hitRightWall = snake[0].x > canvas.width - snakeSize;
            const hitTopWall = snake[0].y < 0;
            const hitBottomWall = snake[0].y > canvas.height - snakeSize;

            return hitLeftWall || hitRightWall || hitTopWall || hitBottomWall;
        }

        function gameLoop() {
            if (checkCollision()) {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.fillStyle = 'black';
                ctx.font = '30px Arial';
                ctx.fillText('Game Over!', 150, 200);
                return;
            }

            changingDirection = false;
            setTimeout(() => {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                drawFood();
                moveSnake();
                drawSnake();
                gameLoop();
            }, 100);
        }

        createFood();
        document.addEventListener('keydown', changeDirection);
        gameLoop();
    </script>
</body>
</html>