AI生成移动端贪吃蛇游戏页面，手机浏览器打开即可玩

Poulyield

已于 2025-03-22 17:32:30 修改

阅读量905

点赞数 7

分类专栏： AI生成文章标签：游戏 javascript 前端

于 2025-03-22 17:27:03 首次发布

本文链接：https://blog.youkuaiyun.com/ksws0319440/article/details/146443327

版权

AI生成专栏收录该内容

1 篇文章

订阅专栏

贪吃蛇游戏可计分，可穿墙，AI生成适配手机浏览器的游戏，代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>贪吃蛇游戏</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #000;
            color: #fff;
            font-family: Arial, sans-serif;
            touch-action: none; /* 禁用默认触摸行为 */
        }
        canvas {
            background-color: #333;
            border: 2px solid #fff;
            max-width: 100%;
            max-height: 100%;
        }
        #score {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 20px;
        }
        #gameOver {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 40px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="score">得分: 0</div>
    <div id="gameOver">游戏结束</div>
    <canvas id="gameCanvas"></canvas>

        // 初始化画布大小
        function resizeCanvas() {
            const size = Math.min(window.innerWidth, window.innerHeight) * 0.9;
            canvas.width = size;
            canvas.height = size;
            tileSize = canvas.width / tileCount;
        }

window.addEventListener('resize', resizeCanvas);
resizeCanvas();

        // 游戏主循环
        function gameLoop() {
            if (gameOver) {
                gameOverElement.style.display = 'block';
                return;
            }

            setTimeout(function(){
    update();
                draw();
                requestAnimationFrame(gameLoop); // 使用 requestAnimationFrame 实现高性能动画
            }, 100);

}

        // 更新游戏状态
        function update() {
            const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };

            // 边缘穿越逻辑
            if (head.x < 0) head.x = tileCount - 1;
            if (head.x >= tileCount) head.x = 0;
            if (head.y < 0) head.y = tileCount - 1;
            if (head.y >= tileCount) head.y = 0;

            // 吃到食物
            if (head.x === food.x && head.y === food.y) {
                score++;
                scoreElement.textContent = `得分: ${score}`;
                food = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) };
            } else {
                snake.pop(); // 如果没有吃到食物，移除蛇尾
            }

snake.unshift(head); // 添加新的蛇头

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

        // 绘制游戏画面
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 绘制蛇
            ctx.fillStyle = 'lime';
            snake.forEach(part => ctx.fillRect(part.x * tileSize, part.y * tileSize, tileSize, tileSize));

            // 绘制食物
            ctx.fillStyle = 'red';
            ctx.fillRect(food.x * tileSize, food.y * tileSize, tileSize, tileSize);
        }

        // 触摸控制逻辑
        let touchStartX = 0;
        let touchStartY = 0;

        canvas.addEventListener('touchstart', (e) => {
            touchStartX = e.touches[0].clientX;
            touchStartY = e.touches[0].clientY;
        });

        canvas.addEventListener('touchmove', (e) => {
            e.preventDefault();
            const touchEndX = e.touches[0].clientX;
            const touchEndY = e.touches[0].clientY;
            const dx = touchEndX - touchStartX;
            const dy = touchEndY - touchStartY;

            if (Math.abs(dx) > Math.abs(dy)) {
                direction = { x: dx > 0 ? 1 : -1, y: 0 }; // 水平移动
            } else {
                direction = { x: 0, y: dy > 0 ? 1 : -1 }; // 垂直移动
            }
        });

        // 启动游戏
        gameLoop();
    </script>
</body>
</html>