{"id":266,"date":"2025-01-07T03:48:18","date_gmt":"2025-01-07T03:48:18","guid":{"rendered":"https:\/\/smallmoon.net\/?p=266"},"modified":"2025-01-07T09:05:44","modified_gmt":"2025-01-07T09:05:44","slug":"tcs","status":"publish","type":"post","link":"https:\/\/smallmoon.net\/?p=266","title":{"rendered":"\u8d2a\u5403\u86c7"},"content":{"rendered":"\n<div style=\"display: flex; flex-direction: column; align-items: center;\">\n    <canvas id=\"snakeCanvas\" width=\"360\" height=\"400\" style=\"background:white;display: block;margin:20px auto; border: 2px solid black;\"><\/canvas>\n    <div id=\"scoreDisplay\" style=\"margin-bottom: 10px;\">\u5206\u6570: 0<\/div>\n    <div id=\"gameOverDisplay\" style=\"margin-bottom: 10px; color: red; font-weight: bold; display: none;\">\u6e38\u620f\u7ed3\u675f!<\/div>\n    <div style=\"display: flex; justify-content: center; margin-bottom: 10px;\">\n        <button id=\"startButton\" style=\"margin: 5px; padding: 10px 20px;\">\u5f00\u59cb\u6e38\u620f<\/button>\n    <\/div>\n    <div style=\"display: flex; justify-content: center;\">\n        <button style=\"margin: 5px; padding: 10px 20px;\" onclick=\"setDirection(-18)\">\u4e0a<\/button>\n    <\/div>\n    <div style=\"display: flex; justify-content: center;\">\n        <button style=\"margin: 5px; padding: 10px 20px;\" onclick=\"setDirection(-1)\">\u5de6<\/button>\n        <button style=\"margin: 5px; padding: 10px 20px;\" onclick=\"setDirection(1)\">\u53f3<\/button>\n    <\/div>\n    <div style=\"display: flex; justify-content: center;\">\n       <button style=\"margin: 5px; padding: 10px 20px;\" onclick=\"setDirection(18)\">\u4e0b<\/button>\n    <\/div>\n<\/div>\n<script>\nvar snake = [42, 41];\nvar food = 43;\nvar direction = 1;\nvar nextMove;\nvar canvas = document.getElementById(\"snakeCanvas\");\nvar ctx = canvas.getContext(\"2d\");\nvar gridSize = 18; \/\/ \u4fee\u6539 gridSize \u4e3a 18\uff0c\u9002\u5e94 360x400 \u7684\u753b\u5e03\nvar cellSize = 20;\nvar gameRunning = false;\nvar scoreDisplay = document.getElementById(\"scoreDisplay\");\nvar gameOverDisplay = document.getElementById(\"gameOverDisplay\");\nvar score = 0;\n\nfunction drawCell(index, color) {\n    ctx.fillStyle = color;\n    var x = (index % gridSize) * cellSize + 1;\n    var y = Math.floor(index \/ gridSize) * cellSize + 1;\n    ctx.fillRect(x, y, cellSize - 2, cellSize - 2);\n}\n\nfunction setDirection(newDirection) {\n    if (!gameRunning) return;\n    if (snake[1] - snake[0] !== newDirection * -1) {\n        direction = newDirection;\n    }\n}\n\ndocument.addEventListener(\"keydown\", function(event) {\n    if (!gameRunning) return;\n    var newDirection;\n    switch (event.keyCode) {\n        case 37: \/\/ \u5de6\n            newDirection = -1;\n            break;\n        case 38: \/\/ \u4e0a\n            newDirection = -gridSize;\n            break;\n        case 39: \/\/ \u53f3\n            newDirection = 1;\n            break;\n        case 40: \/\/ \u4e0b\n            newDirection = gridSize;\n            break;\n        default:\n            return;\n    }\n      if (snake[1] - snake[0] !== newDirection * -1) {\n        direction = newDirection;\n    }\n});\n\nfunction gameLoop() {\n    if (!gameRunning) return;\n    snake.unshift(nextMove = snake[0] + direction);\n\n    var headX = nextMove % gridSize;\n    var headY = Math.floor(nextMove \/ gridSize);\n\n    if (snake.indexOf(nextMove, 1) > 0 || nextMove < 0 || nextMove >= gridSize * (canvas.height \/ cellSize) ||\n        (direction === 1 && headX === 0) || (direction === -1 && headX === gridSize - 1)) {\n           gameOverDisplay.style.display = \"inline-block\";\n            gameRunning = false;\n            return;\n    }\n\n    drawCell(nextMove, \"lime\");\n\n    if (nextMove === food) {\n        score += 1;\n        scoreDisplay.textContent = \"\u5206\u6570: \" + score;\n        while (snake.indexOf(food = Math.floor(Math.random() * gridSize * (canvas.height \/ cellSize))) >= 0);\n         drawCell(food, \"yellow\");\n    } else {\n        drawCell(snake.pop(), \"white\");\n    }\n    setTimeout(gameLoop, 200);\n}\n\n\ndocument.getElementById('startButton').addEventListener('click', function() {\n    if (!gameRunning) {\n    snake = [42, 41];\n    direction = 1;\n    score = 0;\n    scoreDisplay.textContent = \"\u5206\u6570: \" + score;\n    gameOverDisplay.style.display = \"none\";\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\n    while (snake.indexOf(food = Math.floor(Math.random() * gridSize * (canvas.height \/ cellSize))) >= 0);\n    drawCell(food, \"yellow\");\n    gameRunning = true;\n    gameLoop();\n    }\n});\n\/\/ \u521d\u59cb\u5316\u98df\u7269\nwhile (snake.indexOf(food = Math.floor(Math.random() * gridSize * (canvas.height \/ cellSize))) >= 0);\ndrawCell(food, \"yellow\");\n<\/script>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5206\u6570: 0 \u6e38\u620f\u7ed3\u675f! \u5f00\u59cb\u6e38\u620f \u4e0a \u5de6 \u53f3 \u4e0b<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[21],"class_list":["post-266","post","type-post","status-publish","format-standard","hentry","category-game","tag-21"],"_links":{"self":[{"href":"https:\/\/smallmoon.net\/index.php?rest_route=\/wp\/v2\/posts\/266","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smallmoon.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/smallmoon.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/smallmoon.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smallmoon.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=266"}],"version-history":[{"count":20,"href":"https:\/\/smallmoon.net\/index.php?rest_route=\/wp\/v2\/posts\/266\/revisions"}],"predecessor-version":[{"id":324,"href":"https:\/\/smallmoon.net\/index.php?rest_route=\/wp\/v2\/posts\/266\/revisions\/324"}],"wp:attachment":[{"href":"https:\/\/smallmoon.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/smallmoon.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/smallmoon.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}