{"id":58319,"date":"2025-08-16T08:06:16","date_gmt":"2025-08-16T00:06:16","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/58319.html"},"modified":"2025-08-16T08:06:16","modified_gmt":"2025-08-16T00:06:16","slug":"%e5%9f%ba%e4%ba%8ecodebuddy%e7%9a%842d%e6%b8%b8%e6%88%8f%e5%bc%80%e5%8f%91%e5%ae%9e%e8%b7%b5%ef%bc%9a%e7%82%ab%e9%85%b7%e5%a4%a7%e4%be%bf%e8%b6%85%e4%ba%ba%e6%a0%b8%e5%bf%83%e6%9c%ba%e5%88%b6%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/58319.html","title":{"rendered":"\u57fa\u4e8eCodeBuddy\u76842D\u6e38\u620f\u5f00\u53d1\u5b9e\u8df5\uff1a\u70ab\u9177\u5927\u4fbf\u8d85\u4eba\u6838\u5fc3\u673a\u5236\u89e3\u6790"},"content":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/08\/20250816000610-689fcb7232b60.png\" alt=\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \/><\/p>\n<h3>\u4e00\u3001CodeBuddy\u5e73\u53f0\u6982\u8ff0\u4e0e\u6280\u672f\u8d4b\u80fd<\/h3>\n<h4>1.1 CodeBuddy\u5e73\u53f0\u6838\u5fc3\u80fd\u529b<\/h4>\n<p><img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/08\/20250816000610-689fcb72cdfea.png\" alt=\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \/><\/p>\n<p>CodeBuddy\u4f5c\u4e3a\u4e00\u6b3e\u9762\u5411\u5f00\u53d1\u8005\u7684\u4e91\u7aef\u96c6\u6210\u5f00\u53d1\u73af\u5883&#xff08;Cloud IDE&#xff09;&#xff0c;\u4e3a&#034;\u70ab\u9177\u5927\u4fbf\u8d85\u4eba&#034;\u8fd9\u7c7bHTML5\u6e38\u620f\u7684\u5f00\u53d1\u63d0\u4f9b\u4e86\u5f3a\u5927\u7684\u6280\u672f\u652f\u6491\u548c\u9ad8\u6548\u7684\u5f00\u53d1\u4f53\u9a8c\u3002\u5176\u6838\u5fc3\u4ef7\u503c\u4f53\u73b0\u5728\u4ee5\u4e0b\u51e0\u4e2a\u65b9\u9762&#xff1a;<\/p>\n<p>\u667a\u80fd\u5f00\u53d1\u73af\u5883&#xff1a;<\/p>\n<ul>\n<li>\u4e91\u7aef\u4e00\u4f53\u5316&#xff1a;\u65e0\u9700\u672c\u5730\u73af\u5883\u914d\u7f6e&#xff0c;\u901a\u8fc7\u6d4f\u89c8\u5668\u5373\u53ef\u8bbf\u95ee\u5b8c\u6574\u7684\u5f00\u53d1\u5de5\u5177\u94fe&#xff0c;\u5305\u62ec\u4ee3\u7801\u7f16\u8f91\u5668\u3001\u8c03\u8bd5\u5668\u3001\u7248\u672c\u63a7\u5236\u7cfb\u7edf<\/li>\n<li>\u9884\u7f6e\u6280\u672f\u6808&#xff1a;\u5185\u7f6eHTML5\u3001CSS3\u3001JavaScript\u7b49\u524d\u7aef\u5f00\u53d1\u6240\u9700\u7684\u8fd0\u884c\u65f6\u73af\u5883\u548c\u5e93\u6587\u4ef6&#xff0c;\u5f00\u53d1\u8005\u53ef\u7acb\u5373\u5f00\u59cb\u7f16\u7801<\/li>\n<li>\u8d44\u6e90\u52a0\u901f&#xff1a;\u57fa\u4e8e\u4e91\u7aef\u7684\u8ba1\u7b97\u8d44\u6e90&#xff0c;\u63d0\u4f9b\u5feb\u901f\u7684\u6784\u5efa\u3001\u6d4b\u8bd5\u548c\u90e8\u7f72\u80fd\u529b&#xff0c;\u663e\u8457\u63d0\u5347\u5f00\u53d1\u6548\u7387<\/li>\n<\/ul>\n<p>\u534f\u4f5c\u4e0e\u9879\u76ee\u7ba1\u7406&#xff1a;<\/p>\n<ul>\n<li>\u5b9e\u65f6\u534f\u4f5c&#xff1a;\u652f\u6301\u591a\u4eba\u540c\u65f6\u7f16\u8f91\u4ee3\u7801&#xff0c;\u5b9e\u73b0\u56e2\u961f\u6210\u5458\u95f4\u7684\u65e0\u7f1d\u534f\u4f5c&#xff0c;\u7279\u522b\u9002\u5408\u6e38\u620f\u5f00\u53d1\u4e2d\u7684\u7f8e\u672f\u3001\u7b56\u5212\u4e0e\u7a0b\u5e8f\u534f\u540c<\/li>\n<li>\u7248\u672c\u63a7\u5236\u96c6\u6210&#xff1a;\u5185\u7f6eGit\u652f\u6301&#xff0c;\u63d0\u4f9b\u4ee3\u7801\u7248\u672c\u7ba1\u7406\u3001\u5206\u652f\u7ba1\u7406\u548c\u5386\u53f2\u8ffd\u6eaf\u529f\u80fd&#xff0c;\u786e\u4fdd\u5f00\u53d1\u8fc7\u7a0b\u7684\u53ef\u63a7\u6027<\/li>\n<li>\u9879\u76ee\u7ba1\u7406\u5de5\u5177&#xff1a;\u63d0\u4f9b\u4efb\u52a1\u5206\u914d\u3001\u8fdb\u5ea6\u8ddf\u8e2a\u548c\u91cc\u7a0b\u7891\u7ba1\u7406\u529f\u80fd&#xff0c;\u5e2e\u52a9\u56e2\u961f\u9ad8\u6548\u7ec4\u7ec7\u5f00\u53d1\u6d41\u7a0b<\/li>\n<\/ul>\n<p>\u5f00\u53d1\u8f85\u52a9\u529f\u80fd&#xff1a;<\/p>\n<ul>\n<li>\u4ee3\u7801\u667a\u80fd\u63d0\u793a&#xff1a;\u57fa\u4e8eAI\u7684\u4ee3\u7801\u8865\u5168\u548c\u9519\u8bef\u68c0\u6d4b&#xff0c;\u51cf\u5c11\u8bed\u6cd5\u9519\u8bef\u548c\u903b\u8f91\u95ee\u9898<\/li>\n<li>\u8c03\u8bd5\u5de5\u5177\u94fe&#xff1a;\u96c6\u6210Chrome DevTools\u7b49\u8c03\u8bd5\u5de5\u5177&#xff0c;\u652f\u6301\u65ad\u70b9\u8c03\u8bd5\u3001\u6027\u80fd\u5206\u6790\u548c\u5185\u5b58\u6cc4\u6f0f\u68c0\u6d4b<\/li>\n<li>\u90e8\u7f72\u4e0e\u53d1\u5e03&#xff1a;\u4e00\u952e\u90e8\u7f72\u5230\u4e91\u7aef\u670d\u52a1\u5668\u6216\u751f\u6210\u53ef\u5206\u4eab\u7684\u94fe\u63a5&#xff0c;\u7b80\u5316\u6e38\u620f\u53d1\u5e03\u6d41\u7a0b<\/li>\n<\/ul>\n<h4>1.2 CodeBuddy\u5728\u6e38\u620f\u5f00\u53d1\u4e2d\u7684\u72ec\u7279\u4f18\u52bf<\/h4>\n<p>\u5bf9\u4e8e&#034;\u70ab\u9177\u5927\u4fbf\u8d85\u4eba&#034;\u8fd9\u7c7bHTML5 Canvas\u6e38\u620f\u7684\u5f00\u53d1&#xff0c;CodeBuddy\u5e73\u53f0\u63d0\u4f9b\u4e86\u4ee5\u4e0b\u9488\u5bf9\u6027\u4f18\u52bf&#xff1a;<\/p>\n<p>Canvas\u6e38\u620f\u4f18\u5316\u652f\u6301&#xff1a;<\/p>\n<ul>\n<li>\u6027\u80fd\u76d1\u63a7&#xff1a;\u5b9e\u65f6\u76d1\u63a7\u6e38\u620f\u5e27\u7387\u3001\u5185\u5b58\u4f7f\u7528\u548cCPU\u5360\u7528&#xff0c;\u5e2e\u52a9\u5f00\u53d1\u8005\u4f18\u5316\u6e38\u620f\u6027\u80fd<\/li>\n<li>\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u5de5\u5177&#xff1a;\u63d0\u4f9b\u8bbe\u5907\u6a21\u62df\u5668&#xff0c;\u652f\u6301PC\u548c\u79fb\u52a8\u8bbe\u5907\u7684\u754c\u9762\u9884\u89c8\u548c\u9002\u914d\u8c03\u8bd5<\/li>\n<li>\u56fe\u5f62\u6e32\u67d3\u8c03\u8bd5&#xff1a;\u4e13\u95e8\u7684Canvas\u6e32\u67d3\u8c03\u8bd5\u5de5\u5177&#xff0c;\u53ef\u89c6\u5316\u5206\u6790\u7ed8\u5236\u8c03\u7528\u548c\u6027\u80fd\u74f6\u9888<\/li>\n<\/ul>\n<p>\u8de8\u5e73\u53f0\u5f00\u53d1\u80fd\u529b&#xff1a;<\/p>\n<ul>\n<li>\u591a\u8bbe\u5907\u540c\u6b65&#xff1a;\u4ee3\u7801\u548c\u8d44\u6e90\u5728\u4e91\u7aef\u540c\u6b65&#xff0c;\u786e\u4fdd\u5728\u4e0d\u540c\u8bbe\u5907\u4e0a\u7684\u4e00\u81f4\u6027\u5f00\u53d1\u4f53\u9a8c<\/li>\n<li>\u79fb\u52a8\u7aef\u9002\u914d&#xff1a;\u5185\u7f6e\u79fb\u52a8\u8bbe\u5907\u6d4b\u8bd5\u73af\u5883&#xff0c;\u652f\u6301\u89e6\u5c4f\u4e8b\u4ef6\u6a21\u62df\u548c\u54cd\u5e94\u5f0f\u5e03\u5c40\u8c03\u8bd5<\/li>\n<li>\u4e91\u5b58\u50a8\u96c6\u6210&#xff1a;\u4e0e\u4e91\u5b58\u50a8\u670d\u52a1\u65e0\u7f1d\u5bf9\u63a5&#xff0c;\u65b9\u4fbf\u6e38\u620f\u8d44\u6e90&#xff08;\u5982\u56fe\u7247\u3001\u97f3\u6548&#xff09;\u7684\u7ba1\u7406\u548c\u7248\u672c\u63a7\u5236<\/li>\n<\/ul>\n<p>\u56e2\u961f\u534f\u4f5c\u4f18\u5316&#xff1a;<\/p>\n<ul>\n<li>\u5b9e\u65f6\u6e38\u620f\u9884\u89c8&#xff1a;\u56e2\u961f\u6210\u5458\u53ef\u5b9e\u65f6\u67e5\u770b\u6e38\u620f\u8fd0\u884c\u72b6\u6001&#xff0c;\u63d0\u4f9b\u5373\u65f6\u53cd\u9988<\/li>\n<li>\u4ee3\u7801\u5ba1\u67e5\u5de5\u5177&#xff1a;\u5185\u7f6e\u4ee3\u7801\u5ba1\u67e5\u529f\u80fd&#xff0c;\u786e\u4fdd\u6e38\u620f\u4ee3\u7801\u8d28\u91cf<\/li>\n<li>\u9879\u76ee\u7ba1\u7406\u9762\u677f&#xff1a;\u53ef\u89c6\u5316\u5c55\u793a\u5f00\u53d1\u8fdb\u5ea6\u3001\u4efb\u52a1\u5206\u914d\u548c\u95ee\u9898\u8ddf\u8e2a<\/li>\n<\/ul>\n<h3>\u4e8c\u3001&#034;\u70ab\u9177\u5927\u4fbf\u8d85\u4eba&#034;\u6e38\u620f\u67b6\u6784\u8bbe\u8ba1\u4e0e\u6280\u672f\u5b9e\u73b0<\/h3>\n<h4>2.1 \u6574\u4f53\u67b6\u6784\u8bbe\u8ba1<\/h4>\n<p>\u57fa\u4e8eCodeBuddy\u5e73\u53f0&#xff0c;&#034;\u70ab\u9177\u5927\u4fbf\u8d85\u4eba&#034;\u91c7\u7528\u5206\u5c42\u67b6\u6784\u8bbe\u8ba1&#xff0c;\u786e\u4fdd\u4ee3\u7801\u7684\u53ef\u7ef4\u62a4\u6027\u548c\u6269\u5c55\u6027&#xff1a;<\/p>\n<p>\u8868\u793a\u5c42&#xff08;Presentation Layer&#xff09;&#xff1a;<\/p>\n<ul>\n<li>HTML5 Canvas\u6e32\u67d3\u5f15\u64ce&#xff1a;\u8d1f\u8d23\u6240\u6709\u89c6\u89c9\u5143\u7d20\u7684\u7ed8\u5236&#xff0c;\u5305\u62ec\u89d2\u8272\u3001\u654c\u4eba\u3001\u9053\u5177\u3001\u80cc\u666f\u548c\u7279\u6548<\/li>\n<li>CSS3\u7528\u6237\u754c\u9762&#xff1a;\u5904\u7406\u6e38\u620f\u914d\u7f6e\u9762\u677f\u3001\u72b6\u6001\u663e\u793a\u548c\u79fb\u52a8\u7aef\u63a7\u5236\u754c\u9762<\/li>\n<li>\u54cd\u5e94\u5f0f\u5e03\u5c40\u7cfb\u7edf&#xff1a;\u81ea\u52a8\u9002\u914d\u4e0d\u540c\u5c4f\u5e55\u5c3a\u5bf8\u548c\u8bbe\u5907\u7c7b\u578b<\/li>\n<\/ul>\n<p>\u903b\u8f91\u5c42&#xff08;Logic Layer&#xff09;&#xff1a;<\/p>\n<ul>\n<li>\u6e38\u620f\u6838\u5fc3\u5f15\u64ce&#xff1a;\u81ea\u4e3b\u5f00\u53d1\u7684\u8f7b\u91cf\u7ea7\u6e38\u620f\u5f15\u64ce&#xff0c;\u7ba1\u7406\u6e38\u620f\u5faa\u73af\u3001\u5b9e\u4f53\u7cfb\u7edf\u548c\u4e8b\u4ef6\u5904\u7406<\/li>\n<li>\u73a9\u5bb6\u63a7\u5236\u7cfb\u7edf&#xff1a;\u5904\u7406\u952e\u76d8\u3001\u89e6\u5c4f\u548c\u865a\u62df\u6309\u952e\u8f93\u5165&#xff0c;\u5b9e\u73b0\u89d2\u8272\u79fb\u52a8\u548c\u6280\u80fd\u91ca\u653e<\/li>\n<li>\u6e38\u620f\u673a\u5236\u6a21\u5757&#xff1a;\u5305\u542b\u5206\u6570\u7cfb\u7edf\u3001\u65f6\u95f4\u8bb0\u5f55\u3001\u78b0\u649e\u68c0\u6d4b\u548c\u6e38\u620f\u72b6\u6001\u7ba1\u7406<\/li>\n<\/ul>\n<p>\u6570\u636e\u5c42&#xff08;Data Layer&#xff09;&#xff1a;<\/p>\n<ul>\n<li>\u672c\u5730\u5b58\u50a8\u7cfb\u7edf&#xff1a;\u57fa\u4e8elocalStorage\u7684\u73a9\u5bb6\u914d\u7f6e\u548c\u6e38\u620f\u6570\u636e\u6301\u4e45\u5316<\/li>\n<li>\u8d44\u6e90\u914d\u7f6e\u7ba1\u7406&#xff1a;\u6e38\u620f\u7d20\u6750&#xff08;\u56fe\u7247\u3001\u97f3\u6548&#xff09;\u7684\u52a0\u8f7d\u548c\u7ba1\u7406<\/li>\n<li>\u6e38\u620f\u72b6\u6001\u4fdd\u5b58&#xff1a;\u6700\u9ad8\u5206\u8bb0\u5f55\u3001\u73a9\u5bb6\u8fdb\u5ea6\u7684\u6301\u4e45\u5316\u5b58\u50a8<\/li>\n<\/ul>\n<h4>2.2 \u6838\u5fc3\u6a21\u5757\u5b9e\u73b0\u7ec6\u8282<\/h4>\n<h5>2.2.1 \u6e38\u620f\u5f15\u64ce\u6838\u5fc3&#xff08;app.js&#xff09;<\/h5>\n<p>\u6e38\u620f\u5f15\u64ce\u662f\u6574\u4e2a\u9879\u76ee\u7684\u6838\u5fc3&#xff0c;\u8d1f\u8d23\u534f\u8c03\u5404\u4e2a\u5b50\u7cfb\u7edf\u7684\u5de5\u4f5c&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u6e38\u620f\u4e3b\u5faa\u73af &#8211; \u57fa\u4e8erequestAnimationFrame\u7684\u9ad8\u6027\u80fd\u5b9e\u73b0<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">GameEngine<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>canvas <span class=\"token operator\">&#061;<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;gameCanvas&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>ctx <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>canvas<span class=\"token punctuation\">.<\/span><span class=\"token function\">getContext<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;2d&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>lastTime <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>accumulator <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>timestep <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">1000<\/span><span class=\"token operator\">\/<\/span><span class=\"token number\">60<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ 60 FPS<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>entities <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>particles <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>running <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u542f\u52a8\u6e38\u620f\u5faa\u73af<\/span><br \/>\n    <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>running <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">gameLoop<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u4e3b\u6e38\u620f\u5faa\u73af &#8211; \u56fa\u5b9a\u65f6\u95f4\u6b65\u957f\u786e\u4fdd\u7269\u7406\u4e00\u81f4\u6027<\/span><br \/>\n    <span class=\"token function\">gameLoop<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">currentTime <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>running<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">const<\/span> deltaTime <span class=\"token operator\">&#061;<\/span> currentTime <span class=\"token operator\">&#8211;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>lastTime<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>lastTime <span class=\"token operator\">&#061;<\/span> currentTime<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>accumulator <span class=\"token operator\">&#043;&#061;<\/span> deltaTime<span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u5904\u7406\u8f93\u5165\u4e8b\u4ef6<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">handleInput<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u56fa\u5b9a\u65f6\u95f4\u6b65\u957f\u66f4\u65b0\u6e38\u620f\u903b\u8f91<\/span><br \/>\n        <span class=\"token keyword\">while<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>accumulator <span class=\"token operator\">&gt;&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>timestep<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>timestep<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>accumulator <span class=\"token operator\">-&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>timestep<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u6e32\u67d3\u5f53\u524d\u5e27<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token function\">requestAnimationFrame<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">time<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">gameLoop<\/span><span class=\"token punctuation\">(<\/span>time<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u6e38\u620f\u903b\u8f91\u66f4\u65b0<\/span><br \/>\n    <span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">deltaTime<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u66f4\u65b0\u6240\u6709\u6e38\u620f\u5b9e\u4f53<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>entities<span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">entity<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>entity<span class=\"token punctuation\">.<\/span>update<span class=\"token punctuation\">)<\/span> entity<span class=\"token punctuation\">.<\/span><span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span>deltaTime<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u66f4\u65b0\u7c92\u5b50\u7cfb\u7edf<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">updateParticles<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u78b0\u649e\u68c0\u6d4b<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">checkCollisions<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u6e38\u620f\u72b6\u6001\u7ba1\u7406<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">manageGameState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u6e32\u67d3\u6240\u6709\u6e38\u620f\u5143\u7d20<\/span><br \/>\n    <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u6e05\u7a7a\u753b\u5e03<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">clearRect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>canvas<span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>canvas<span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u7ed8\u5236\u80cc\u666f\u548c\u7f51\u683c<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">renderBackground<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u7ed8\u5236\u6240\u6709\u6e38\u620f\u5b9e\u4f53<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>entities<span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">entity<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>entity<span class=\"token punctuation\">.<\/span>render<span class=\"token punctuation\">)<\/span> entity<span class=\"token punctuation\">.<\/span><span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>ctx<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u7ed8\u5236\u7c92\u5b50\u6548\u679c<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">renderParticles<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u7ed8\u5236UI\u5143\u7d20<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">renderUI<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h5>2.2.2 \u89d2\u8272\u81ea\u5b9a\u4e49\u7cfb\u7edf<\/h5>\n<p>\u6e38\u620f\u63d0\u4f9b\u4e86\u4e30\u5bcc\u7684\u89d2\u8272\u81ea\u5b9a\u4e49\u529f\u80fd&#xff0c;\u589e\u5f3a\u73a9\u5bb6\u7684\u4e2a\u6027\u5316\u4f53\u9a8c&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u73a9\u5bb6\u89d2\u8272\u7c7b &#8211; \u5305\u542b\u81ea\u5b9a\u4e49\u5916\u89c2\u548c\u80fd\u529b<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Player<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">x<span class=\"token punctuation\">,<\/span> y<span class=\"token punctuation\">,<\/span> config <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#061;<\/span> x<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#061;<\/span> y<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">40<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">40<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>speed <span class=\"token operator\">&#061;<\/span> config<span class=\"token punctuation\">.<\/span>speed <span class=\"token operator\">||<\/span> <span class=\"token number\">200<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>health <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">100<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>maxHealth <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">100<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>name <span class=\"token operator\">&#061;<\/span> config<span class=\"token punctuation\">.<\/span>name <span class=\"token operator\">||<\/span> <span class=\"token string\">&#039;\u533f\u540d\u5927\u4fbf\u8d85\u4eba&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>avatar <span class=\"token operator\">&#061;<\/span> config<span class=\"token punctuation\">.<\/span>avatar <span class=\"token operator\">||<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getDefaultAvatar<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>skills <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token literal-property property\">normal<\/span><span class=\"token operator\">:<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NormalAttack<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token literal-property property\">area<\/span><span class=\"token operator\">:<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">AreaAttack<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>buffs <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u5f53\u524dbuff\u6548\u679c<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u83b7\u53d6\u9ed8\u8ba4\u5934\u50cf &#8211; \u53ef\u901a\u8fc7URL\u6216\u672c\u5730\u4e0a\u4f20\u81ea\u5b9a\u4e49<\/span><br \/>\n    <span class=\"token function\">getDefaultAvatar<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token string\">&#039;data:image\/svg&#043;xml;base64,&#8230;&#039;<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u9ed8\u8ba4\u5927\u4fbf\u8d85\u4ebaSVG\u56fe\u6807<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u79fb\u52a8\u63a7\u5236<\/span><br \/>\n    <span class=\"token function\">move<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">direction<span class=\"token punctuation\">,<\/span> deltaTime<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> velocity <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>speed <span class=\"token operator\">*<\/span> <span class=\"token punctuation\">(<\/span>deltaTime <span class=\"token operator\">\/<\/span> <span class=\"token number\">1000<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">switch<\/span><span class=\"token punctuation\">(<\/span>direction<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">case<\/span> <span class=\"token string\">&#039;up&#039;<\/span><span class=\"token operator\">:<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">-&#061;<\/span> velocity<span class=\"token punctuation\">;<\/span> <span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">case<\/span> <span class=\"token string\">&#039;down&#039;<\/span><span class=\"token operator\">:<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#043;&#061;<\/span> velocity<span class=\"token punctuation\">;<\/span> <span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">case<\/span> <span class=\"token string\">&#039;left&#039;<\/span><span class=\"token operator\">:<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">-&#061;<\/span> velocity<span class=\"token punctuation\">;<\/span> <span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">case<\/span> <span class=\"token string\">&#039;right&#039;<\/span><span class=\"token operator\">:<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#043;&#061;<\/span> velocity<span class=\"token punctuation\">;<\/span> <span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">constrainToCanvas<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u6280\u80fd\u91ca\u653e\u7cfb\u7edf<\/span><br \/>\n    <span class=\"token function\">useSkill<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">skillType<span class=\"token punctuation\">,<\/span> targetX<span class=\"token punctuation\">,<\/span> targetY<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>skills<span class=\"token punctuation\">[<\/span>skillType<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>skills<span class=\"token punctuation\">[<\/span>skillType<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">activate<\/span><span class=\"token punctuation\">(<\/span>targetX<span class=\"token punctuation\">,<\/span> targetY<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u6e32\u67d3\u73a9\u5bb6\u89d2\u8272<\/span><br \/>\n    <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">ctx<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u7ed8\u5236\u89d2\u8272\u4e3b\u4f53<\/span><br \/>\n        ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">save<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u5e94\u7528\u5149\u73af\u6548\u679c&#xff08;\u5982\u679c\u6709&#xff09;<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">hasAuraEffect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">renderAura<\/span><span class=\"token punctuation\">(<\/span>ctx<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u7ed8\u5236\u89d2\u8272\u80cc\u666f<\/span><br \/>\n        ctx<span class=\"token punctuation\">.<\/span>fillStyle <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;#8B4513&#039;<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u68d5\u8272\u57fa\u7840\u8272<\/span><br \/>\n        ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">fillRect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u7ed8\u5236\u89d2\u8272\u7ec6\u8282<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">renderCharacterDetails<\/span><span class=\"token punctuation\">(<\/span>ctx<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u7ed8\u5236\u5934\u50cf<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">renderAvatar<\/span><span class=\"token punctuation\">(<\/span>ctx<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u7ed8\u5236\u73a9\u5bb6\u540d\u79f0<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">renderName<\/span><span class=\"token punctuation\">(<\/span>ctx<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">restore<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u6e32\u67d3\u89d2\u8272\u5149\u73af\u6548\u679c<\/span><br \/>\n    <span class=\"token function\">renderAura<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">ctx<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> gradient <span class=\"token operator\">&#061;<\/span> ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">createRadialGradient<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#043;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#043;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>height<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#043;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#043;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>height<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>width<br \/>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        gradient<span class=\"token punctuation\">.<\/span><span class=\"token function\">addColorStop<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">&#039;rgba(255, 215, 0, 0.3)&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        gradient<span class=\"token punctuation\">.<\/span><span class=\"token function\">addColorStop<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">&#039;rgba(255, 215, 0, 0)&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        ctx<span class=\"token punctuation\">.<\/span>fillStyle <span class=\"token operator\">&#061;<\/span> gradient<span class=\"token punctuation\">;<\/span><br \/>\n        ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">fillRect<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">20<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">20<\/span><br \/>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h5>2.2.3 \u654c\u4ebaAI\u7cfb\u7edf<\/h5>\n<p>\u591a\u6837\u5316\u7684\u654c\u4eba\u884c\u4e3a\u6a21\u5f0f\u589e\u52a0\u4e86\u6e38\u620f\u7684\u6311\u6218\u6027\u548c\u8da3\u5473\u6027&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u654c\u4eba\u57fa\u7c7b &#8211; \u5b9e\u73b0\u57fa\u7840AI\u884c\u4e3a<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Enemy<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span>x<span class=\"token punctuation\">,<\/span> y<span class=\"token punctuation\">,<\/span> type <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;basic&#039;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#061;<\/span> x<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#061;<\/span> y<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>type <span class=\"token operator\">&#061;<\/span> type<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">30<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">30<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>speed <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getSpeedByType<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>health <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getHealthByType<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>maxHealth <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>health<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>damage <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getDamageByType<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>behavior <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">createBehavior<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>target <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">null<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u6839\u636e\u654c\u4eba\u7c7b\u578b\u8bbe\u7f6e\u57fa\u7840\u5c5e\u6027<\/span><br \/>\n    <span class=\"token function\">getSpeedByType<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> speeds <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token literal-property property\">basic<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">50<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token literal-property property\">fast<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">120<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token literal-property property\">tank<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">30<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token literal-property property\">boss<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">70<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> speeds<span class=\"token punctuation\">[<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>type<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">||<\/span> speeds<span class=\"token punctuation\">.<\/span>basic<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">getHealthByType<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> healths <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token literal-property property\">basic<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">30<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token literal-property property\">fast<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">20<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token literal-property property\">tank<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">100<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token literal-property property\">boss<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">200<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> healths<span class=\"token punctuation\">[<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>type<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">||<\/span> healths<span class=\"token punctuation\">.<\/span>basic<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">getDamageByType<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> damages <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token literal-property property\">basic<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token literal-property property\">fast<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">8<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token literal-property property\">tank<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">15<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token literal-property property\">boss<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">25<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> damages<span class=\"token punctuation\">[<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>type<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">||<\/span> damages<span class=\"token punctuation\">.<\/span>basic<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u521b\u5efaAI\u884c\u4e3a\u6a21\u5f0f<\/span><br \/>\n    <span class=\"token function\">createBehavior<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">switch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>type<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">case<\/span> <span class=\"token string\">&#039;chaser&#039;<\/span><span class=\"token operator\">:<\/span><br \/>\n                <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">ChaserBehavior<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">case<\/span> <span class=\"token string\">&#039;patroller&#039;<\/span><span class=\"token operator\">:<\/span><br \/>\n                <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">PatrollerBehavior<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">case<\/span> <span class=\"token string\">&#039;random&#039;<\/span><span class=\"token operator\">:<\/span><br \/>\n                <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">RandomBehavior<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">case<\/span> <span class=\"token string\">&#039;boss&#039;<\/span><span class=\"token operator\">:<\/span><br \/>\n                <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">BossBehavior<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">default<\/span><span class=\"token operator\">:<\/span><br \/>\n                <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">BasicBehavior<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u6bcf\u5e27\u66f4\u65b0\u654c\u4eba\u72b6\u6001<\/span><br \/>\n    <span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">deltaTime<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>behavior<span class=\"token punctuation\">.<\/span><span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span>deltaTime<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u8ffd\u8e2a\u73a9\u5bb6\u884c\u4e3a<\/span><br \/>\n    <span class=\"token function\">chasePlayer<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">player<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> dx <span class=\"token operator\">&#061;<\/span> player<span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#8211;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> dy <span class=\"token operator\">&#061;<\/span> player<span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#8211;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> distance <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">sqrt<\/span><span class=\"token punctuation\">(<\/span>dx <span class=\"token operator\">*<\/span> dx <span class=\"token operator\">&#043;<\/span> dy <span class=\"token operator\">*<\/span> dy<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>distance <span class=\"token operator\">&gt;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> velocity <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>speed <span class=\"token operator\">*<\/span> <span class=\"token punctuation\">(<\/span>deltaTime <span class=\"token operator\">\/<\/span> <span class=\"token number\">1000<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#043;&#061;<\/span> <span class=\"token punctuation\">(<\/span>dx <span class=\"token operator\">\/<\/span> distance<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> velocity<span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#043;&#061;<\/span> <span class=\"token punctuation\">(<\/span>dy <span class=\"token operator\">\/<\/span> distance<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> velocity<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u6e32\u67d3\u654c\u4eba<\/span><br \/>\n    <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">ctx<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u7ed8\u5236\u654c\u4eba\u4e3b\u4f53<\/span><br \/>\n        ctx<span class=\"token punctuation\">.<\/span>fillStyle <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getEnemyColor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">fillRect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u7ed8\u5236\u8840\u6761<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>health <span class=\"token operator\">&lt;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>maxHealth<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">renderHealthBar<\/span><span class=\"token punctuation\">(<\/span>ctx<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u8ffd\u8e2a\u8005\u884c\u4e3a\u6a21\u5f0f &#8211; \u667a\u80fd\u8ffd\u8e2a\u73a9\u5bb6<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">ChaserBehavior<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">enemy<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>enemy <span class=\"token operator\">&#061;<\/span> enemy<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>randomOffset <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token constant\">PI<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">deltaTime<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>game<span class=\"token punctuation\">.<\/span>player<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token comment\">\/\/ \u6dfb\u52a0\u5c11\u91cf\u968f\u673a\u6027&#xff0c;\u907f\u514d\u8fc7\u4e8e\u7cbe\u786e\u7684\u8ffd\u8e2a<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> randomFactor <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0.1<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> adjustedTargetX <span class=\"token operator\">&#061;<\/span> game<span class=\"token punctuation\">.<\/span>player<span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#043;<\/span> <span class=\"token punctuation\">(<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">0.5<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> randomFactor <span class=\"token operator\">*<\/span> <span class=\"token number\">100<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> adjustedTargetY <span class=\"token operator\">&#061;<\/span> game<span class=\"token punctuation\">.<\/span>player<span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#043;<\/span> <span class=\"token punctuation\">(<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">0.5<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> randomFactor <span class=\"token operator\">*<\/span> <span class=\"token number\">100<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>enemy<span class=\"token punctuation\">.<\/span><span class=\"token function\">chaseTarget<\/span><span class=\"token punctuation\">(<\/span>adjustedTargetX<span class=\"token punctuation\">,<\/span> adjustedTargetY<span class=\"token punctuation\">,<\/span> deltaTime<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u5de1\u903b\u8005\u884c\u4e3a\u6a21\u5f0f &#8211; \u5728\u56fa\u5b9a\u8def\u5f84\u4e0a\u5de1\u903b<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">PatrollerBehavior<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">enemy<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>enemy <span class=\"token operator\">&#061;<\/span> enemy<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>patrolPoints <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">generatePatrolPoints<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>currentTarget <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>waitTime <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">generatePatrolPoints<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u751f\u6210\u5de1\u903b\u70b9&#xff08;\u53ef\u6839\u636e\u5173\u5361\u914d\u7f6e\u8c03\u6574&#xff09;<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">[<\/span><br \/>\n            <span class=\"token punctuation\">{<\/span> <span class=\"token literal-property property\">x<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">100<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token literal-property property\">y<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">100<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token punctuation\">{<\/span> <span class=\"token literal-property property\">x<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">300<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token literal-property property\">y<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">100<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token punctuation\">{<\/span> <span class=\"token literal-property property\">x<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">300<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token literal-property property\">y<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">300<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token punctuation\">{<\/span> <span class=\"token literal-property property\">x<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">100<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token literal-property property\">y<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">300<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">deltaTime<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> currentPoint <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>patrolPoints<span class=\"token punctuation\">[<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>currentTarget<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>waitTime <span class=\"token operator\">&gt;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>waitTime <span class=\"token operator\">-&#061;<\/span> deltaTime<span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token keyword\">const<\/span> dx <span class=\"token operator\">&#061;<\/span> currentPoint<span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#8211;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>enemy<span class=\"token punctuation\">.<\/span>x<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> dy <span class=\"token operator\">&#061;<\/span> currentPoint<span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#8211;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>enemy<span class=\"token punctuation\">.<\/span>y<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> distance <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">sqrt<\/span><span class=\"token punctuation\">(<\/span>dx <span class=\"token operator\">*<\/span> dx <span class=\"token operator\">&#043;<\/span> dy <span class=\"token operator\">*<\/span> dy<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>distance <span class=\"token operator\">&lt;<\/span> <span class=\"token number\">20<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token comment\">\/\/ \u5230\u8fbe\u5de1\u903b\u70b9&#xff0c;\u7b49\u5f85\u540e\u524d\u5f80\u4e0b\u4e00\u4e2a\u70b9<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>waitTime <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">1000<\/span> <span class=\"token operator\">&#043;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">2000<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ 1-3\u79d2\u968f\u673a\u7b49\u5f85<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>currentTarget <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>currentTarget <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">%<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>patrolPoints<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token comment\">\/\/ \u79fb\u52a8\u5230\u5f53\u524d\u5de1\u903b\u70b9<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> velocity <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>enemy<span class=\"token punctuation\">.<\/span>speed <span class=\"token operator\">*<\/span> <span class=\"token punctuation\">(<\/span>deltaTime <span class=\"token operator\">\/<\/span> <span class=\"token number\">1000<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>enemy<span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#043;&#061;<\/span> <span class=\"token punctuation\">(<\/span>dx <span class=\"token operator\">\/<\/span> distance<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> velocity<span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>enemy<span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#043;&#061;<\/span> <span class=\"token punctuation\">(<\/span>dy <span class=\"token operator\">\/<\/span> distance<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> velocity<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>2.3 \u9053\u5177\u4e0e\u6280\u80fd\u7cfb\u7edf\u5b9e\u73b0<\/h4>\n<h5>2.3.1 \u9053\u5177\u7cfb\u7edf<\/h5>\n<p>\u591a\u6837\u5316\u7684\u9053\u5177\u4e3a\u6e38\u620f\u589e\u52a0\u4e86\u7b56\u7565\u6027\u548c\u8da3\u5473\u6027&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u9053\u5177\u57fa\u7c7b<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">PowerUp<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">x<span class=\"token punctuation\">,<\/span> y<span class=\"token punctuation\">,<\/span> type<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#061;<\/span> x<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#061;<\/span> y<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>type <span class=\"token operator\">&#061;<\/span> type<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">25<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">25<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>collected <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>bobOffset <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token constant\">PI<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u6d6e\u52a8\u52a8\u753b\u504f\u79fb<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u66f4\u65b0\u9053\u5177\u72b6\u6001&#xff08;\u5305\u62ec\u52a8\u753b\u6548\u679c&#xff09;<\/span><br \/>\n    <span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">deltaTime<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>bobOffset <span class=\"token operator\">&#043;&#061;<\/span> <span class=\"token number\">0.05<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u6d6e\u52a8\u52a8\u753b\u901f\u5ea6<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u68c0\u6d4b\u4e0e\u73a9\u5bb6\u7684\u78b0\u649e<\/span><br \/>\n    <span class=\"token function\">checkCollision<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">player<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>collected<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">const<\/span> dx <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span>player<span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#043;<\/span> player<span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#8211;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#043;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> dy <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span>player<span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#043;<\/span> player<span class=\"token punctuation\">.<\/span>height<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#8211;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#043;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>height<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> distance <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">sqrt<\/span><span class=\"token punctuation\">(<\/span>dx <span class=\"token operator\">*<\/span> dx <span class=\"token operator\">&#043;<\/span> dy <span class=\"token operator\">*<\/span> dy<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">return<\/span> distance <span class=\"token operator\">&lt;<\/span> <span class=\"token punctuation\">(<\/span>player<span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span> <span class=\"token operator\">&#043;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u88ab\u73a9\u5bb6\u6536\u96c6\u65f6\u7684\u5904\u7406<\/span><br \/>\n    <span class=\"token function\">collect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">player<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>collected<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>collected <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">applyEffect<\/span><span class=\"token punctuation\">(<\/span>player<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u521b\u5efa\u6536\u96c6\u7279\u6548<\/span><br \/>\n        game<span class=\"token punctuation\">.<\/span><span class=\"token function\">createCollectEffect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>type<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u5e94\u7528\u9053\u5177\u6548\u679c\u5230\u73a9\u5bb6<\/span><br \/>\n    <span class=\"token function\">applyEffect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">player<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">switch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>type<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">case<\/span> <span class=\"token string\">&#039;rocket&#039;<\/span><span class=\"token operator\">:<\/span><br \/>\n                player<span class=\"token punctuation\">.<\/span><span class=\"token function\">applyBuff<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">new<\/span> <span class=\"token class-name\">SpeedBuff<\/span><span class=\"token punctuation\">(<\/span>player<span class=\"token punctuation\">,<\/span> <span class=\"token number\">3000<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1.5<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">case<\/span> <span class=\"token string\">&#039;toilet_paper&#039;<\/span><span class=\"token operator\">:<\/span><br \/>\n                player<span class=\"token punctuation\">.<\/span><span class=\"token function\">applyBuff<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">new<\/span> <span class=\"token class-name\">ShieldBuff<\/span><span class=\"token punctuation\">(<\/span>player<span class=\"token punctuation\">,<\/span> <span class=\"token number\">5000<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">case<\/span> <span class=\"token string\">&#039;fart_cloud&#039;<\/span><span class=\"token operator\">:<\/span><br \/>\n                player<span class=\"token punctuation\">.<\/span><span class=\"token function\">applyBuff<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">new<\/span> <span class=\"token class-name\">SlowEnemiesBuff<\/span><span class=\"token punctuation\">(<\/span>player<span class=\"token punctuation\">,<\/span> <span class=\"token number\">4000<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">case<\/span> <span class=\"token string\">&#039;magnet&#039;<\/span><span class=\"token operator\">:<\/span><br \/>\n                player<span class=\"token punctuation\">.<\/span><span class=\"token function\">applyBuff<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">new<\/span> <span class=\"token class-name\">MagnetBuff<\/span><span class=\"token punctuation\">(<\/span>player<span class=\"token punctuation\">,<\/span> <span class=\"token number\">6000<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u6e32\u67d3\u9053\u5177<\/span><br \/>\n    <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">ctx<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>collected<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">const<\/span> bobY <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#043;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">sin<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>bobOffset<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">3<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u6d6e\u52a8\u6548\u679c<\/span><\/p>\n<p>        ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">save<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u7ed8\u5236\u9053\u5177\u4e3b\u4f53<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">renderPowerUpBody<\/span><span class=\"token punctuation\">(<\/span>ctx<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u7ed8\u5236\u5149\u6548<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">renderGlowEffect<\/span><span class=\"token punctuation\">(<\/span>ctx<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">restore<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u706b\u7bad\u52a0\u901f\u9053\u5177 &#8211; \u63d0\u9ad8\u79fb\u52a8\u901f\u5ea6<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">RocketPowerUp<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">PowerUp<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">x<span class=\"token punctuation\">,<\/span> y<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">super<\/span><span class=\"token punctuation\">(<\/span>x<span class=\"token punctuation\">,<\/span> y<span class=\"token punctuation\">,<\/span> <span class=\"token string\">&#039;rocket&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">renderPowerUpBody<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">ctx<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u7ed8\u5236\u706b\u7bad\u5f62\u72b6<\/span><br \/>\n        ctx<span class=\"token punctuation\">.<\/span>fillStyle <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;#FF4500&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">fillRect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u7ed8\u5236\u706b\u7bad\u7ec6\u8282<\/span><br \/>\n        ctx<span class=\"token punctuation\">.<\/span>fillStyle <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;#FFD700&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">fillRect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">5<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">5<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">15<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u706b\u7bad\u5934\u90e8<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u7ed8\u5236\u63a8\u8fdb\u5668\u6548\u679c<\/span><br \/>\n        ctx<span class=\"token punctuation\">.<\/span>fillStyle <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;#FF6347&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">fillRect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">8<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#043;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">,<\/span> <span class=\"token number\">9<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">8<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u5395\u7eb8\u62a4\u76fe\u9053\u5177 &#8211; \u4e34\u65f6\u65e0\u654c\/\u51cf\u4f24<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">ToiletPaperPowerUp<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">PowerUp<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">x<span class=\"token punctuation\">,<\/span> y<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">super<\/span><span class=\"token punctuation\">(<\/span>x<span class=\"token punctuation\">,<\/span> y<span class=\"token punctuation\">,<\/span> <span class=\"token string\">&#039;toilet_paper&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">renderPowerUpBody<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">ctx<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u7ed8\u5236\u5395\u7eb8\u5377\u5f62\u72b6<\/span><br \/>\n        ctx<span class=\"token punctuation\">.<\/span>fillStyle <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;#FFFFFF&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">fillRect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u7ed8\u5236\u5395\u7eb8\u7eb9\u7406<\/span><br \/>\n        ctx<span class=\"token punctuation\">.<\/span>strokeStyle <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;#F0F0F0&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> <span class=\"token number\">3<\/span><span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">beginPath<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">moveTo<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">5<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">5<\/span> <span class=\"token operator\">&#043;<\/span> i <span class=\"token operator\">*<\/span> <span class=\"token number\">6<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">lineTo<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#043;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">5<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">5<\/span> <span class=\"token operator\">&#043;<\/span> i <span class=\"token operator\">*<\/span> <span class=\"token number\">6<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">stroke<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h5>2.3.2 \u6280\u80fd\u7cfb\u7edf<\/h5>\n<p>\u6280\u80fd\u7cfb\u7edf\u4e3a\u73a9\u5bb6\u63d0\u4f9b\u4e86\u5bf9\u6297\u654c\u4eba\u7684\u4e3b\u52a8\u624b\u6bb5&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u6280\u80fd\u57fa\u7c7b<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Skill<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">player<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>player <span class=\"token operator\">&#061;<\/span> player<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>cooldown <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>maxCooldown <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>lastUsed <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u68c0\u67e5\u6280\u80fd\u662f\u5426\u53ef\u7528<\/span><br \/>\n    <span class=\"token function\">isReady<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>cooldown <span class=\"token operator\">&lt;&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u66f4\u65b0\u6280\u80fd\u51b7\u5374\u72b6\u6001<\/span><br \/>\n    <span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">deltaTime<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>cooldown <span class=\"token operator\">&gt;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>cooldown <span class=\"token operator\">-&#061;<\/span> deltaTime<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u4f7f\u7528\u6280\u80fd<\/span><br \/>\n    <span class=\"token function\">activate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">targetX<span class=\"token punctuation\">,<\/span> targetY<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">isReady<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>lastUsed <span class=\"token operator\">&#061;<\/span> Date<span class=\"token punctuation\">.<\/span><span class=\"token function\">now<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>cooldown <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>maxCooldown<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">execute<\/span><span class=\"token punctuation\">(<\/span>targetX<span class=\"token punctuation\">,<\/span> targetY<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u6267\u884c\u6280\u80fd\u6548\u679c&#xff08;\u7531\u5b50\u7c7b\u5b9e\u73b0&#xff09;<\/span><br \/>\n    <span class=\"token function\">execute<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">targetX<span class=\"token punctuation\">,<\/span> targetY<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u57fa\u7840\u5b9e\u73b0&#xff0c;\u5b50\u7c7b\u91cd\u5199<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u666e\u901a\u6295\u63b7\u6280\u80fd &#8211; \u671d\u6307\u5b9a\u65b9\u5411\u53d1\u5c04\u653b\u51fb<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">NormalAttack<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Skill<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">player<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">super<\/span><span class=\"token punctuation\">(<\/span>player<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>maxCooldown <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">500<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ 0.5\u79d2\u51b7\u5374<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>projectileSpeed <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">300<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>damage <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">15<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">execute<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">targetX<span class=\"token punctuation\">,<\/span> targetY<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> direction <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getDirection<\/span><span class=\"token punctuation\">(<\/span>targetX<span class=\"token punctuation\">,<\/span> targetY<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> projectile <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Projectile<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>player<span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#043;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>player<span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>player<span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#043;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>player<span class=\"token punctuation\">.<\/span>height<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            direction<span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">*<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>projectileSpeed<span class=\"token punctuation\">,<\/span><br \/>\n            direction<span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">*<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>projectileSpeed<span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>damage<span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token string\">&#039;normal&#039;<\/span><br \/>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        game<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEntity<\/span><span class=\"token punctuation\">(<\/span>projectile<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">getDirection<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">targetX<span class=\"token punctuation\">,<\/span> targetY<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> dx <span class=\"token operator\">&#061;<\/span> targetX <span class=\"token operator\">&#8211;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>player<span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#043;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>player<span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> dy <span class=\"token operator\">&#061;<\/span> targetY <span class=\"token operator\">&#8211;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>player<span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#043;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>player<span class=\"token punctuation\">.<\/span>height<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> distance <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">sqrt<\/span><span class=\"token punctuation\">(<\/span>dx <span class=\"token operator\">*<\/span> dx <span class=\"token operator\">&#043;<\/span> dy <span class=\"token operator\">*<\/span> dy<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>distance <span class=\"token operator\">&#061;&#061;&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token comment\">\/\/ \u5982\u679c\u6ca1\u6709\u6307\u5b9a\u76ee\u6807&#xff0c;\u671d\u53f3\u65b9\u53d1\u5c04<\/span><br \/>\n            <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token literal-property property\">x<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token literal-property property\">y<\/span><span class=\"token operator\">:<\/span> <span class=\"token number\">0<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token literal-property property\">x<\/span><span class=\"token operator\">:<\/span> dx <span class=\"token operator\">\/<\/span> distance<span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token literal-property property\">y<\/span><span class=\"token operator\">:<\/span> dy <span class=\"token operator\">\/<\/span> distance<br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">ctx<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u7ed8\u5236\u6280\u80fd\u51b7\u5374\u6307\u793a\u5668<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">isReady<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">renderCooldownIndicator<\/span><span class=\"token punctuation\">(<\/span>ctx<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u7fa4\u4f53\u6280\u80fd &#8211; \u91ca\u653e\u591a\u4e2a\u8ffd\u8e2a\u4fbf\u4fbf\u5f39<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">AreaAttack<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Skill<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">player<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">super<\/span><span class=\"token punctuation\">(<\/span>player<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>maxCooldown <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">3000<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ 3\u79d2\u51b7\u5374<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>projectileCount <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">5<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>projectileSpeed <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">200<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>damage <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">execute<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">targetX<span class=\"token punctuation\">,<\/span> targetY<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> centerX <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>player<span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#043;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>player<span class=\"token punctuation\">.<\/span>width<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> centerY <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>player<span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#043;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>player<span class=\"token punctuation\">.<\/span>height<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u521b\u5efa\u591a\u4e2a\u8ffd\u8e2a\u5f39&#xff0c;\u56f4\u7ed5\u4e2d\u5fc3\u70b9\u5206\u5e03<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>projectileCount<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> angle <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token constant\">PI<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">2<\/span> <span class=\"token operator\">\/<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>projectileCount<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> i<span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> spreadAngle <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token constant\">PI<\/span> <span class=\"token operator\">\/<\/span> <span class=\"token number\">3<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ 60\u5ea6\u6269\u6563\u89d2<\/span><\/p>\n<p>            <span class=\"token keyword\">let<\/span> finalAngle <span class=\"token operator\">&#061;<\/span> angle<span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>targetX <span class=\"token operator\">&amp;&amp;<\/span> targetY<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                <span class=\"token comment\">\/\/ \u5982\u679c\u6709\u76ee\u6807&#xff0c;\u6dfb\u52a0\u8ffd\u8e2a\u6548\u679c<\/span><br \/>\n                <span class=\"token keyword\">const<\/span> targetDx <span class=\"token operator\">&#061;<\/span> targetX <span class=\"token operator\">&#8211;<\/span> centerX<span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token keyword\">const<\/span> targetDy <span class=\"token operator\">&#061;<\/span> targetY <span class=\"token operator\">&#8211;<\/span> centerY<span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token keyword\">const<\/span> targetAngle <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">atan2<\/span><span class=\"token punctuation\">(<\/span>targetDy<span class=\"token punctuation\">,<\/span> targetDx<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                finalAngle <span class=\"token operator\">&#061;<\/span> angle <span class=\"token operator\">&#043;<\/span> <span class=\"token punctuation\">(<\/span>targetAngle <span class=\"token operator\">&#8211;<\/span> angle<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">0.5<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><\/p>\n<p>            <span class=\"token keyword\">const<\/span> projectile <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">HomingProjectile<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                centerX<span class=\"token punctuation\">,<\/span><br \/>\n                centerY<span class=\"token punctuation\">,<\/span><br \/>\n                Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">cos<\/span><span class=\"token punctuation\">(<\/span>finalAngle<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>projectileSpeed<span class=\"token punctuation\">,<\/span><br \/>\n                Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">sin<\/span><span class=\"token punctuation\">(<\/span>finalAngle<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>projectileSpeed<span class=\"token punctuation\">,<\/span><br \/>\n                <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>damage<span class=\"token punctuation\">,<\/span><br \/>\n                <span class=\"token string\">&#039;area&#039;<\/span><br \/>\n            <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            game<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEntity<\/span><span class=\"token punctuation\">(<\/span>projectile<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h3>\u4e09\u3001\u6e38\u620f\u5f00\u53d1\u6d41\u7a0b\u4e0eCodeBuddy\u5b9e\u8df5<\/h3>\n<h4>3.1 \u5f00\u53d1\u6d41\u7a0b\u8bbe\u8ba1<\/h4>\n<p>\u57fa\u4e8eCodeBuddy\u5e73\u53f0&#xff0c;&#034;\u70ab\u9177\u5927\u4fbf\u8d85\u4eba&#034;\u91c7\u7528\u654f\u6377\u5f00\u53d1\u65b9\u6cd5\u8bba&#xff0c;\u5c06\u5f00\u53d1\u8fc7\u7a0b\u5206\u4e3a\u591a\u4e2a\u8fed\u4ee3\u5468\u671f&#xff1a;<\/p>\n<p>\u9636\u6bb5\u4e00&#xff1a;\u57fa\u7840\u6846\u67b6\u642d\u5efa&#xff08;\u8fed\u4ee31-2&#xff09;<\/p>\n<ul>\n<li>\u73af\u5883\u914d\u7f6e&#xff1a;\u5728CodeBuddy\u4e2d\u521b\u5efa\u9879\u76ee&#xff0c;\u914d\u7f6eHTML5 Canvas\u548cJavaScript\u5f00\u53d1\u73af\u5883<\/li>\n<li>\u6838\u5fc3\u5f15\u64ce&#xff1a;\u5b9e\u73b0\u6e38\u620f\u4e3b\u5faa\u73af\u3001\u6e32\u67d3\u7cfb\u7edf\u548c\u57fa\u672c\u8f93\u5165\u5904\u7406<\/li>\n<li>Canvas\u57fa\u7840&#xff1a;\u5efa\u7acb\u6e38\u620f\u753b\u5e03&#xff0c;\u5b9e\u73b0\u57fa\u672c\u7684\u7ed8\u5236\u529f\u80fd<\/li>\n<\/ul>\n<p>\u9636\u6bb5\u4e8c&#xff1a;\u6e38\u620f\u673a\u5236\u5b9e\u73b0&#xff08;\u8fed\u4ee33-5&#xff09;<\/p>\n<ul>\n<li>\u89d2\u8272\u7cfb\u7edf&#xff1a;\u5f00\u53d1\u73a9\u5bb6\u89d2\u8272\u548c\u57fa\u7840\u79fb\u52a8\u63a7\u5236<\/li>\n<li>\u654c\u4ebaAI&#xff1a;\u5b9e\u73b0\u591a\u79cd\u654c\u4eba\u884c\u4e3a\u6a21\u5f0f<\/li>\n<li>\u78b0\u649e\u68c0\u6d4b&#xff1a;\u6784\u5efa\u9ad8\u6548\u7684\u78b0\u649e\u68c0\u6d4b\u7cfb\u7edf<\/li>\n<li>\u6e38\u620f\u72b6\u6001&#xff1a;\u5b9e\u73b0\u5206\u6570\u7cfb\u7edf\u3001\u751f\u547d\u503c\u548c\u6e38\u620f\u7ed3\u675f\u903b\u8f91<\/li>\n<\/ul>\n<p>\u9636\u6bb5\u4e09&#xff1a;\u9053\u5177\u4e0e\u6280\u80fd\u7cfb\u7edf&#xff08;\u8fed\u4ee36-8&#xff09;<\/p>\n<ul>\n<li>\u9053\u5177\u7cfb\u7edf&#xff1a;\u5f00\u53d1\u591a\u6837\u5316\u7684\u9053\u5177\u7c7b\u578b\u548c\u6548\u679c<\/li>\n<li>\u6280\u80fd\u7cfb\u7edf&#xff1a;\u5b9e\u73b0\u666e\u901a\u653b\u51fb\u548c\u7fa4\u4f53\u6280\u80fd<\/li>\n<li>\u89c6\u89c9\u6548\u679c&#xff1a;\u6dfb\u52a0\u7c92\u5b50\u6548\u679c\u548c\u52a8\u753b<\/li>\n<\/ul>\n<p>\u9636\u6bb5\u56db&#xff1a;\u4f18\u5316\u4e0e\u53d1\u5e03&#xff08;\u8fed\u4ee39-10&#xff09;<\/p>\n<ul>\n<li>\u6027\u80fd\u4f18\u5316&#xff1a;\u4f18\u5316\u6e38\u620f\u5faa\u73af\u548c\u6e32\u67d3\u6027\u80fd<\/li>\n<li>\u54cd\u5e94\u5f0f\u8bbe\u8ba1&#xff1a;\u9002\u914d\u79fb\u52a8\u8bbe\u5907\u548c\u4e0d\u540c\u5c4f\u5e55\u5c3a\u5bf8<\/li>\n<li>\u6d4b\u8bd5\u4e0e\u8c03\u8bd5&#xff1a;\u5168\u9762\u6d4b\u8bd5\u6e38\u620f\u529f\u80fd\u548c\u6027\u80fd<\/li>\n<li>\u53d1\u5e03\u90e8\u7f72&#xff1a;\u901a\u8fc7CodeBuddy\u751f\u6210\u53ef\u5206\u4eab\u94fe\u63a5<\/li>\n<\/ul>\n<h4>3.2 CodeBuddy\u5b9e\u8df5\u4f18\u52bf<\/h4>\n<h5>3.2.1 \u5b9e\u65f6\u534f\u4f5c\u4e0e\u7248\u672c\u63a7\u5236<\/h5>\n<p>CodeBuddy\u7684\u534f\u4f5c\u529f\u80fd\u6781\u5927\u5730\u63d0\u5347\u4e86\u56e2\u961f\u5f00\u53d1\u6548\u7387&#xff1a;<\/p>\n<p>#mermaid-svg-U1iFTXQAkZ0L91GS {font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-U1iFTXQAkZ0L91GS .error-icon{fill:#552222;}#mermaid-svg-U1iFTXQAkZ0L91GS .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-U1iFTXQAkZ0L91GS .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-U1iFTXQAkZ0L91GS .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-U1iFTXQAkZ0L91GS .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-U1iFTXQAkZ0L91GS .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-U1iFTXQAkZ0L91GS .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-U1iFTXQAkZ0L91GS .marker{fill:#333333;stroke:#333333;}#mermaid-svg-U1iFTXQAkZ0L91GS .marker.cross{stroke:#333333;}#mermaid-svg-U1iFTXQAkZ0L91GS svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-U1iFTXQAkZ0L91GS .label{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;color:#333;}#mermaid-svg-U1iFTXQAkZ0L91GS .cluster-label text{fill:#333;}#mermaid-svg-U1iFTXQAkZ0L91GS .cluster-label span{color:#333;}#mermaid-svg-U1iFTXQAkZ0L91GS .label text,#mermaid-svg-U1iFTXQAkZ0L91GS span{fill:#333;color:#333;}#mermaid-svg-U1iFTXQAkZ0L91GS .node rect,#mermaid-svg-U1iFTXQAkZ0L91GS .node circle,#mermaid-svg-U1iFTXQAkZ0L91GS .node ellipse,#mermaid-svg-U1iFTXQAkZ0L91GS .node polygon,#mermaid-svg-U1iFTXQAkZ0L91GS .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-U1iFTXQAkZ0L91GS .node .label{text-align:center;}#mermaid-svg-U1iFTXQAkZ0L91GS .node.clickable{cursor:pointer;}#mermaid-svg-U1iFTXQAkZ0L91GS .arrowheadPath{fill:#333333;}#mermaid-svg-U1iFTXQAkZ0L91GS .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-U1iFTXQAkZ0L91GS .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-U1iFTXQAkZ0L91GS .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-U1iFTXQAkZ0L91GS .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-U1iFTXQAkZ0L91GS .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-U1iFTXQAkZ0L91GS .cluster text{fill:#333;}#mermaid-svg-U1iFTXQAkZ0L91GS .cluster span{color:#333;}#mermaid-svg-U1iFTXQAkZ0L91GS div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-U1iFTXQAkZ0L91GS :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}<span id=\"L-L-A-B\" class=\"edgeLabel L-LS-A&#039; L-LE-B\">\u5b9e\u65f6\u7f16\u8f91<\/span><span id=\"L-L-C-B\" class=\"edgeLabel L-LS-C&#039; L-LE-B\">\u5b9e\u65f6\u7f16\u8f91<\/span><span id=\"L-L-B-D\" class=\"edgeLabel L-LS-B&#039; L-LE-D\"><\/span><span id=\"L-L-B-E\" class=\"edgeLabel L-LS-B&#039; L-LE-E\"><\/span><span id=\"L-L-D-F\" class=\"edgeLabel L-LS-D&#039; L-LE-F\"><\/span><span id=\"L-L-E-G\" class=\"edgeLabel L-LS-E&#039; L-LE-G\"><\/span>\u5f00\u53d1\u8005A\u4ee3\u7801\u5e93\u5f00\u53d1\u8005B\u7248\u672c\u5386\u53f2\u51b2\u7a81\u89e3\u51b3\u4ee3\u7801\u56de\u6eda\u5408\u5e76\u7ba1\u7406<\/p>\n<p>\u5b9e\u8df5\u6848\u4f8b&#xff1a;<\/p>\n<ul>\n<li>\u591a\u4eba\u540c\u65f6\u5f00\u53d1&#xff1a;\u7f8e\u672f\u8bbe\u8ba1\u5e08\u548c\u7a0b\u5e8f\u5458\u53ef\u540c\u65f6\u7f16\u8f91\u4e0d\u540c\u6587\u4ef6&#xff0c;\u5b9e\u65f6\u67e5\u770b\u5f7c\u6b64\u7684\u4fee\u6539<\/li>\n<li>\u7248\u672c\u63a7\u5236\u96c6\u6210&#xff1a;\u81ea\u52a8\u4fdd\u5b58\u4ee3\u7801\u5386\u53f2&#xff0c;\u652f\u6301\u529f\u80fd\u5206\u652f\u5f00\u53d1\u548c\u4ee3\u7801\u5ba1\u67e5<\/li>\n<li>\u5373\u65f6\u53cd\u9988&#xff1a;\u56e2\u961f\u6210\u5458\u53ef\u7acb\u5373\u770b\u5230\u4ed6\u4eba\u7684\u4ee3\u7801\u53d8\u66f4&#xff0c;\u52a0\u901f\u51b3\u7b56\u8fc7\u7a0b<\/li>\n<\/ul>\n<h5>3.2.2 \u6027\u80fd\u76d1\u63a7\u4e0e\u8c03\u8bd5<\/h5>\n<p>CodeBuddy\u5185\u7f6e\u7684\u6027\u80fd\u5de5\u5177\u5e2e\u52a9\u5f00\u53d1\u8005\u4f18\u5316\u6e38\u620f\u4f53\u9a8c&#xff1a;<\/p>\n<p>#mermaid-svg-M9ugmVgBOpFJW9h6 {font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-M9ugmVgBOpFJW9h6 .error-icon{fill:#552222;}#mermaid-svg-M9ugmVgBOpFJW9h6 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-M9ugmVgBOpFJW9h6 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-M9ugmVgBOpFJW9h6 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-M9ugmVgBOpFJW9h6 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-M9ugmVgBOpFJW9h6 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-M9ugmVgBOpFJW9h6 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-M9ugmVgBOpFJW9h6 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-M9ugmVgBOpFJW9h6 .marker.cross{stroke:#333333;}#mermaid-svg-M9ugmVgBOpFJW9h6 svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-M9ugmVgBOpFJW9h6 .pieCircle{stroke:black;stroke-width:2px;opacity:0.7;}#mermaid-svg-M9ugmVgBOpFJW9h6 .pieTitleText{text-anchor:middle;font-size:25px;fill:black;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}#mermaid-svg-M9ugmVgBOpFJW9h6 .slice{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;fill:#333;font-size:17px;}#mermaid-svg-M9ugmVgBOpFJW9h6 .legend text{fill:black;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:17px;}#mermaid-svg-M9ugmVgBOpFJW9h6 :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}45%20%25%10%\u6e38\u620f\u6027\u80fd\u74f6\u9888\u5206\u5e03\u6e32\u67d3\u6027\u80fd\u5185\u5b58\u4f7f\u7528\u78b0\u649e\u68c0\u6d4b\u5176\u4ed6<\/p>\n<p>\u4f18\u5316\u5b9e\u8df5&#xff1a;<\/p>\n<ul>\n<li>\u5e27\u7387\u76d1\u63a7&#xff1a;\u5b9e\u65f6\u663e\u793a\u6e38\u620f\u5e27\u7387&#xff0c;\u786e\u4fdd\u7a33\u5b9a\u768460FPS\u4f53\u9a8c<\/li>\n<li>\u5185\u5b58\u5206\u6790&#xff1a;\u8ffd\u8e2a\u5185\u5b58\u4f7f\u7528\u60c5\u51b5&#xff0c;\u9632\u6b62\u5185\u5b58\u6cc4\u6f0f<\/li>\n<li>CPU\u5206\u6790&#xff1a;\u8bc6\u522b\u6027\u80fd\u70ed\u70b9&#xff0c;\u4f18\u5316\u5173\u952e\u7b97\u6cd5<\/li>\n<\/ul>\n<h5>3.2.3 \u8de8\u5e73\u53f0\u6d4b\u8bd5<\/h5>\n<p>CodeBuddy\u7684\u4e91\u7aef\u73af\u5883\u652f\u6301\u591a\u8bbe\u5907\u6d4b\u8bd5&#xff1a;<\/p>\n<p>#mermaid-svg-uQjU8v012XJ5lU1D {font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-uQjU8v012XJ5lU1D .error-icon{fill:#552222;}#mermaid-svg-uQjU8v012XJ5lU1D .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-uQjU8v012XJ5lU1D .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-uQjU8v012XJ5lU1D .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-uQjU8v012XJ5lU1D .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-uQjU8v012XJ5lU1D .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-uQjU8v012XJ5lU1D .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-uQjU8v012XJ5lU1D .marker{fill:#333333;stroke:#333333;}#mermaid-svg-uQjU8v012XJ5lU1D .marker.cross{stroke:#333333;}#mermaid-svg-uQjU8v012XJ5lU1D svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-uQjU8v012XJ5lU1D .label{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;color:#333;}#mermaid-svg-uQjU8v012XJ5lU1D .cluster-label text{fill:#333;}#mermaid-svg-uQjU8v012XJ5lU1D .cluster-label span{color:#333;}#mermaid-svg-uQjU8v012XJ5lU1D .label text,#mermaid-svg-uQjU8v012XJ5lU1D span{fill:#333;color:#333;}#mermaid-svg-uQjU8v012XJ5lU1D .node rect,#mermaid-svg-uQjU8v012XJ5lU1D .node circle,#mermaid-svg-uQjU8v012XJ5lU1D .node ellipse,#mermaid-svg-uQjU8v012XJ5lU1D .node polygon,#mermaid-svg-uQjU8v012XJ5lU1D .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-uQjU8v012XJ5lU1D .node .label{text-align:center;}#mermaid-svg-uQjU8v012XJ5lU1D .node.clickable{cursor:pointer;}#mermaid-svg-uQjU8v012XJ5lU1D .arrowheadPath{fill:#333333;}#mermaid-svg-uQjU8v012XJ5lU1D .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-uQjU8v012XJ5lU1D .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-uQjU8v012XJ5lU1D .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-uQjU8v012XJ5lU1D .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-uQjU8v012XJ5lU1D .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-uQjU8v012XJ5lU1D .cluster text{fill:#333;}#mermaid-svg-uQjU8v012XJ5lU1D .cluster span{color:#333;}#mermaid-svg-uQjU8v012XJ5lU1D div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-uQjU8v012XJ5lU1D :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}<span id=\"L-L-A-B\" class=\"edgeLabel L-LS-A&#039; L-LE-B\">\u81ea\u52a8\u540c\u6b65<\/span><span id=\"L-L-A-C\" class=\"edgeLabel L-LS-A&#039; L-LE-C\">\u81ea\u52a8\u540c\u6b65<\/span><span id=\"L-L-A-D\" class=\"edgeLabel L-LS-A&#039; L-LE-D\">\u81ea\u52a8\u540c\u6b65<\/span><span id=\"L-L-B-E\" class=\"edgeLabel L-LS-B&#039; L-LE-E\"><\/span><span id=\"L-L-C-E\" class=\"edgeLabel L-LS-C&#039; L-LE-E\"><\/span><span id=\"L-L-D-E\" class=\"edgeLabel L-LS-D&#039; L-LE-E\"><\/span>\u5f00\u53d1\u73af\u5883PC\u6a21\u62df\u5668\u79fb\u52a8\u8bbe\u5907\u6a21\u62df\u5668\u5e73\u677f\u6a21\u62df\u5668\u54cd\u5e94\u5f0f\u6d4b\u8bd5<\/p>\n<p>\u6d4b\u8bd5\u7b56\u7565&#xff1a;<\/p>\n<ul>\n<li>\u8bbe\u5907\u9002\u914d&#xff1a;\u81ea\u52a8\u6d4b\u8bd5\u4e0d\u540c\u5c4f\u5e55\u5c3a\u5bf8\u548c\u5206\u8fa8\u7387\u4e0b\u7684\u663e\u793a\u6548\u679c<\/li>\n<li>\u8f93\u5165\u65b9\u5f0f&#xff1a;\u9a8c\u8bc1\u952e\u76d8\u548c\u89e6\u5c4f\u64cd\u4f5c\u7684\u517c\u5bb9\u6027<\/li>\n<li>\u6027\u80fd\u4e00\u81f4\u6027&#xff1a;\u786e\u4fdd\u5728\u5404\u79cd\u8bbe\u5907\u4e0a\u7684\u4e00\u81f4\u6e38\u620f\u4f53\u9a8c<\/li>\n<\/ul>\n<h3>\u56db\u3001\u6280\u672f\u4eae\u70b9\u4e0e\u521b\u65b0\u5b9e\u8df5<\/h3>\n<h4>4.1 \u9ad8\u6548\u6e38\u620f\u5faa\u73af\u5b9e\u73b0<\/h4>\n<p>\u57fa\u4e8eCodeBuddy\u5e73\u53f0\u7684\u5f3a\u5927\u8ba1\u7b97\u80fd\u529b&#xff0c;\u6e38\u620f\u5b9e\u73b0\u4e86\u4f18\u5316\u7684\u6e38\u620f\u5faa\u73af\u673a\u5236&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u57fa\u4e8e\u65f6\u95f4\u7684\u6e38\u620f\u5faa\u73af &#8211; \u786e\u4fdd\u4e0d\u540c\u8bbe\u5907\u4e0a\u7684\u4e00\u81f4\u6027<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">OptimizedGameLoop<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>lastFrameTime <span class=\"token operator\">&#061;<\/span> performance<span class=\"token punctuation\">.<\/span><span class=\"token function\">now<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>accumulator <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>timestep <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">1000<\/span> <span class=\"token operator\">\/<\/span> <span class=\"token number\">60<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u76ee\u680760FPS<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>maxFrameTime <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">250<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u9632\u6b62&#034;\u6b7b\u4ea1\u87ba\u65cb&#034;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u4e3b\u5faa\u73af\u51fd\u6570<\/span><br \/>\n    <span class=\"token function\">loop<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">currentTime<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u8ba1\u7b97deltaTime\u5e76\u9650\u5236\u6700\u5927\u503c<\/span><br \/>\n        <span class=\"token keyword\">let<\/span> deltaTime <span class=\"token operator\">&#061;<\/span> currentTime <span class=\"token operator\">&#8211;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>lastFrameTime<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>lastFrameTime <span class=\"token operator\">&#061;<\/span> currentTime<span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u9632\u6b62\u5927\u7684\u65f6\u95f4\u8df3\u8dc3\u5bfc\u81f4\u6e38\u620f\u4e0d\u7a33\u5b9a<\/span><br \/>\n        deltaTime <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">min<\/span><span class=\"token punctuation\">(<\/span>deltaTime<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>maxFrameTime<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u7d2f\u79ef\u65f6\u95f4\u7528\u4e8e\u56fa\u5b9a\u6b65\u957f\u66f4\u65b0<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>accumulator <span class=\"token operator\">&#043;&#061;<\/span> deltaTime<span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u6e32\u67d3\u5e27&#xff08;\u5373\u4f7f\u6ca1\u6709\u5b8c\u6574\u7684\u65f6\u95f4\u6b65\u957f&#xff09;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u6267\u884c\u56fa\u5b9a\u6b65\u957f\u66f4\u65b0<\/span><br \/>\n        <span class=\"token keyword\">while<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>accumulator <span class=\"token operator\">&gt;&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>timestep<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>timestep<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>accumulator <span class=\"token operator\">-&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>timestep<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u8bf7\u6c42\u4e0b\u4e00\u5e27<\/span><br \/>\n        <span class=\"token function\">requestAnimationFrame<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">time<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">loop<\/span><span class=\"token punctuation\">(<\/span>time<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u56fa\u5b9a\u65f6\u95f4\u6b65\u957f\u66f4\u65b0\u6e38\u620f\u903b\u8f91<\/span><br \/>\n    <span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">deltaTime<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u66f4\u65b0\u6240\u6709\u6e38\u620f\u7cfb\u7edf<\/span><br \/>\n        gameState<span class=\"token punctuation\">.<\/span><span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span>deltaTime<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        physicsEngine<span class=\"token punctuation\">.<\/span><span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span>deltaTime<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        aiSystem<span class=\"token punctuation\">.<\/span><span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span>deltaTime<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u6e32\u67d3\u5f53\u524d\u6e38\u620f\u72b6\u6001<\/span><br \/>\n    <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u6e05\u7a7a\u5e76\u91cd\u7ed8\u6240\u6709\u6e38\u620f\u5143\u7d20<\/span><br \/>\n        renderer<span class=\"token punctuation\">.<\/span><span class=\"token function\">clear<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        renderer<span class=\"token punctuation\">.<\/span><span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span>gameState<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>4.2 \u4f18\u5316\u7684\u78b0\u649e\u68c0\u6d4b\u7b97\u6cd5<\/h4>\n<p>\u6e38\u620f\u91c7\u7528\u4e86\u591a\u5c42\u6b21\u7684\u78b0\u649e\u68c0\u6d4b\u7b56\u7565&#xff0c;\u5e73\u8861\u4e86\u6027\u80fd\u548c\u51c6\u786e\u6027&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u5206\u5c42\u78b0\u649e\u68c0\u6d4b\u7cfb\u7edf<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">CollisionSystem<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>staticColliders <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>dynamicColliders <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>spatialGrid <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">SpatialGrid<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">50<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ 50px\u7f51\u683c\u5927\u5c0f<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u6dfb\u52a0\u78b0\u649e\u4f53\u5230\u7cfb\u7edf<\/span><br \/>\n    <span class=\"token function\">addCollider<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">collider<span class=\"token punctuation\">,<\/span> isDynamic <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">false<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>isDynamic<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>dynamicColliders<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span>collider<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>staticColliders<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span>collider<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>spatialGrid<span class=\"token punctuation\">.<\/span><span class=\"token function\">insert<\/span><span class=\"token punctuation\">(<\/span>collider<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u9ad8\u6548\u7684\u78b0\u649e\u68c0\u6d4b\u66f4\u65b0<\/span><br \/>\n    <span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u6e05\u7a7a\u5e76\u91cd\u5efa\u7a7a\u95f4\u7f51\u683c<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>spatialGrid<span class=\"token punctuation\">.<\/span><span class=\"token function\">clear<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>dynamicColliders<span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">collider<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>spatialGrid<span class=\"token punctuation\">.<\/span><span class=\"token function\">insert<\/span><span class=\"token punctuation\">(<\/span>collider<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u68c0\u6d4b\u52a8\u6001\u78b0\u649e\u4f53\u4e4b\u95f4\u7684\u78b0\u649e<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">detectDynamicCollisions<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u68c0\u6d4b\u52a8\u6001\u4e0e\u9759\u6001\u78b0\u649e\u4f53\u4e4b\u95f4\u7684\u78b0\u649e<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">detectDynamicStaticCollisions<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u52a8\u6001\u78b0\u649e\u4f53\u4e4b\u95f4\u7684\u78b0\u649e\u68c0\u6d4b<\/span><br \/>\n    <span class=\"token function\">detectDynamicCollisions<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>dynamicColliders<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> j <span class=\"token operator\">&#061;<\/span> i <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> j <span class=\"token operator\">&lt;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>dynamicColliders<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">;<\/span> j<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">checkCollision<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>dynamicColliders<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>dynamicColliders<span class=\"token punctuation\">[<\/span>j<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">handleCollision<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>dynamicColliders<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>dynamicColliders<span class=\"token punctuation\">[<\/span>j<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token punctuation\">}<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u52a8\u6001\u4e0e\u9759\u6001\u78b0\u649e\u4f53\u4e4b\u95f4\u7684\u78b0\u649e\u68c0\u6d4b<\/span><br \/>\n    <span class=\"token function\">detectDynamicStaticCollisions<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>dynamicColliders<span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">dynamicCollider<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> nearbyStatics <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>spatialGrid<span class=\"token punctuation\">.<\/span><span class=\"token function\">query<\/span><span class=\"token punctuation\">(<\/span>dynamicCollider<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            nearbyStatics<span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">staticCollider<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>dynamicCollider <span class=\"token operator\">!&#061;&#061;<\/span> staticCollider <span class=\"token operator\">&amp;&amp;<\/span><br \/>\n                    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">checkCollision<\/span><span class=\"token punctuation\">(<\/span>dynamicCollider<span class=\"token punctuation\">,<\/span> staticCollider<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">handleCollision<\/span><span class=\"token punctuation\">(<\/span>dynamicCollider<span class=\"token punctuation\">,<\/span> staticCollider<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token punctuation\">}<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u5706\u5f62\u78b0\u649e\u68c0\u6d4b &#8211; \u9ad8\u6548\u4e14\u9002\u7528\u4e8e\u5927\u591a\u6570\u6e38\u620f\u5bf9\u8c61<\/span><br \/>\n    <span class=\"token function\">checkCollision<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span> b<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> dx <span class=\"token operator\">&#061;<\/span> a<span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#8211;<\/span> b<span class=\"token punctuation\">.<\/span>x<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> dy <span class=\"token operator\">&#061;<\/span> a<span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#8211;<\/span> b<span class=\"token punctuation\">.<\/span>y<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> distance <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">sqrt<\/span><span class=\"token punctuation\">(<\/span>dx <span class=\"token operator\">*<\/span> dx <span class=\"token operator\">&#043;<\/span> dy <span class=\"token operator\">*<\/span> dy<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> distance <span class=\"token operator\">&lt;<\/span> <span class=\"token punctuation\">(<\/span>a<span class=\"token punctuation\">.<\/span>radius <span class=\"token operator\">&#043;<\/span> b<span class=\"token punctuation\">.<\/span>radius<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u7a7a\u95f4\u7f51\u683c\u4f18\u5316 &#8211; \u51cf\u5c11\u4e0d\u5fc5\u8981\u7684\u78b0\u649e\u68c0\u6d4b<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">SpatialGrid<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">cellSize<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>cellSize <span class=\"token operator\">&#061;<\/span> cellSize<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>grid <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u63d2\u5165\u78b0\u649e\u4f53\u5230\u7f51\u683c<\/span><br \/>\n    <span class=\"token function\">insert<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">collider<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> cellX <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">floor<\/span><span class=\"token punctuation\">(<\/span>collider<span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">\/<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>cellSize<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> cellY <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">floor<\/span><span class=\"token punctuation\">(<\/span>collider<span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">\/<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>cellSize<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> key <span class=\"token operator\">&#061;<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>cellX<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">,<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>cellY<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>grid<span class=\"token punctuation\">.<\/span><span class=\"token function\">has<\/span><span class=\"token punctuation\">(<\/span>key<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>grid<span class=\"token punctuation\">.<\/span><span class=\"token function\">set<\/span><span class=\"token punctuation\">(<\/span>key<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>grid<span class=\"token punctuation\">.<\/span><span class=\"token function\">get<\/span><span class=\"token punctuation\">(<\/span>key<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span>collider<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u67e5\u8be2\u6307\u5b9a\u533a\u57df\u5185\u7684\u78b0\u649e\u4f53<\/span><br \/>\n    <span class=\"token function\">query<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">collider<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> results <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> cellX <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">floor<\/span><span class=\"token punctuation\">(<\/span>collider<span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">\/<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>cellSize<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> cellY <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">floor<\/span><span class=\"token punctuation\">(<\/span>collider<span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">\/<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>cellSize<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u68c0\u67e5\u76f8\u90bb\u76849\u4e2a\u7f51\u683c\u5355\u5143<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> dx <span class=\"token operator\">&#061;<\/span> <span class=\"token operator\">&#8211;<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> dx <span class=\"token operator\">&lt;&#061;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> dx<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> dy <span class=\"token operator\">&#061;<\/span> <span class=\"token operator\">&#8211;<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> dy <span class=\"token operator\">&lt;&#061;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> dy<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                <span class=\"token keyword\">const<\/span> key <span class=\"token operator\">&#061;<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>cellX <span class=\"token operator\">&#043;<\/span> dx<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">,<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>cellY <span class=\"token operator\">&#043;<\/span> dy<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>grid<span class=\"token punctuation\">.<\/span><span class=\"token function\">has<\/span><span class=\"token punctuation\">(<\/span>key<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                    results<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">&#8230;<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>grid<span class=\"token punctuation\">.<\/span><span class=\"token function\">get<\/span><span class=\"token punctuation\">(<\/span>key<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token punctuation\">}<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token keyword\">return<\/span> results<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u6e05\u7a7a\u7f51\u683c<\/span><br \/>\n    <span class=\"token function\">clear<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>grid<span class=\"token punctuation\">.<\/span><span class=\"token function\">clear<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>4.3 \u7c92\u5b50\u6548\u679c\u7cfb\u7edf<\/h4>\n<p>\u4e30\u5bcc\u7684\u89c6\u89c9\u6548\u679c\u63d0\u5347\u4e86\u6e38\u620f\u7684\u6c89\u6d78\u611f\u548c\u8da3\u5473\u6027&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u7c92\u5b50\u7cfb\u7edf &#8211; \u521b\u5efa\u5404\u79cd\u89c6\u89c9\u6548\u679c<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">ParticleSystem<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>particles <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>emitters <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u6dfb\u52a0\u7c92\u5b50\u53d1\u5c04\u5668<\/span><br \/>\n    <span class=\"token function\">addEmitter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">emitter<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>emitters<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span>emitter<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u66f4\u65b0\u6240\u6709\u7c92\u5b50\u548c\u53d1\u5c04\u5668<\/span><br \/>\n    <span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">deltaTime<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u66f4\u65b0\u53d1\u5c04\u5668<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>emitters<span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">emitter<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>emitter<span class=\"token punctuation\">.<\/span>active<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                emitter<span class=\"token punctuation\">.<\/span><span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span>deltaTime<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token keyword\">const<\/span> newParticles <span class=\"token operator\">&#061;<\/span> emitter<span class=\"token punctuation\">.<\/span><span class=\"token function\">emit<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>newParticles<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>particles<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">&#8230;<\/span>newParticles<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token punctuation\">}<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u66f4\u65b0\u7c92\u5b50<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>particles<span class=\"token punctuation\">.<\/span>length <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&gt;&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#8212;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> particle <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>particles<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            particle<span class=\"token punctuation\">.<\/span><span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span>deltaTime<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            <span class=\"token comment\">\/\/ \u79fb\u9664\u751f\u547d\u5468\u671f\u7ed3\u675f\u7684\u7c92\u5b50<\/span><br \/>\n            <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>particle<span class=\"token punctuation\">.<\/span><span class=\"token function\">isDead<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>particles<span class=\"token punctuation\">.<\/span><span class=\"token function\">splice<\/span><span class=\"token punctuation\">(<\/span>i<span class=\"token punctuation\">,<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u6e32\u67d3\u6240\u6709\u7c92\u5b50<\/span><br \/>\n    <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">ctx<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>particles<span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">particle<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            particle<span class=\"token punctuation\">.<\/span><span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span>ctx<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u7206\u70b8\u6548\u679c\u53d1\u5c04\u5668<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">ExplosionEmitter<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span>x<span class=\"token punctuation\">,<\/span> y<span class=\"token punctuation\">,<\/span> type <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;normal&#039;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#061;<\/span> x<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#061;<\/span> y<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>type <span class=\"token operator\">&#061;<\/span> type<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>active <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>duration <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">1000<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ 1\u79d2<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>elapsedTime <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>particlesPerEmit <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">8<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">deltaTime<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>elapsedTime <span class=\"token operator\">&#043;&#061;<\/span> deltaTime<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>active <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>elapsedTime <span class=\"token operator\">&lt;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>duration<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">emit<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> particles <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>particlesPerEmit<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            particles<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">createParticle<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> particles<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">createParticle<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> angle <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token constant\">PI<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">2<\/span> <span class=\"token operator\">\/<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>particlesPerEmit<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> speed <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">100<\/span> <span class=\"token operator\">&#043;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">200<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> life <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">500<\/span> <span class=\"token operator\">&#043;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">1000<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Particle<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x<span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y<span class=\"token punctuation\">,<\/span><br \/>\n            Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">cos<\/span><span class=\"token punctuation\">(<\/span>angle<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> speed<span class=\"token punctuation\">,<\/span><br \/>\n            Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">sin<\/span><span class=\"token punctuation\">(<\/span>angle<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> speed<span class=\"token punctuation\">,<\/span><br \/>\n            life<span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">getParticleColor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">getParticleColor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">switch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>type<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">case<\/span> <span class=\"token string\">&#039;explosion&#039;<\/span><span class=\"token operator\">:<\/span><br \/>\n                <span class=\"token keyword\">return<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">hsl(<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">60<\/span> <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">10<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">, 100%, 50%)<\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u6a59\u7ea2\u8272\u7cfb<\/span><br \/>\n            <span class=\"token keyword\">case<\/span> <span class=\"token string\">&#039;magic&#039;<\/span><span class=\"token operator\">:<\/span><br \/>\n                <span class=\"token keyword\">return<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">hsl(<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">60<\/span> <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">240<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">, 100%, 70%)<\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u84dd\u8272\u7cfb<\/span><br \/>\n            <span class=\"token keyword\">default<\/span><span class=\"token operator\">:<\/span><br \/>\n                <span class=\"token keyword\">return<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">hsl(<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">360<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">, 70%, 60%)<\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u968f\u673a\u989c\u8272<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u5355\u4e2a\u7c92\u5b50\u7c7b<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Particle<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">x<span class=\"token punctuation\">,<\/span> y<span class=\"token punctuation\">,<\/span> vx<span class=\"token punctuation\">,<\/span> vy<span class=\"token punctuation\">,<\/span> life<span class=\"token punctuation\">,<\/span> color<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#061;<\/span> x<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#061;<\/span> y<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>vx <span class=\"token operator\">&#061;<\/span> vx<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>vy <span class=\"token operator\">&#061;<\/span> vy<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>life <span class=\"token operator\">&#061;<\/span> life<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>maxLife <span class=\"token operator\">&#061;<\/span> life<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>color <span class=\"token operator\">&#061;<\/span> color<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>size <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">2<\/span> <span class=\"token operator\">&#043;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">4<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>gravity <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">200<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u91cd\u529b\u6548\u679c<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">deltaTime<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u66f4\u65b0\u4f4d\u7f6e<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#043;&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>vx <span class=\"token operator\">*<\/span> <span class=\"token punctuation\">(<\/span>deltaTime <span class=\"token operator\">\/<\/span> <span class=\"token number\">1000<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#043;&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>vy <span class=\"token operator\">*<\/span> <span class=\"token punctuation\">(<\/span>deltaTime <span class=\"token operator\">\/<\/span> <span class=\"token number\">1000<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u5e94\u7528\u91cd\u529b<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>vy <span class=\"token operator\">&#043;&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>gravity <span class=\"token operator\">*<\/span> <span class=\"token punctuation\">(<\/span>deltaTime <span class=\"token operator\">\/<\/span> <span class=\"token number\">1000<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">0.1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u7a7a\u6c14\u963b\u529b<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>vx <span class=\"token operator\">*&#061;<\/span> <span class=\"token number\">0.98<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>vy <span class=\"token operator\">*&#061;<\/span> <span class=\"token number\">0.98<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u66f4\u65b0\u751f\u547d\u5468\u671f<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>life <span class=\"token operator\">-&#061;<\/span> deltaTime<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">ctx<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> alpha <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>life <span class=\"token operator\">\/<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>maxLife<span class=\"token punctuation\">;<\/span><br \/>\n        ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">save<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        ctx<span class=\"token punctuation\">.<\/span>globalAlpha <span class=\"token operator\">&#061;<\/span> alpha<span class=\"token punctuation\">;<\/span><br \/>\n        ctx<span class=\"token punctuation\">.<\/span>fillStyle <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>color<span class=\"token punctuation\">;<\/span><br \/>\n        ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">beginPath<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">arc<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>x<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>y<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>size <span class=\"token operator\">*<\/span> alpha<span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token constant\">PI<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">fill<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">restore<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">isDead<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>life <span class=\"token operator\">&lt;&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>4.4\u6210\u679c\u5c55\u793a<\/h4>\n<p><img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/08\/20250816000612-689fcb7466ad8.png\" alt=\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \/><\/p>\n<ul>\n<li>\u5b9e\u73b0\u4e86\u53ef\u4ee5\u81ea\u5b9a\u4e49\u540d\u5b57\u5934\u50cf\u7b49\u64cd\u4f5c\u3002<\/li>\n<\/ul>\n<p>\u5c40\u5185\u6548\u679c&#xff1a;<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/08\/20250816000613-689fcb7565ac4.png\" alt=\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \/><br \/>\n<img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/08\/20250816000614-689fcb7648519.png\" alt=\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \/><\/p>\n<ul>\n<li>\u6361\u8d77\u4e0d\u540c\u5c0f\u7403\u6709\u4e0d\u540c\u7684\u7279\u6548\u529f\u80fd\u4e00\u4e00\u6e32\u67d3\u3002<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/08\/20250816000615-689fcb773aa24.png\" alt=\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \/><\/p>\n<ul>\n<li>\u79ef\u5206\u8fdb\u5236\u3002<\/li>\n<\/ul>\n<p>\u6574\u4f53\u611f\u53d7&#xff1a;<\/p>\n<li>\u89d2\u8272\u8bbe\u8ba1\u72ec\u7279\u4e14\u5bcc\u6709\u8bb0\u5fc6\u70b9<\/li>\n<ul>\n<li>\u53cd\u5e38\u89c4\u5e7d\u9ed8&#xff1a;\u5c06&#034;\u5927\u4fbf&#034;\u5f62\u8c61\u5851\u9020\u4e3a\u8d85\u7ea7\u82f1\u96c4\u4e3b\u89d2&#xff0c;\u98a0\u8986\u4f20\u7edf\u6e38\u620f\u5ba1\u7f8e&#xff0c;\u5e26\u6765\u5f3a\u70c8\u7684\u89c6\u89c9\u65b0\u9c9c\u611f\u548c\u5e7d\u9ed8\u4f53\u9a8c<\/li>\n<li>\u81ea\u5b9a\u4e49\u5934\u50cf\u7cfb\u7edf&#xff1a;\u652f\u6301URL\u5934\u50cf\u6216\u672c\u5730\u4e0a\u4f20&#xff0c;\u8ba9\u6bcf\u4e2a\u73a9\u5bb6\u80fd\u4e2a\u6027\u5316\u81ea\u5df1\u7684&#034;\u5927\u4fbf\u8d85\u4eba&#034;&#xff0c;\u589e\u5f3a\u89d2\u8272\u5f52\u5c5e\u611f<\/li>\n<li>\u52a8\u6001\u5149\u73af\u6548\u679c&#xff1a;\u6280\u80fd\u91ca\u653e\u65f6\u89d2\u8272\u5468\u56f4\u7684\u91d1\u8272\u5149\u73af\u548c\u62d6\u5c3e\u7279\u6548&#xff0c;\u63d0\u5347\u4e86\u6218\u6597\u65f6\u7684\u89c6\u89c9\u51b2\u51fb\u529b<\/li>\n<\/ul>\n<li>\u8272\u5f69\u642d\u914d\u4e0e\u754c\u9762\u8bbe\u8ba1<\/li>\n<ul>\n<li>\u9ad8\u5bf9\u6bd4\u5ea6\u914d\u8272&#xff1a;\u68d5\u8272\u7cfb\u5927\u4fbf\u89d2\u8272\u4e0e\u9c9c\u8273\u6280\u80fd\u7279\u6548\u5f62\u6210\u9c9c\u660e\u5bf9\u6bd4&#xff0c;\u89c6\u89c9\u5c42\u6b21\u5206\u660e<\/li>\n<li>\u5361\u901a\u6e32\u67d3\u98ce\u683c&#xff1a;\u6574\u4f53\u91c7\u7528\u8f7b\u677e\u8bd9\u8c10\u7684\u5361\u901a\u753b\u98ce&#xff0c;\u964d\u4f4e&#034;\u5927\u4fbf&#034;\u4e3b\u9898\u53ef\u80fd\u5e26\u6765\u7684\u4e0d\u9002\u611f<\/li>\n<li>UI\u7b80\u6d01\u660e\u4e86&#xff1a;\u6e38\u620f\u754c\u9762\u5e03\u5c40\u6e05\u6670&#xff0c;\u8840\u6761\u3001\u5206\u6570\u3001\u6280\u80fd\u51b7\u5374\u7b49\u5173\u952e\u4fe1\u606f\u4e00\u76ee\u4e86\u7136<\/li>\n<\/ul>\n<li>\u52a8\u753b\u4e0e\u7279\u6548\u8868\u73b0<\/li>\n<ul>\n<li>\u7c92\u5b50\u7cfb\u7edf\u4e30\u5bcc&#xff1a;\u6280\u80fd\u91ca\u653e\u3001\u9053\u5177\u6536\u96c6\u3001\u654c\u4eba\u53d7\u4f24\u7b49\u573a\u666f\u5747\u6709\u76f8\u5e94\u7684\u7c92\u5b50\u7279\u6548<\/li>\n<li>\u5c4f\u5e55\u9707\u52a8\u53cd\u9988&#xff1a;\u653b\u51fb\u547d\u4e2d\u6216\u53d7\u5230\u4f24\u5bb3\u65f6\u7684\u5c4f\u5e55\u9707\u52a8\u6548\u679c&#xff0c;\u589e\u5f3a\u4e86\u6218\u6597\u7684\u6253\u51fb\u611f<\/li>\n<li>\u6d41\u7545\u7684\u79fb\u52a8\u52a8\u753b&#xff1a;\u89d2\u8272\u79fb\u52a8\u548c\u8f6c\u5411\u52a8\u753b\u81ea\u7136&#xff0c;\u6ca1\u6709\u660e\u663e\u7684\u5361\u987f\u611f<\/li>\n<\/ul>\n<p>\u6e38\u620f\u673a\u5236\u4f53\u9a8c<\/p>\n<li>\u6838\u5fc3\u73a9\u6cd5\u5faa\u73af<\/li>\n<ul>\n<li>\u7b80\u5355\u6613\u4e0a\u624b&#xff1a;WASD\/\u65b9\u5411\u952e\u79fb\u52a8&#043;\u7a7a\u683c\u91ca\u653e\u6280\u80fd\u7684\u57fa\u7840\u64cd\u4f5c\u51e0\u4e4e\u65e0\u5b66\u4e60\u6210\u672c<\/li>\n<li>\u7b56\u7565\u6df1\u5ea6\u9002\u4e2d&#xff1a;\u901a\u8fc7\u6536\u96c6\u4e0d\u540c\u9053\u5177\u83b7\u5f97\u4e0d\u540c\u80fd\u529b&#xff0c;\u9700\u8981\u73a9\u5bb6\u6839\u636e\u654c\u4eba\u7c7b\u578b\u7075\u6d3b\u8c03\u6574\u7b56\u7565<\/li>\n<li>\u6b63\u5411\u6fc0\u52b1\u5faa\u73af&#xff1a;\u51fb\u8d25\u654c\u4eba\u83b7\u5f97\u5206\u6570\u2192\u63d0\u5347\u6392\u540d\u2192\u89e3\u9501\u66f4\u591a\u9053\u5177\/\u6280\u80fd&#xff0c;\u4fdd\u6301\u6e38\u620f\u52a8\u529b<\/li>\n<\/ul>\n<li>\u654c\u4ebaAI\u4e0e\u6311\u6218\u8bbe\u8ba1<\/li>\n<ul>\n<li>\u591a\u6837\u5316AI\u884c\u4e3a&#xff1a;\u8ffd\u8e2a\u578b\u3001\u5de1\u903b\u578b\u3001\u968f\u673a\u578b\u7b49\u4e0d\u540c\u654c\u4eba\u7c7b\u578b&#xff0c;\u907f\u514d\u4e86\u6218\u6597\u7684\u5355\u8c03\u6027<\/li>\n<li>\u96be\u5ea6\u66f2\u7ebf\u5408\u7406&#xff1a;\u6e38\u620f\u521d\u671f\u654c\u4eba\u8f83\u5f31&#xff0c;\u968f\u7740\u65f6\u95f4\u63a8\u79fb\u6216\u5206\u6570\u63d0\u5347&#xff0c;\u654c\u4eba\u5f3a\u5ea6\u9010\u6e10\u589e\u52a0<\/li>\n<li>\u610f\u5916\u6027\u8bbe\u8ba1&#xff1a;\u90e8\u5206\u654c\u4eba\u5177\u6709\u7279\u6b8a\u653b\u51fb\u6a21\u5f0f&#xff08;\u5982\u5feb\u901f\u51b2\u523a\u3001\u8303\u56f4\u4f24\u5bb3&#xff09;&#xff0c;\u589e\u52a0\u4e86\u6218\u6597\u7684\u4e0d\u53ef\u9884\u6d4b\u6027<\/li>\n<\/ul>\n<li>\u9053\u5177\u4e0e\u6280\u80fd\u7cfb\u7edf<\/li>\n<ul>\n<li>\u9053\u5177\u6548\u679c\u663e\u8457&#xff1a;\u706b\u7bad\u52a0\u901f\u3001\u5395\u7eb8\u62a4\u76fe\u3001\u81ed\u6c14\u4e91\u7b49\u9053\u5177\u6548\u679c\u76f4\u89c2\u4e14\u5b9e\u7528&#xff0c;\u80fd\u5373\u65f6\u6539\u53d8\u6218\u6597\u5c40\u52bf<\/li>\n<li>\u6280\u80fd\u7ec4\u5408\u7b56\u7565&#xff1a;\u666e\u901a\u6295\u63b7\u4e0e\u7fa4\u4f53\u6280\u80fd\u7684\u914d\u5408\u4f7f\u7528&#xff0c;\u4e3a\u73a9\u5bb6\u63d0\u4f9b\u4e86\u6218\u672f\u9009\u62e9\u7a7a\u95f4<\/li>\n<li>\u5e73\u8861\u6027\u826f\u597d&#xff1a;\u5404\u9053\u5177\u548c\u6280\u80fd\u5404\u6709\u4f18\u52bf\u573a\u666f&#xff0c;\u6ca1\u6709\u51fa\u73b0\u67d0\u4e00\u9879\u8fc7\u4e8e\u5f3a\u52bf\u6216\u65e0\u7528\u7684\u60c5\u51b5<\/li>\n<\/ul>\n<p>\u4ea4\u4e92\u4e0e\u63a7\u5236\u4f53\u9a8c<\/p>\n<li>\u64cd\u4f5c\u54cd\u5e94\u6027<\/li>\n<ul>\n<li>\u5373\u65f6\u53cd\u9988&#xff1a;\u6309\u952e\u8f93\u5165\u4e0e\u89d2\u8272\u52a8\u4f5c\u4e4b\u95f4\u51e0\u4e4e\u6ca1\u6709\u5ef6\u8fdf&#xff0c;\u64cd\u4f5c\u624b\u611f\u6d41\u7545<\/li>\n<li>\u79fb\u52a8\u7cbe\u5ea6\u9002\u4e2d&#xff1a;\u89d2\u8272\u79fb\u52a8\u901f\u5ea6\u548c\u8f6c\u5411\u8bbe\u8ba1\u5408\u7406&#xff0c;\u65e2\u4e0d\u4f1a\u8fc7\u4e8e\u8fdf\u7f13\u4e5f\u4e0d\u4f1a\u96be\u4ee5\u63a7\u5236<\/li>\n<li>\u89e6\u5c4f\u9002\u914d\u826f\u597d&#xff1a;\u79fb\u52a8\u8bbe\u5907\u4e0a\u7684\u865a\u62df\u6447\u6746\u548c\u6280\u80fd\u6309\u94ae\u5e03\u5c40\u5408\u7406&#xff0c;\u89e6\u5c4f\u64cd\u4f5c\u4f53\u9a8c\u987a\u7545<\/li>\n<\/ul>\n<li>\u6218\u6597\u4ea4\u4e92<\/li>\n<ul>\n<li>\u547d\u4e2d\u5224\u5b9a\u51c6\u786e&#xff1a;\u6280\u80fd\u4e0e\u654c\u4eba\u7684\u78b0\u649e\u68c0\u6d4b\u7cbe\u51c6&#xff0c;\u6253\u51fb\u611f\u660e\u786e<\/li>\n<li>\u6280\u80fd\u91ca\u653e\u4f53\u9a8c&#xff1a;\u6280\u80fd\u65b9\u5411\u63a7\u5236\u76f4\u89c2&#xff0c;\u7fa4\u4f53\u6280\u80fd\u7684\u8ffd\u8e2a\u6548\u679c\u4ee4\u4eba\u6ee1\u610f<\/li>\n<li>\u9632\u5fa1\u4e0e\u751f\u5b58&#xff1a;\u62a4\u76fe\u9053\u5177\u548c\u95ea\u907f\u7a7a\u95f4\u8bbe\u8ba1\u5408\u7406&#xff0c;\u73a9\u5bb6\u6709\u8db3\u591f\u7684\u53cd\u5e94\u65f6\u95f4<\/li>\n<\/ul>\n<li>\u754c\u9762\u4ea4\u4e92<\/li>\n<ul>\n<li>\u83dc\u5355\u5bfc\u822a\u7b80\u6d01&#xff1a;\u6e38\u620f\u8bbe\u7f6e\u3001\u6682\u505c\u83dc\u5355\u7b49\u754c\u9762\u5c42\u7ea7\u6e05\u6670&#xff0c;\u64cd\u4f5c\u76f4\u89c2<\/li>\n<li>\u63d0\u793a\u4fe1\u606f\u53cb\u597d&#xff1a;\u9996\u6b21\u63a5\u89e6\u65b0\u9053\u5177\u6216\u6280\u80fd\u65f6&#xff0c;\u6709\u6e05\u6670\u7684\u89c6\u89c9\u63d0\u793a\u8bf4\u660e\u5176\u6548\u679c<\/li>\n<li>\u53cd\u9988\u53ca\u65f6&#xff1a;\u5206\u6570\u66f4\u65b0\u3001\u9053\u5177\u83b7\u5f97\u3001\u6280\u80fd\u51b7\u5374\u7b49\u72b6\u6001\u53d8\u5316\u90fd\u6709\u5373\u65f6\u7684\u89c6\u89c9\u6216\u97f3\u6548\u53cd\u9988<\/li>\n<\/ul>\n<li>\u5e7d\u9ed8\u5143\u7d20<\/li>\n<ul>\n<li>\u53cd\u5dee\u5e7d\u9ed8&#xff1a;\u4e25\u8083\u7684\u8d85\u7ea7\u82f1\u96c4\u8bbe\u5b9a\u4e0e&#034;\u5927\u4fbf&#034;\u8fd9\u4e00\u4e0d\u96c5\u4e3b\u9898\u7684\u53cd\u5dee&#xff0c;\u4ea7\u751f\u4e86\u72ec\u7279\u7684\u559c\u5267\u6548\u679c<\/li>\n<li>\u7ec6\u8282\u8da3\u5473&#xff1a;\u654c\u4eba\u53d7\u4f24\u65f6\u7684\u8868\u60c5\u3001\u6280\u80fd\u7279\u6548\u7684\u5938\u5f20\u8868\u73b0\u7b49\u7ec6\u8282\u589e\u5f3a\u4e86\u6e38\u620f\u7684\u8da3\u5473\u6027<\/li>\n<li>\u8f7b\u677e\u6c1b\u56f4&#xff1a;\u6574\u4f53\u6e38\u620f\u57fa\u8c03\u8f7b\u677e\u6109\u5feb&#xff0c;\u6ca1\u6709\u8fc7\u591a\u8d1f\u9762\u60c5\u7eea\u538b\u529b<\/li>\n<\/ul>\n<li>\u6c89\u6d78\u4f53\u9a8c<\/li>\n<ul>\n<li>\u89c6\u89c9\u8fde\u8d2f\u6027&#xff1a;\u6e38\u620f\u573a\u666f\u3001\u89d2\u8272\u3001\u7279\u6548\u7684\u89c6\u89c9\u98ce\u683c\u7edf\u4e00&#xff0c;\u589e\u5f3a\u4e86\u6c89\u6d78\u611f<\/li>\n<li>\u97f3\u6548\u914d\u5408&#xff08;\u5982\u6709&#xff09;&#xff1a;\u6280\u80fd\u97f3\u6548\u3001\u654c\u4eba\u53cd\u5e94\u58f0\u7b49\u97f3\u9891\u53cd\u9988&#xff08;\u82e5\u5b58\u5728&#xff09;\u63d0\u5347\u4e86\u4ea4\u4e92\u7684\u771f\u5b9e\u611f<\/li>\n<li>\u4e13\u6ce8\u5ea6&#xff1a;\u6e38\u620f\u673a\u5236\u8bbe\u8ba1\u80fd\u591f\u5438\u5f15\u73a9\u5bb6\u6301\u7eed\u6295\u5165\u6ce8\u610f\u529b&#xff0c;\u4e0d\u6613\u4ea7\u751f\u65e0\u804a\u611f<\/li>\n<\/ul>\n<li>\u793e\u4ea4\u4e0e\u5206\u4eab<\/li>\n<ul>\n<li>\u5206\u6570\u7ade\u4e89&#xff1a;\u901a\u8fc7\u5206\u6570\u6392\u540d\u6fc0\u53d1\u73a9\u5bb6\u7684\u7ade\u4e89\u6b32\u671b<\/li>\n<li>\u5206\u4eab\u529f\u80fd&#xff1a;\u6e38\u620f\u7ed3\u675f\u540e\u53ef\u5206\u4eab\u6210\u7ee9\u6216\u622a\u56fe&#xff0c;\u589e\u5f3a\u4e86\u793e\u4ea4\u4e92\u52a8\u6027<\/li>\n<li>\u4e2a\u6027\u5316\u5c55\u793a&#xff1a;\u81ea\u5b9a\u4e49\u5934\u50cf\u548c\u89d2\u8272\u5916\u89c2\u4e3a\u73a9\u5bb6\u63d0\u4f9b\u4e86\u5c55\u793a\u4e2a\u6027\u7684\u9014\u5f84<\/li>\n<\/ul>\n<h3>\u4e94\u3001\u9879\u76ee\u603b\u7ed3<\/h3>\n<h4>5.1 \u9879\u76ee\u6210\u679c\u603b\u7ed3<\/h4>\n<p>&#034;\u70ab\u9177\u5927\u4fbf\u8d85\u4eba&#034;\u6e38\u620f\u57fa\u4e8eCodeBuddy\u5e73\u53f0\u5f00\u53d1&#xff0c;\u6210\u529f\u5b9e\u73b0\u4e86\u4ee5\u4e0b\u6838\u5fc3\u6210\u679c&#xff1a;<\/p>\n<p>\u6280\u672f\u5b9e\u73b0\u65b9\u9762&#xff1a;<\/p>\n<ul>\n<li>\u5b8c\u6574\u7684\u6e38\u620f\u5faa\u73af&#xff1a;\u57fa\u4e8erequestAnimationFrame\u7684\u9ad8\u6027\u80fd\u6e38\u620f\u5faa\u73af&#xff0c;\u786e\u4fdd60FPS\u7684\u6d41\u7545\u4f53\u9a8c<\/li>\n<li>\u591a\u6837\u5316\u7684\u6e38\u620f\u673a\u5236&#xff1a;\u5305\u542b\u591a\u79cd\u654c\u4ebaAI\u884c\u4e3a\u6a21\u5f0f\u3001\u4e30\u5bcc\u7684\u9053\u5177\u7cfb\u7edf\u548c\u6280\u80fd\u673a\u5236<\/li>\n<li>\u4f18\u5316\u7684\u6e32\u67d3\u6027\u80fd&#xff1a;\u9ad8\u6548\u7684\u78b0\u649e\u68c0\u6d4b\u7b97\u6cd5\u548c\u7c92\u5b50\u7cfb\u7edf&#xff0c;\u652f\u6301\u590d\u6742\u7684\u6e38\u620f\u573a\u666f<\/li>\n<li>\u8de8\u5e73\u53f0\u517c\u5bb9\u6027&#xff1a;\u9002\u914dPC\u548c\u79fb\u52a8\u8bbe\u5907&#xff0c;\u63d0\u4f9b\u4e00\u81f4\u7684\u6e38\u620f\u4f53\u9a8c<\/li>\n<\/ul>\n<p>\u5f00\u53d1\u6548\u7387\u65b9\u9762&#xff1a;<\/p>\n<ul>\n<li>\u5feb\u901f\u539f\u578b\u5f00\u53d1&#xff1a;CodeBuddy\u7684\u4e91\u7aef\u73af\u5883\u652f\u6301\u5feb\u901f\u8fed\u4ee3\u548c\u5b9e\u9a8c<\/li>\n<li>\u56e2\u961f\u534f\u4f5c\u4f18\u5316&#xff1a;\u5b9e\u65f6\u534f\u4f5c\u529f\u80fd\u52a0\u901f\u4e86\u5f00\u53d1\u8fc7\u7a0b<\/li>\n<li>\u6027\u80fd\u76d1\u63a7\u4e0e\u8c03\u8bd5&#xff1a;\u5185\u7f6e\u5de5\u5177\u5e2e\u52a9\u8bc6\u522b\u548c\u89e3\u51b3\u6027\u80fd\u74f6\u9888<\/li>\n<\/ul>\n<p>\u57fa\u4e8eCodeBuddy\u5e73\u53f0\u5f00\u53d1&#034;\u70ab\u9177\u5927\u4fbf\u8d85\u4eba&#034;\u8fd9\u6b3eHTML5 Canvas\u4f11\u95f2\u6e38\u620f\u7684\u4f53\u9a8c&#xff0c;\u53ef\u4ee5\u7528&#034;\u9ad8\u6548\u3001\u7075\u6d3b\u3001\u8d4b\u80fd&#034;\u4e09\u4e2a\u5173\u952e\u8bcd\u9ad8\u5ea6\u6982\u62ec\u3002\u4f5c\u4e3a\u4e00\u6b3e\u4e3b\u6253\u4e91\u7aef\u96c6\u6210\u5f00\u53d1\u7684\u5de5\u5177&#xff0c;CodeBuddy\u4e0d\u4ec5\u89e3\u51b3\u4e86\u4f20\u7edf\u672c\u5730\u5f00\u53d1\u4e2d\u73af\u5883\u914d\u7f6e\u590d\u6742\u3001\u534f\u4f5c\u6548\u7387\u4f4e\u4e0b\u7b49\u75db\u70b9&#xff0c;\u66f4\u901a\u8fc7\u4e00\u7cfb\u5217\u8d34\u5408\u6e38\u620f\u5f00\u53d1\u9700\u6c42\u7684\u7279\u6027&#xff0c;\u6210\u4e3a\u63a8\u52a8\u9879\u76ee\u4ece\u521b\u610f\u5230\u843d\u5730\u7684\u5f3a\u529b\u5f15\u64ce\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb841\u6b21\uff0c\u70b9\u8d5e64\u6b21\uff0c\u6536\u85cf43\u6b21\u3002CodeBuddy\u4f5c\u4e3a\u4e00\u6b3e\u9762\u5411\u5f00\u53d1\u8005\u7684\u4e91\u7aef\u96c6\u6210\u5f00\u53d1\u73af\u5883\uff08Cloud IDE\uff09\uff0c\u4e3a&quot;\u70ab\u9177\u5927\u4fbf\u8d85\u4eba&quot;\u8fd9\u7c7bHTML5\u6e38\u620f\u7684\u5f00\u53d1\u63d0\u4f9b\u4e86\u5f3a\u5927\u7684\u6280\u672f\u652f\u6491\u548c\u9ad8\u6548\u7684\u5f00\u53d1\u4f53\u9a8c\u3002\u667a\u80fd\u5f00\u53d1\u73af\u5883\uff1a\u4e91\u7aef\u4e00\u4f53\u5316\uff1a\u65e0\u9700\u672c\u5730\u73af\u5883\u914d\u7f6e\uff0c\u901a\u8fc7\u6d4f\u89c8\u5668\u5373\u53ef\u8bbf\u95ee\u5b8c\u6574\u7684\u5f00\u53d1\u5de5\u5177\u94fe\uff0c\u5305\u62ec\u4ee3\u7801\u7f16\u8f91\u5668\u3001\u8c03\u8bd5\u5668\u3001\u7248\u672c\u63a7\u5236\u7cfb\u7edf\u9884\u7f6e\u6280\u672f\u6808\uff1a\u5185\u7f6eHTML5\u3001CSS3\u3001JavaScript\u7b49\u524d\u7aef\u5f00\u53d1\u6240\u9700\u7684\u8fd0\u884c\u65f6\u73af\u5883\u548c\u5e93\u6587\u4ef6\uff0c\u5f00\u53d1\u8005\u53ef\u7acb\u5373\u5f00\u59cb\u7f16\u7801\u8d44\u6e90\u52a0\u901f\uff1a\u57fa\u4e8e\u4e91\u7aef\u7684\u8ba1\u7b97\u8d44\u6e90\uff0c\u63d0\u4f9b\u5feb\u901f\u7684\u6784\u5efa\u3001\u6d4b\u8bd5\u548c\u90e8\u7f72\u80fd\u529b\uff0c\u663e\u8457\u63d0\u5347\u5f00\u53d1\u6548\u7387\u534f\u4f5c\u4e0e\u9879\u76ee\u7ba1\u7406\uff1a\u5b9e\u65f6\u534f\u4f5c\u3002<\/p>\n","protected":false},"author":2,"featured_media":58313,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[66,3623,6139,248],"topic":[],"class_list":["post-58319","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-ai","tag-codebuddy","tag-6139","tag-248"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u57fa\u4e8eCodeBuddy\u76842D\u6e38\u620f\u5f00\u53d1\u5b9e\u8df5\uff1a\u70ab\u9177\u5927\u4fbf\u8d85\u4eba\u6838\u5fc3\u673a\u5236\u89e3\u6790 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/58319.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u57fa\u4e8eCodeBuddy\u76842D\u6e38\u620f\u5f00\u53d1\u5b9e\u8df5\uff1a\u70ab\u9177\u5927\u4fbf\u8d85\u4eba\u6838\u5fc3\u673a\u5236\u89e3\u6790 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb841\u6b21\uff0c\u70b9\u8d5e64\u6b21\uff0c\u6536\u85cf43\u6b21\u3002CodeBuddy\u4f5c\u4e3a\u4e00\u6b3e\u9762\u5411\u5f00\u53d1\u8005\u7684\u4e91\u7aef\u96c6\u6210\u5f00\u53d1\u73af\u5883\uff08Cloud IDE\uff09\uff0c\u4e3a&quot;\u70ab\u9177\u5927\u4fbf\u8d85\u4eba&quot;\u8fd9\u7c7bHTML5\u6e38\u620f\u7684\u5f00\u53d1\u63d0\u4f9b\u4e86\u5f3a\u5927\u7684\u6280\u672f\u652f\u6491\u548c\u9ad8\u6548\u7684\u5f00\u53d1\u4f53\u9a8c\u3002\u667a\u80fd\u5f00\u53d1\u73af\u5883\uff1a\u4e91\u7aef\u4e00\u4f53\u5316\uff1a\u65e0\u9700\u672c\u5730\u73af\u5883\u914d\u7f6e\uff0c\u901a\u8fc7\u6d4f\u89c8\u5668\u5373\u53ef\u8bbf\u95ee\u5b8c\u6574\u7684\u5f00\u53d1\u5de5\u5177\u94fe\uff0c\u5305\u62ec\u4ee3\u7801\u7f16\u8f91\u5668\u3001\u8c03\u8bd5\u5668\u3001\u7248\u672c\u63a7\u5236\u7cfb\u7edf\u9884\u7f6e\u6280\u672f\u6808\uff1a\u5185\u7f6eHTML5\u3001CSS3\u3001JavaScript\u7b49\u524d\u7aef\u5f00\u53d1\u6240\u9700\u7684\u8fd0\u884c\u65f6\u73af\u5883\u548c\u5e93\u6587\u4ef6\uff0c\u5f00\u53d1\u8005\u53ef\u7acb\u5373\u5f00\u59cb\u7f16\u7801\u8d44\u6e90\u52a0\u901f\uff1a\u57fa\u4e8e\u4e91\u7aef\u7684\u8ba1\u7b97\u8d44\u6e90\uff0c\u63d0\u4f9b\u5feb\u901f\u7684\u6784\u5efa\u3001\u6d4b\u8bd5\u548c\u90e8\u7f72\u80fd\u529b\uff0c\u663e\u8457\u63d0\u5347\u5f00\u53d1\u6548\u7387\u534f\u4f5c\u4e0e\u9879\u76ee\u7ba1\u7406\uff1a\u5b9e\u65f6\u534f\u4f5c\u3002\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/58319.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-16T00:06:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/08\/20250816000610-689fcb7232b60.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/58319.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/58319.html\",\"name\":\"\u57fa\u4e8eCodeBuddy\u76842D\u6e38\u620f\u5f00\u53d1\u5b9e\u8df5\uff1a\u70ab\u9177\u5927\u4fbf\u8d85\u4eba\u6838\u5fc3\u673a\u5236\u89e3\u6790 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2025-08-16T00:06:16+00:00\",\"dateModified\":\"2025-08-16T00:06:16+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/58319.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/58319.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/58319.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u57fa\u4e8eCodeBuddy\u76842D\u6e38\u620f\u5f00\u53d1\u5b9e\u8df5\uff1a\u70ab\u9177\u5927\u4fbf\u8d85\u4eba\u6838\u5fc3\u673a\u5236\u89e3\u6790\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u57fa\u4e8eCodeBuddy\u76842D\u6e38\u620f\u5f00\u53d1\u5b9e\u8df5\uff1a\u70ab\u9177\u5927\u4fbf\u8d85\u4eba\u6838\u5fc3\u673a\u5236\u89e3\u6790 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/58319.html","og_locale":"zh_CN","og_type":"article","og_title":"\u57fa\u4e8eCodeBuddy\u76842D\u6e38\u620f\u5f00\u53d1\u5b9e\u8df5\uff1a\u70ab\u9177\u5927\u4fbf\u8d85\u4eba\u6838\u5fc3\u673a\u5236\u89e3\u6790 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb841\u6b21\uff0c\u70b9\u8d5e64\u6b21\uff0c\u6536\u85cf43\u6b21\u3002CodeBuddy\u4f5c\u4e3a\u4e00\u6b3e\u9762\u5411\u5f00\u53d1\u8005\u7684\u4e91\u7aef\u96c6\u6210\u5f00\u53d1\u73af\u5883\uff08Cloud IDE\uff09\uff0c\u4e3a&quot;\u70ab\u9177\u5927\u4fbf\u8d85\u4eba&quot;\u8fd9\u7c7bHTML5\u6e38\u620f\u7684\u5f00\u53d1\u63d0\u4f9b\u4e86\u5f3a\u5927\u7684\u6280\u672f\u652f\u6491\u548c\u9ad8\u6548\u7684\u5f00\u53d1\u4f53\u9a8c\u3002\u667a\u80fd\u5f00\u53d1\u73af\u5883\uff1a\u4e91\u7aef\u4e00\u4f53\u5316\uff1a\u65e0\u9700\u672c\u5730\u73af\u5883\u914d\u7f6e\uff0c\u901a\u8fc7\u6d4f\u89c8\u5668\u5373\u53ef\u8bbf\u95ee\u5b8c\u6574\u7684\u5f00\u53d1\u5de5\u5177\u94fe\uff0c\u5305\u62ec\u4ee3\u7801\u7f16\u8f91\u5668\u3001\u8c03\u8bd5\u5668\u3001\u7248\u672c\u63a7\u5236\u7cfb\u7edf\u9884\u7f6e\u6280\u672f\u6808\uff1a\u5185\u7f6eHTML5\u3001CSS3\u3001JavaScript\u7b49\u524d\u7aef\u5f00\u53d1\u6240\u9700\u7684\u8fd0\u884c\u65f6\u73af\u5883\u548c\u5e93\u6587\u4ef6\uff0c\u5f00\u53d1\u8005\u53ef\u7acb\u5373\u5f00\u59cb\u7f16\u7801\u8d44\u6e90\u52a0\u901f\uff1a\u57fa\u4e8e\u4e91\u7aef\u7684\u8ba1\u7b97\u8d44\u6e90\uff0c\u63d0\u4f9b\u5feb\u901f\u7684\u6784\u5efa\u3001\u6d4b\u8bd5\u548c\u90e8\u7f72\u80fd\u529b\uff0c\u663e\u8457\u63d0\u5347\u5f00\u53d1\u6548\u7387\u534f\u4f5c\u4e0e\u9879\u76ee\u7ba1\u7406\uff1a\u5b9e\u65f6\u534f\u4f5c\u3002","og_url":"https:\/\/www.wsisp.com\/helps\/58319.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2025-08-16T00:06:16+00:00","og_image":[{"url":"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/08\/20250816000610-689fcb7232b60.png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"16 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/58319.html","url":"https:\/\/www.wsisp.com\/helps\/58319.html","name":"\u57fa\u4e8eCodeBuddy\u76842D\u6e38\u620f\u5f00\u53d1\u5b9e\u8df5\uff1a\u70ab\u9177\u5927\u4fbf\u8d85\u4eba\u6838\u5fc3\u673a\u5236\u89e3\u6790 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2025-08-16T00:06:16+00:00","dateModified":"2025-08-16T00:06:16+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/58319.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/58319.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/58319.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"\u57fa\u4e8eCodeBuddy\u76842D\u6e38\u620f\u5f00\u53d1\u5b9e\u8df5\uff1a\u70ab\u9177\u5927\u4fbf\u8d85\u4eba\u6838\u5fc3\u673a\u5236\u89e3\u6790"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/58319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=58319"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/58319\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media\/58313"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=58319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=58319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=58319"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=58319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}