• Bio

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 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-content: space-between;
            max-width: 100%;
            flex-wrap: wrap;
        }

        #gameCanvas {
            border: 2px solid #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;
            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-transform: uppercase;
            letter-spacing: 1px;
        }

        #startBtn::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 50%;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
            border-radius: 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 {
            transform: translateY(1px);
            box-shadow: inset 4px 4px 8px #bebebe,
                inset -4px -4px 8px #ffffff;
            background: linear-gradient(145deg, #e6e6e6, #c0c0c0);
        }

        .controls {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            width: 180px;
            margin: 20px auto;
        }

        .control-btn {
            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-content: 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-column: 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 id="gameScore">
                <div id="score">得分: 0</div>
                <button id="startBtn">开始游戏</button>
            </div>
            <div class="controls">
                <button id="up" class="control-btn" onclick="changeDirectionByButton('up')">↑</button>
                <button id="left" class="control-btn" onclick="changeDirectionByButton('left')">←</button>
                <button id="right" 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 gridSize = 15;
        const 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;

        function drawGame() {
            if (!gameRunning) return;

            clearCanvas();
            moveSnake();
            drawSnake();
            drawFood();
            checkCollision();
            updateScore();
            setTimeout(drawGame, 200);
        }

        function clearCanvas() {
            ctx.fillStyle = '#f0f0f0';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

        function moveSnake() {
            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 += 10;
            } else {
                snake.pop();
            }
        }

        function drawSnake() {
            snake.forEach((segment, index) => {
                const gradient = ctx.createLinearGradient(
                    segment.x * gridSize,
                    segment.y * gridSize,
                    (segment.x + 1) * gridSize,
                    (segment.y + 1) * gridSize
                );
                gradient.addColorStop(0, '#4CAF50');
                gradient.addColorStop(1, '#45a049');
                ctx.fillStyle = gradient;
                ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);

                if (index === 0) {
                    // Draw eyes
                    ctx.fillStyle = 'white';
                    ctx.beginPath();
                    ctx.arc(segment.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 * gridSize + 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 * gridSize + 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();
            }

            for (let i = 1; i < snake.length; i++) {
                if (head.x === snake[i].x && head.y === snake[i].y) {
                    gameOver();
                }
            }
        }

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

        function updateScore() {
            scoreElement.textContent = `得分: ${score}`;
        }

        function resetGame() {
            snake = [{ x: 10, y: 10 }];
            food = { x: 15, y: 15 };
            dx = 0;
            dy = 0;
            score = 0;
            updateScore();
        }

        document.addEventListener('keydown', changeDirection);

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

            const keyPressed = event.keyCode;

            const goingUp = dy === -1;
            const goingDown = 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;
            }
        }

        startBtn.addEventListener('click', () => {
            resetGame();
            gameRunning = true;
            startBtn.style.display = 'none';
            drawGame();
        });

        clearCanvas();
    </script>
</body>

</html>

  • Recent Activities

21
Submitted
15
Accepted
0
Solutions Liked
  1. About
  2. Contact Us
  3. Privacy
  4. Terms of Service
  5. Copyright Complaint
  6. Language
  7. Legacy mode
  8. Theme
  2. 粤ICP备2021104657号
  3. Worker 0, 11ms
  4. Powered by Hydro v4.14.1 Community