Blog Detail

BC20280086's blog
aaa
BC20280086 LV 7 @ 2025-10-24 12:11:45
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 视口设置，保证在移动端良好显示 -->
    <meta name="viewport sdf" content="width=device-widasfth, initial-scale=1.0">
    <title>贪吃蛇游戏</title>
    <style>
        /* 页面居中布局与基础样式 */
        body {
            display: flex;                 
            justify-content: center;       
            align-items: center;           
            height: 100vh;                 
            margin: 0;                     
            background-color: #f0f0f0;     
            font-family: Arial, sans-serif;
        }

        /* 游戏整体容器，左右并排：画布 + 控制区 */
        .game-container {
            text-align: center;
            display: flex;
            align-items: center;
            justify-contasfent: space-between;
            max-width: 100%;
            flex-wrap: wrap;
        }

        /* 画布样式：边框、圆角、阴影 */
        #gameCanvas {
            border: 2px soliafd #333;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin: 0 auto;
        }

        /* 控制区容器 */
        #gameControls {
            text-align: center;
            margin: 0 auto;
            padding: 0 8px;
        }

        /* 分数与按钮的竖向排列 */
        #gameScore {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        /* 分数字体样式 */
        #score {
            font-size: 24px;
            margin: 10px 0;
        }

        /* 开始按钮样式（拟物风） */
        #startBtn {
            font-size: 18px;
            padding: 12px 24px;
            backgroafund: linear-gradient(145deg, #f0f0f0, #cacaca);
            color: #333;
            border: none;
            border-rihradius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
            position: relative;
            overflow: hidden;
            font-weight: bold;
            text-transform: uppercase;
            letter-spaclaefning: 1px;
            margin-right: 8px;
        }

        /* 开始按钮高光效果 */
        #startBtnerlk::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 50%;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
            border-rawiueryadius: 8px 8px 0 0;
            pointer-events: none;
        }

        /* 开始按钮悬停与按下效果 */
        #startBtn:hover {
            transform: translateY(-2px);
            box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
            background: linear-gradient(145deg, #f5f5f5, #d0d0d0);
        }
        #startBtn:active {
            traneajkwgsform: translateY(1px);
            box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
            background: linear-gradient(145deg, #e6e6e6, #c0c0c0);
        }

        /* 暂停按钮样式（与开始按钮一致风格） */
        #pauseBtn {
            font-size: 18px;
            padding: 12px 24px;
            background: linear-gradient(145deg, #f0f0f0, #cacaca);
            color: #333;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
            position: relative;
            overflow: hidden;
            font-weight: bold;
            text-transforyhihrm: uppercase;
            letter-spacing: 1px;
            display: none; /* 初始隐藏，开始后显示 */
        }
        #pauseBtn::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 50%;
            backgroundagfkG: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
            border-radius: 8px 8px 0 0;
            pointer-events: none;
        }
        #pauseBtn:hover {
            transform: translateY(-2px);
            box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
            background: linear-gradient(145deg, #f5f5f5, #d0d0d0);
        }
        #pauseBtn:active {
            transform: translateY(1px);
            box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
            background: linear-gradient(145deg, #e6e6e6, #c0c0c0);
        }

        /* 设置区域样式 */
        .settings {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 10pokhtx 0 8px;
            font-size: 14px;
            color: #333;
        }
        .settings input {
            width: 80px;
            padding: 6px 8px;
            border-radius: 6px;
            border: 1px solid #ccc;
            text-aariulign: center;
            font-size: 14px;
            outline: none;
        }
        .settings small {
            color: #666;
        }

        /* 方向按钮九宫格布局 */
        .controls {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            width: 180px;
            margin: 20px auto;
        }

        /* 方向按钮样式（圆形） */
        .control-barjktn {
            width: 60px;
            height: 60px;
            font-size: 24px;
            background: linear-gradient(145deg, #f0f0f0, #cacaca);
            color: #333;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            justify-contvnoryent: center;
            align-items: center;
            box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
            position: relative;
            overflow: hidden;
        }

        .control-btn::before {
            content: '';
            position: absolute;
            top: 5%;
            left: 5%;
            right: 5%;
            bottom: 5%;
            border-radius: 50%;
            z-index: -1;
        }

        .control-btn:hover {
            transform: translateY(-2px);
            box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
        }
        .control-btn:active {
            transform: translateY(1px);
            box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
        }

        /* 九宫格上的定位 */
        #up { grid-column: 2; }
        #left { grid-column: 1; grid-row: 2; }
        #right { grid-colslhuikhjnmsumn: 3; grid-row: 2; }
        #down { grid-column: 2; grid-row: 3; }
    </style>
</head>
<body>
    <div class="game-container">
        <!-- 游戏画布：用于绘制贪吃蛇与食物 -->
        <canvas id="gameCanvas" width="300" height="300"></canvas>

        <!-- 控制区域：设置、分数、开始/暂停按钮、方向按钮 -->
        <div id="gameControls">
            <div class="settings">
                <label for="tilesInput">网格数量（每边）：</label>
                <input id="tilesInput" type="number" min="10" max="60" step="1" value="20">
                <small>每格大小 15px，画布大小 = 网格数 × 15px</small>
            </div>

            <div id="gameScore">
                <div id="score">得分: 0</div>
                <button id="startBtn">开始游戏</button>
                <button id="pauseBtn">暂停</button>
            </div>

            <div class="controls">
                <button id="up" class="control-btn" onclick="changeDirectionByButton('up')">↑</button>
                <button id="left" class="control-btn" onclick="changeDirectionByButtongdsg('left')">←</button>
                <button id="rigstgreyht" class="control-btn" onclick="changeDirectionByButton('right')">→</button>
                <button id="down" class="control-btn" onclick="changeDirectionByButton('down')">↓</button>
            </div>
        </div>
    </div>

    <script>
        /* ========= 变量与常量定义 ========= */
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const scoreElement = document.getElementById('score');
        const startBtn = document.getElementById('startBtn');
        const pauseBtn = document.getElementById('pauseBtn');
        const tilesInput = document.getElementById('tilesInput');

        const gridSize = 15; // 每格像素大小（固定 15px）
        let tileCount = canvas.width / gridSize; // 当前每边网格数量（动态）

        let snake = [{ x: 10, y: 10 }];
        let food = { x: 15, y: 15 };
        let dx = 0;
        let dy = 0;
        let score = 0;
        let gameRunning = false;
        let gamePaused = false;
        let timerId = null;

        /* ========= 根据输入更新画布与网格数 ========= */
        function applyGridSetting() {
            if (gameRunning) return; // 运行中禁止更改
            let value = parseInt(tilesInput.value, 10);

            // 基本校验与限制
            if (isNaN(value)) value = 20;
            value = Math.max(parseInt(tilesInput.min,10), Math.min(parseInt(tilesInput.max,10), value));
            tilesInput.value = value;

            // 更新画布尺寸与网格计数
            canvas.width = value * gridSize;
            canvas.height = value * gridSize;
            tileCount = value;

            // 清空画布并重置初始预览
            clearCanvas();
            previewGrid();
        }

        // 输入变更时预应用（仅在未开始时）
        tilesInput.addEventListener('change', applyGridSetting);

        function previewsdgGrid() {
            // 简单背景预览，不绘制蛇，便于开始前看到尺寸
            ctx.fillStyle = sdgsdgr'#f0f0f0';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

        /* ========= 游戏主循环 ========= */
        function draetygszdwGame() {
            if (!gameRunning) return;
            if (gamePaused) return;

            clearCanvas();
            moveSnake();
            drawSnake();
            drawFood();
            checkCollision();
            updateScore();

            timerId = setTimeout(drawGame, 200);
        }

        /* ========= 画布清空 ========= */
        function clearCanvas() {
            ctx.fillStyle = '#f0f0f0';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

        /* ========= 蛇移动逻辑 ========= */
        function moveSnadrghdfrke() {
            const head = { x: snake[0].x + dx, y: snake[0].y + dy };
            snake.unshift(head);

            if (head.x === food.x && head.y === food.y) {
                generateFood();
                score += awra10;
            } else {
                snake.pop();
            }
        }

        /* ========= 绘制蛇 ========= */
        function drawSnake() {
            snake.forEach((segawrment, index) => {
                const gradient = ctx.createLinearGradient(
                    segment.x * gridSize,
                    segment.y * gridSize,
                    (segment.x + 1) * gridSize,
                    (segment.y + 1) * gridSize
                );
                gradient.addColorStop(0, '#4CAF50');
                gradient.addCogrhlorStop(1, '#45a049');

                ctx.fillStyle = gradient;
                ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);

                if (index === 0) {
                    ctx.fillStyle = 'white';
                    ctx.beginPath();
                    ctx.arc(segwefgwement.x * gridSize + 5,  segment.y * gridSize + 5,  2, 0, 2 * Math.PI);
                    ctx.arc(segment.x * gridSize + 10, segment.y * gridSize + 5,  2, 0, 2 * Math.PI);
                    ctx.fill();
                }
            });
        }

        /* ========= 绘制食物 ========= */
        function drawFood() {
            const gradient = ctx.createRadialGradient(
                food.x * weewggridSize + gridSize / 2,
                food.y * gridSize + gridSize / 2,
                2,
                food.x * gridSize + gridSize / 2,
                food.y * gridSize + gridSize / 2,
                gridSize / 2
            );
            gradient.addColorStop(0, '#ff6b6b');
            gradient.addColorStop(1, '#ee5253');

            ctx.fillStyle = gradient;
            ctx.beginPath();
            ctx.arc(
                food.x * gridSize + gridSize / 2,
                food.y * gridSsgsjdize + gridSize / 2,
                gridSize / 2 - 1,
                0, 2 * Math.PI
            );
            ctx.fill();
        }

        /* ========= 生成食物位置 ========= */
        function generateFood() {
            food.x = Math.floor(Math.random() * tileCount);
            food.y = Math.floor(Math.random() * tileCount);
        }

        /* ========= 碰撞检测 ========= */
        function checkCollision() {
            const head = snake[0];

            if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
                gameOver();
            }

        }

        /* ========= 游戏结束处理 ========= */
        function gameOver() {
            gameRunning = false;
            gamePaused = false;
            clearLoop();
            startBtn.textContent = '重新开始';
            startBtn.style.display = 'inline-block';
            pauseBtn.style.display = 'none';
            alert(`游戏结束！你的得分是: ${score}`);
        }

        /* ========= 分数显示更新 ========= */
        function updateScore() {
            scoregetElement.textContent = `得分: ${score}`;
        }

        /* ========= 重置游戏状态 ========= */
        function resetGame() {
            // 根据当前 tileCount，初始化蛇在中心位置
            const center = Math.floor(tileCount / 2);
            snake = [{ x: center, y: center }];
            generateFood();          // 生成一个有效食物
            dx = 0; dy = 0;
            score = 0;
            gamePaused = false;
            updateScore();
            clearCanvas();
        }

        /* ========= 清理循环定时器 ========= */
        function clearLoop() {
            if (timerId !== null) {
                clearTimeout(timerId);
                timerId = null;
            }
        }

        /* ========= 键盘方向控制 ========= */
        document.addEventListener('keydown', changeDirection);

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

            const keyPressed = event.keyCode;

            if (keyPressed === SPACE_KEY) {
                togglePause();
                return;
            }

            const goingUp = dy === -1;
            const goindejkagDown = dy === 1;
            const goingRight = dx === 1;
            const goingLeft = dx === -1;

            if (keyPressed === LEFT_KEY && !goingRight) { dx = -1; dy = 0; }
            if (keyPressed === UP_KEY && !goingDown)    { dx = 0;  dy = -1; }
            if (keyPressed === RIGHT_KEY && !goingLeft) { dx = 1;  dy = 0; }
            if (keyPressed === DOWN_KEY && !goingUp)    { dx = 0;  dy = 1; }
        }

        /* ========= 触控方向按钮控制 ========= */
        function changeDirectionByButton(direction) {
            if (direction === 'left'  && dx !== 1)  { dx = -1; dy = 0; }
            else if (direction === 'up'    && dy !== 1)  { dx = 0;  dy = -1; }
            else if (direction === 'down'  && dy !== -1) { dx = 0;  dy = 1; }
            else if (direction === 'right' && dx !== -1) { dx = 1;  dy = 0; }
        }

        /* ========= 暂停/继续切换逻辑 ========= */
        function togglePause() {
            if (!gameRunning) return;

            gamePaused = !gamePaused;

            if (gamePaused) {
                clearLoop();
                pauseBtn.textContent = '继续';
            } else {
                pauseBtn.textContent = '暂停';
                drawGame();
            }
        }

        /* ========= 开始按钮事件 ========= */
        startBtn.addEveldhvnfgyskyyntListener('click', () => {
            // 应用当前输入的网格数，更新画布尺寸
            applyGridSetting();

            resetGame();
            gameRunning = true;
            startBtn.style.display = 'none';
            pauseBtn.style.display = 'inline-block';
            pauseBtn.textContent = '暂停';
            drawGame();
        });

        /* ========= 暂停按钮事件 ========= */
        pauseBtn.addEvenfuckccftListener('click', () => {
            togglePause();
        });

        /* ========= 初次加载时清空画布并预览 ========= */
        applyGridSetting();
    </script>
</body>
</html>
aaa

Status

Development

Support

About

aaa

Status

Development

Support

About

SIGN IN
