html<!DOCTYPE html><html><head> <title>\u8d2a\u5403\u86c7\u6e38\u620f<\/title> <style> #game-board { position: relative; width: 400px; height: 400px; border: 1px solid #000; } .snake { position: absolute; width: 20px; height: 20px; background-color: #000; } .food { position: absolute; width: 20px; height: 20px; background-color: #f00; } <\/style><\/head><body> <div id=\"game-board\"><\/div> <script> \/\/ \u6e38\u620f\u914d\u7f6e const boardSize = 10; \/\/ \u6e38\u620f\u533a\u57df\u5927\u5c0f const squareSize = 20; \/\/ \u6bcf\u4e2a\u65b9\u5757\u7684\u5927\u5c0f const initialSnakeLength = 5; \/\/ \u521d\u59cb\u86c7\u7684\u957f\u5ea6 \/\/ \u6e38\u620f\u72b6\u6001 let snake = []; \/\/ \u86c7\u7684\u8eab\u4f53 let direction = 'right'; \/\/ \u521d\u59cb\u65b9\u5411\u4e3a\u5411\u53f3 let food = {}; \/\/ \u98df\u7269 \/\/ \u521d\u59cb\u5316\u6e38\u620f function initGame() { const gameBoard = document.getElementById('game-board'); \/\/ \u751f\u6210\u521d\u59cb\u86c7\u7684\u8eab\u4f53 for (let i = initialSnakeLength - 1; i >= 0; i--) { snake.push({ x: i, y: 0 }); } \/\/ \u968f\u673a\u751f\u6210\u98df\u7269\u4f4d\u7f6e generateFood(); \/\/ \u76d1\u542c\u952e\u76d8\u4e8b\u4ef6\uff0c\u63a7\u5236\u86c7\u7684\u65b9\u5411 document.addEventListener('keydown', changeDirection); \/\/ \u5f00\u59cb\u6e38\u620f\u5faa\u73af gameLoop(); } \/\/ \u6e38\u620f\u5faa\u73af function gameLoop() { moveSnake(); checkCollision(); drawGameBoard(); checkFood(); } \/\/ \u79fb\u52a8\u86c7\u8eab\u4f53 function moveSnake() { const head = { x: snake[0].x, y: snake[0].y }; \/\/ \u6839\u636e\u65b9\u5411\u79fb\u52a8\u5934\u90e8 switch (direction) { case 'up': head.y--; break; case 'down': head.y++; break; case 'left': head.x--; break; case 'right': head.x++; break; } \/\/ \u5c06\u65b0\u7684\u5934\u90e8\u63d2\u5165\u5230\u86c7\u8eab\u4f53\u6570\u7ec4\u7684\u5f00\u5934 snake.unshift(head); \/\/ \u5982\u679c\u86c7\u6ca1\u6709\u5403\u5230\u98df\u7269\uff0c\u5219\u79fb\u9664\u5c3e\u90e8 if (head.x !== food.x || head.y !== food.y) { snake.pop(); } else { \/\/ \u5982\u679c\u86c7\u5403\u5230\u4e86\u98df\u7269\uff0c\u5219\u91cd\u65b0\u751f\u6210\u98df\u7269\u4f4d\u7f6e\u5e76\u66f4\u65b0\u86c7\u7684\u957f\u5ea6 generateFood(); snake.length++; } } \/\/ \u68c0\u67e5\u662f\u5426\u649e\u5230\u8fb9\u754c\u6216\u81ea\u8eab function checkCollision() { const head = snake[0]; \/\/ \u68c0\u67e5\u662f\u5426\u649e\u5230\u8fb9\u754c if (head.x < 0 || head.x >= boardSize || head.y < 0 || head.y >= boardSize) { resetGame(); return; } \/\/ \u68c0\u67e5\u662f\u5426\u649e\u5230\u81ea\u8eab for (let i = 1; i < snake.length; i++) { if (snake[i].x === head.x && snake[i].y === head.y) { resetGame(); return; } } }<\/p>\n","protected":false},"excerpt":{"rendered":"
html<!DOCTYPE html><html><head> <title>\u8d2a\u5403 …<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2419","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"http:\/\/tengyuesj.cn\/index.php?rest_route=\/wp\/v2\/posts\/2419","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/tengyuesj.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/tengyuesj.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/tengyuesj.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/tengyuesj.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2419"}],"version-history":[{"count":1,"href":"http:\/\/tengyuesj.cn\/index.php?rest_route=\/wp\/v2\/posts\/2419\/revisions"}],"predecessor-version":[{"id":2420,"href":"http:\/\/tengyuesj.cn\/index.php?rest_route=\/wp\/v2\/posts\/2419\/revisions\/2420"}],"wp:attachment":[{"href":"http:\/\/tengyuesj.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2419"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/tengyuesj.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2419"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/tengyuesj.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2419"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}