{"id":48,"date":"2025-07-29T17:32:10","date_gmt":"2025-07-29T09:32:10","guid":{"rendered":"http:\/\/152.136.195.60\/?p=48"},"modified":"2025-07-29T18:08:06","modified_gmt":"2025-07-29T10:08:06","slug":"%e8%b4%aa%e5%90%83%e8%9b%87%e6%b8%b8%e6%88%8f","status":"publish","type":"post","link":"https:\/\/liusaide.cn\/index.php\/2025\/07\/29\/%e8%b4%aa%e5%90%83%e8%9b%87%e6%b8%b8%e6%88%8f\/","title":{"rendered":"\u8d2a\u5403\u86c7\u6e38\u620f"},"content":{"rendered":"\n<p>\u5b66\u4e60\u4e86\u8fd9\u4e48\u4e45\uff0c\u73a9\u4e00\u4f1a\u6e38\u620f\u653e\u677e\u4e00\u4e0b\u5427\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div style=\"display: flex; justify-content: center;\">\n    <iframe \n        width=\"560\" \n        height=\"800\" \n        style=\"border:none; max-width: 100%;\"\n        srcdoc=\"\n    <!DOCTYPE html>\n    <html lang='zh'>\n    <head>\n        <meta charset='UTF-8'>\n        <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'>\n        <title>\u8d2a\u5403\u86c7<\/title>\n        <link href='https:\/\/fonts.googleapis.com\/css2?family=ZCOOL+KuaiLe&#038;display=swap' rel='stylesheet'>\n        <style>\n            html, body {\n                background-color: #333;\n                color: #fff;\n                font-family: 'ZCOOL KuaiLe', cursive, 'Arial', sans-serif;\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n                justify-content: center;\n                height: 100%;\n                margin: 0;\n                text-align: center;\n                padding: 10px;\n                box-sizing: border-box;\n                overflow: hidden;\n            }\n            #game-container {\n                border: 5px solid #888;\n                border-radius: 15px;\n                padding: 10px;\n                background-color: #444;\n                box-shadow: 0 10px 20px rgba(0,0,0,0.5);\n                width: 95vw;\n                max-width: 520px;\n                box-sizing: border-box;\n            }\n            #game-canvas {\n                background-color: #000;\n                border: 2px solid #666;\n                width: 100%;\n                height: auto;\n                aspect-ratio: 1 \/ 1;\n            }\n            #ui-bar {\n                width: 100%;\n                display: flex;\n                justify-content: space-between;\n                align-items: center;\n                font-size: 1.2rem;\n                margin-bottom: 10px;\n            }\n            #controls-container {\n                margin-top: 20px;\n                display: grid;\n                grid-template-columns: repeat(3, 1fr);\n                grid-template-rows: repeat(3, 1fr);\n                gap: 10px;\n                width: 180px;\n                height: 180px;\n            }\n            .control-btn {\n                background-color: #555;\n                border: 2px solid #777;\n                border-radius: 15px;\n                color: white;\n                font-size: 2rem;\n                cursor: pointer;\n                user-select: none;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n            }\n            .control-btn:active {\n                background-color: #777;\n            }\n            #up-btn { grid-column: 2; grid-row: 1; }\n            #left-btn { grid-column: 1; grid-row: 2; }\n            #right-btn { grid-column: 3; grid-row: 2; }\n            #down-btn { grid-column: 2; grid-row: 3; }\n            .placeholder { display: none; }\n            #game-over-modal {\n                display: none; position: absolute; top: 50%; left: 50%;\n                transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.9);\n                padding: 30px 50px; border-radius: 20px; border: 3px solid #fff;\n                text-align: center; z-index: 100; width: 80vw; max-width: 400px;\n            }\n            h2 { font-size: 2.5rem; color: #e74c3c; margin-top: 0; }\n            #final-score { font-size: 1.8rem; margin: 15px 0; }\n            #restart-button {\n                padding: 10px 25px; font-size: 1.2rem; cursor: pointer;\n                background-color: #3498db; border: none; border-radius: 10px;\n                color: white; font-family: 'ZCOOL KuaiLe', cursive;\n            }\n        <\/style>\n    <\/head>\n    <body>\n        <div id='game-container'>\n            <div id='ui-bar'>\n                <h1>\u8d2a\u5403\u86c7<\/h1>\n                <div id='score'>\u5f97\u5206: 0<\/div>\n            <\/div>\n            <canvas id='game-canvas' width='500' height='500'><\/canvas>\n        <\/div>\n        <div id='controls-container'>\n            <div class='placeholder'><\/div>\n            <button id='up-btn' class='control-btn'>\u25b2<\/button>\n            <div class='placeholder'><\/div>\n            <button id='left-btn' class='control-btn'>\u25c4<\/button>\n            <div class='placeholder'><\/div>\n            <button id='right-btn' class='control-btn'>\u25ba<\/button>\n            <div class='placeholder'><\/div>\n            <button id='down-btn' class='control-btn'>\u25bc<\/button>\n            <div class='placeholder'><\/div>\n        <\/div>\n        <div id='game-over-modal'>\n            <h2>\u6e38\u620f\u7ed3\u675f!<\/h2>\n            <div id='final-score'>\u4f60\u7684\u5f97\u5206: 0<\/div>\n            <button id='restart-button'>\u91cd\u65b0\u5f00\u59cb<\/button>\n        <\/div>\n        <script>\n        const canvas = document.getElementById('game-canvas');\n        const ctx = canvas.getContext('2d');\n        const scoreElement = document.getElementById('score');\n        const gameOverModal = document.getElementById('game-over-modal');\n        const finalScoreElement = document.getElementById('final-score');\n        const restartButton = document.getElementById('restart-button');\n        const upBtn = document.getElementById('up-btn'), downBtn = document.getElementById('down-btn'),\n              leftBtn = document.getElementById('left-btn'), rightBtn = document.getElementById('right-btn');\n        const gridSize = 20, tileCount = canvas.width \/ gridSize;\n        let snake, food, dx, dy, score, changingDirection, isGameOver;\n\n        function main() {\n            if (isGameOver) { showGameOver(); return; }\n            setTimeout(() => {\n                changingDirection = false; clearCanvas(); drawFood(); moveSnake(); drawSnake(); main();\n            }, 120);\n        }\n        function startGame() {\n            snake = [{ x: 10, y: 10 }]; food = {}; dx = 0; dy = 0; score = 0; isGameOver = false;\n            changingDirection = false; scoreElement.textContent = `\u5f97\u5206: ${score}`;\n            gameOverModal.style.display = 'none'; generateFood(); main();\n        }\n        function clearCanvas() { ctx.fillStyle = '#000'; ctx.fillRect(0, 0, canvas.width, canvas.height); }\n        function drawSnake() { snake.forEach(drawSnakePart); }\n        function drawSnakePart(part) {\n            ctx.fillStyle = '#00ff00'; ctx.strokeStyle = '#00aa00';\n            ctx.fillRect(part.x * gridSize, part.y * gridSize, gridSize, gridSize);\n            ctx.strokeRect(part.x * gridSize, part.y * gridSize, gridSize, gridSize);\n        }\n        function moveSnake() {\n            const head = { x: snake[0].x + dx, y: snake[0].y + dy };\n            snake.unshift(head);\n            if (didHitWall() || didHitSelf()) { isGameOver = true; return; }\n            if (snake[0].x === food.x && snake[0].y === food.y) {\n                score += 10; scoreElement.textContent = `\u5f97\u5206: ${score}`; generateFood();\n            } else { snake.pop(); }\n        }\n        function setDirection(newDx, newDy) {\n            if (changingDirection) return; changingDirection = true;\n            const goingUp = dy === -1, goingDown = dy === 1, goingRight = dx === 1, goingLeft = dx === -1;\n            if (newDx === -1 && !goingRight) { dx = -1; dy = 0; } \n            else if (newDx === 1 && !goingLeft) { dx = 1; dy = 0; } \n            else if (newDy === -1 && !goingDown) { dx = 0; dy = -1; } \n            else if (newDy === 1 && !goingUp) { dx = 0; dy = 1; }\n        }\n        function handleKeyPress(e) {\n            const key = e.key.toLowerCase();\n            if (key === 'arrowleft' || key === 'a') setDirection(-1, 0);\n            else if (key === 'arrowup' || key === 'w') setDirection(0, -1);\n            else if (key === 'arrowright' || key === 'd') setDirection(1, 0);\n            else if (key === 'arrowdown' || key === 's') setDirection(0, 1);\n        }\n        function generateFood() {\n            food.x = Math.floor(Math.random() * tileCount);\n            food.y = Math.floor(Math.random() * tileCount);\n            if (snake.some(p => p.x === food.x && p.y === food.y)) generateFood();\n        }\n        function drawFood() {\n            ctx.fillStyle = '#ff0000'; ctx.strokeStyle = '#aa0000';\n            ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);\n            ctx.strokeRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);\n        }\n        function didHitWall() { const h = snake[0]; return h.x < 0 || h.x >= tileCount || h.y < 0 || h.y >= tileCount; }\n        function didHitSelf() { for (let i = 4; i < snake.length; i++) { if (snake[i].x === snake[0].x &#038;&#038; snake[i].y === snake[0].y) return true; } return false; }\n        function showGameOver() { finalScoreElement.textContent = `\u4f60\u7684\u5f97\u5206: ${score}`; gameOverModal.style.display = 'block'; }\n\n        document.addEventListener('keydown', handleKeyPress);\n        restartButton.addEventListener('click', startGame);\n        upBtn.addEventListener('click', () => setDirection(0, -1));\n        downBtn.addEventListener('click', () => setDirection(0, 1));\n        leftBtn.addEventListener('click', () => setDirection(-1, 0));\n        rightBtn.addEventListener('click', () => setDirection(1, 0));\n        startGame();\n        <\/script>\n    <\/body>\n    <\/html>&#8220;>\n    <\/iframe>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u5b66\u4e60\u4e86\u8fd9\u4e48\u4e45\uff0c\u73a9\u4e00\u4f1a\u6e38\u620f\u653e\u677e\u4e00\u4e0b\u5427\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-48","post","type-post","status-publish","format-standard","hentry","category-8"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/posts\/48","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/comments?post=48"}],"version-history":[{"count":10,"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/posts\/48\/revisions"}],"predecessor-version":[{"id":189,"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/posts\/48\/revisions\/189"}],"wp:attachment":[{"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/media?parent=48"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/categories?post=48"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/liusaide.cn\/index.php\/wp-json\/wp\/v2\/tags?post=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}