\u7279\u70b9\u5982\u4e0b\uff1a<\/p>\n\n\n\n
<canvas><\/code> \u7ed8\u5236\u6e38\u620f\u573a\u666f<\/li>\n\n\n\n- \u952e\u76d8\u63a7\u5236\u86c7\u7684\u79fb\u52a8<\/li>\n\n\n\n
- \u5403\u98df\u7269\u86c7\u8eab\u589e\u957f<\/li>\n\n\n\n
- \u649e\u5899\u6216\u649e\u5230\u81ea\u5df1\u7ed3\u675f\u6e38\u620f<\/li>\n\n\n\n
- \u9002\u5408 H5 \u7f51\u9875\u3001\u79fb\u52a8\u7aef WebView \u6216\u684c\u9762\u6d4f\u89c8\u5668<\/li>\n<\/ul>\n\n\n\n
\n\n\n\n<!DOCTYPE html>\n<html lang="zh-CN">\n<head>\n<meta charset="UTF-8">\n<meta name="viewport" content="width=device-width, initial-scale=1.0">\n<title>Canvas \u8d2a\u98df\u86c7\u5b9e\u8df5<\/title>\n<style>\n body {\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n background: #000;\n }\n canvas {\n background: #111;\n display: block;\n border: 2px solid #0f0;\n }\n<\/style>\n<\/head>\n<body>\n\n<canvas id="gameCanvas" width="400" height="400"><\/canvas>\n\n<script>\nconst canvas = document.getElementById('gameCanvas');\nconst ctx = canvas.getContext('2d');\n\nconst box = 20; \/\/ \u5355\u4f4d\u683c\u5b50\u5927\u5c0f\nconst canvasWidth = canvas.width;\nconst canvasHeight = canvas.height;\n\nlet snake = [];\nsnake[0] = { x: 8 * box, y: 8 * box }; \/\/ \u521d\u59cb\u86c7\u5934\n\nlet food = {\n x: Math.floor(Math.random() * (canvasWidth \/ box)) * box,\n y: Math.floor(Math.random() * (canvasHeight \/ box)) * box\n};\n\nlet direction = 'RIGHT';\nlet score = 0;\n\n\/\/ \u76d1\u542c\u952e\u76d8\ndocument.addEventListener('keydown', changeDirection);\n\nfunction changeDirection(e) {\n if(e.key === 'ArrowUp' && direction !== 'DOWN') direction = 'UP';\n if(e.key === 'ArrowDown' && direction !== 'UP') direction = 'DOWN';\n if(e.key === 'ArrowLeft' && direction !== 'RIGHT') direction = 'LEFT';\n if(e.key === 'ArrowRight' && direction !== 'LEFT') direction = 'RIGHT';\n}\n\n\/\/ \u68c0\u67e5\u78b0\u649e\uff08\u81ea\u5df1\u6216\u5899\uff09\nfunction collision(head, array) {\n for(let i = 0; i < array.length; i++) {\n if(head.x === array[i].x && head.y === array[i].y) return true;\n }\n return false;\n}\n\n\/\/ \u7ed8\u5236\u573a\u666f\nfunction draw() {\n \/\/ \u6e05\u7a7a\u753b\u5e03\n ctx.fillStyle = '#111';\n ctx.fillRect(0, 0, canvasWidth, canvasHeight);\n\n \/\/ \u7ed8\u5236\u98df\u7269\n ctx.fillStyle = '#f00';\n ctx.fillRect(food.x, food.y, box, box);\n\n \/\/ \u7ed8\u5236\u86c7\n for(let i = 0; i < snake.length; i++){\n ctx.fillStyle = (i === 0) ? '#0f0' : '#0a0';\n ctx.fillRect(snake[i].x, snake[i].y, box, box);\n }\n\n \/\/ \u86c7\u79fb\u52a8\n let snakeX = snake[0].x;\n let snakeY = snake[0].y;\n\n if(direction === 'LEFT') snakeX -= box;\n if(direction === 'UP') snakeY -= box;\n if(direction === 'RIGHT') snakeX += box;\n if(direction === 'DOWN') snakeY += box;\n\n \/\/ \u5403\u5230\u98df\u7269\n if(snakeX === food.x && snakeY === food.y) {\n score++;\n food = {\n x: Math.floor(Math.random() * (canvasWidth \/ box)) * box,\n y: Math.floor(Math.random() * (canvasHeight \/ box)) * box\n };\n \/\/ \u4e0d\u79fb\u9664\u5c3e\u5df4\uff0c\u86c7\u8eab\u589e\u957f\n } else {\n snake.pop(); \/\/ \u79fb\u9664\u5c3e\u5df4\n }\n\n const newHead = { x: snakeX, y: snakeY };\n\n \/\/ \u649e\u5899\u6216\u81ea\u5df1\u6b7b\u4ea1\n if(snakeX < 0 || snakeX >= canvasWidth || snakeY < 0 || snakeY >= canvasHeight || collision(newHead, snake)){\n clearInterval(game);\n alert('\u6e38\u620f\u7ed3\u675f\uff01\u5f97\u5206: ' + score);\n return;\n }\n\n snake.unshift(newHead); \/\/ \u6dfb\u52a0\u65b0\u86c7\u5934\n\n \/\/ \u7ed8\u5236\u5206\u6570\n ctx.fillStyle = '#fff';\n ctx.font = '16px Arial';\n ctx.fillText('\u5f97\u5206: ' + score, 10, 20);\n}\n\n\/\/ \u6e38\u620f\u5faa\u73af\nconst game = setInterval(draw, 150);\n\n<\/script>\n\n<\/body>\n<\/html>\n\n<\/pre><\/div>\n\n\n
\n\n\n\n\u2705 \u7279\u6027\u8bf4\u660e<\/h3>\n\n\n\n\n- \u6805\u683c\u5316\u7f51\u683c<\/strong>\n
\n- \u6bcf\u683c 20px\uff0c\u65b9\u4fbf\u78b0\u649e\u8ba1\u7b97\u548c\u79fb\u52a8\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- \u952e\u76d8\u63a7\u5236<\/strong>\n
\n- \u652f\u6301\u4e0a\u4e0b\u5de6\u53f3\u7bad\u5934\uff08\u53ef\u62d3\u5c55\u4e3a\u79fb\u52a8\u7aef\u624b\u52bf\u63a7\u5236\uff09\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- \u52a8\u6001\u589e\u957f<\/strong>\n
\n- \u5403\u5230\u98df\u7269\u86c7\u8eab\u589e\u52a0\u4e00\u683c\uff0c\u4e0d\u5403\u5219\u5c3e\u5df4\u6d88\u5931\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- \u78b0\u649e\u5224\u5b9a<\/strong>\n
\n- \u649e\u5899\u6216\u649e\u5230\u81ea\u5df1\u4f1a\u7ed3\u675f\u6e38\u620f\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- \u5206\u6570\u663e\u793a<\/strong>\n
\n- \u5de6\u4e0a\u89d2\u663e\u793a\u5f53\u524d\u5f97\u5206\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
\u7279\u70b9\u5982\u4e0b\uff1a \u2705 \u7279\u6027\u8bf4\u660e<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-191","post","type-post","status-publish","format-standard","hentry","category-html5"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/191","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=191"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/191\/revisions"}],"predecessor-version":[{"id":192,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/191\/revisions\/192"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=191"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=191"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}