{"id":2690,"date":"2024-11-10T10:15:23","date_gmt":"2024-11-10T02:15:23","guid":{"rendered":"https:\/\/fwq.ai\/blog\/2690\/"},"modified":"2024-11-10T10:15:23","modified_gmt":"2024-11-10T02:15:23","slug":"%e5%a6%82%e4%bd%95%e4%bc%98%e5%8c%96-vue-%e4%ba%94%e5%ad%90%e6%a3%8b%e7%a8%8b%e5%ba%8f%e4%b8%ad%e7%9a%84%e9%87%8d%e5%a4%8d%e4%bb%a3%e7%a0%81%ef%bc%9f","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/2690\/","title":{"rendered":"\u5982\u4f55\u4f18\u5316 Vue \u4e94\u5b50\u68cb\u7a0b\u5e8f\u4e2d\u7684\u91cd\u590d\u4ee3\u7801\uff1f"},"content":{"rendered":"

\"\u5982\u4f55\u4f18\u5316<\/p>\n

\u7b80\u5316\u4ee3\u7801<\/strong><\/p>\n

\u95ee\u9898\uff1a<\/strong><\/p>\n

\u4e00\u4e2a\u4f7f\u7528 \u7f16\u5199\u7684\u4e94\u5b50\u68cb\u7a0b\u5e8f\u4e2d\u5b58\u5728\u5927\u91cf\u91cd\u590d\u4ee3\u7801\uff0c\u9700\u8981\u8fdb\u884c\u7b80\u5316\u3002<\/p>\n

\u4ee3\u7801\u91cd\u590d\uff1a<\/strong><\/p>\n

\u7acb\u5373\u5b66\u4e60<\/span>\u201c\u201d\uff1b<\/p>\n

\u90e8\u5206\u7684 clickbox \u51fd\u6570\u4e2d\u91cd\u590d\u7684\u6761\u4ef6\u68c0\u67e5\u548c\u68cb\u5b50\u653e\u7f6e\u903b\u8f91\u3002 <\/p>\n

<script> \u90e8\u5206\u7684 aripoint \u51fd\u6570\u4e2d\u91cd\u590d\u7684\u56db\u79cd\u6761\u4ef6\u68c0\u67e5\u548c\u68cb\u5b50\u653e\u7f6e\u903b\u8f91\u3002<\/script><\/p>\n

<script> \u90e8\u5206\u7684 determineequare3 \u51fd\u6570\u4e2d\u91cd\u590d\u7684\u56db\u79cd\u6761\u4ef6\u68c0\u67e5\u548c\u8fde\u5b50\u7c7b\u578b\u5224\u65ad\u903b\u8f91\u3002<\/script><\/p>\n

\u7b80\u5316\u65b9\u6848\uff1a<\/strong><\/p>\n

\u5c06\u8fd9\u4e9b\u91cd\u590d\u7684\u90e8\u5206\u63d0\u53d6\u6210\u72ec\u7acb\u7684\u51fd\u6570\u6216\u65b9\u6cd5\uff0c\u5e76\u5728\u9700\u8981\u65f6\u8c03\u7528\u8fd9\u4e9b\u51fd\u6570\u6216\u65b9\u6cd5\u3002<\/p>\n

\u7b80\u5316\u4ee3\u7801\u793a\u4f8b\uff1a<\/strong><\/p>\n

\u90e8\u5206\uff1a <\/p>\n

<template>\n  <!-- \u5176\u4ed6\u4ee3\u7801 -->\n\n  <div class=\"game-main\">\n    <div\n      v-for=\"(box, index) in boxs\"\n      :key=\"index\"\n      class=\"flex\"\n    >\n      <div\n        v-for=\"(item, index2) in box\"\n        :key=\"index2\"\n        class=\"item-one\"\n        @click=\"clickbox(item)\"\n      >\n        <div\n          v-if=\"item.place\"\n          class=\"circle\"\n          :style=\"'background:' + (item.place === 1 ? 'white' : '#000')\"\n        >\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- \u5176\u4ed6\u4ee3\u7801 -->\n<\/template><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
<script> \u90e8\u5206\uff1a<\/script><\/p>\n
<script>\nimport { ref } from 'vue'\n\n\/\/ \u5b9a\u4e49\u70b9\u51fb\u65b9\u683c\u7684\u5904\u7406\u51fd\u6570\nfunction clickBox(box) {\n  if (box.place === 0 && (!isMachine.value || curUser.value === 1)) {\n    \/\/ \u653e\u7f6e\u68cb\u5b50\n    placePiece(box.x, box.y);\n\n    if (isMachine.value) {\n      \/\/ \u8f6e\u5230\u673a\u5668\u4eba\u4e0b\u68cb\n      ariPoint();\n    }\n  }\n}\n\n\/\/ \u5b9a\u4e49\u673a\u5668\u4eba\u7684\u4e0b\u68cb\u903b\u8f91\u51fd\u6570\nfunction ariPoint() {\n  \/\/ \u68c0\u67e5\u662f\u5426\u6709\u56db\u4e2a\u8fde\u5728\u4e00\u8d77\u7684\u60c5\u51b5\n  if (!isEmptyObject(fourDetial)) {\n    \/\/ \u6839\u636e\u60c5\u51b5\u653e\u7f6e\u68cb\u5b50\n    handleFourInARow();\n  } else {\n    \/\/ \u68c0\u67e5\u662f\u5426\u6709\u963b\u6321\u7528\u6237\u7684\u60c5\u51b5\n    const temp = determineEquare3();\n    if (temp) {\n      \/\/ \u6839\u636e\u60c5\u51b5\u653e\u7f6e\u68cb\u5b50\n      handleBlockUser();\n    } else {\n      \/\/ \u4f01\u56fe\u5b8c\u6210\u4e94\u4e2a\u8fde\u7ebf\n      airFiveLine();\n    }\n  }\n}\n\n\/\/ \u5b9a\u4e49\u68c0\u67e5\u8fde\u5b50\u7684\u51fd\u6570\nfunction determineEquare3() {\n  \/\/ \u6839\u636e\u6761\u4ef6\u68c0\u67e5\u8fde\u5b50\u7684\u7c7b\u578b\n  if (\/\/ \u6761\u4ef6\u5224\u65ad) {\n    return { type, geyi, x, y, times };\n  }\n  return false;\n}\n\n\/\/ \u5b9a\u4e49\u653e\u7f6e\u68cb\u5b50\u7684\u51fd\u6570\nfunction placePiece(x, y) {\n  \/\/ \u66f4\u65b0\u68cb\u76d8\u6570\u636e\n  boxs.value[x][y].place = 2;\n\n  \/\/ \u66f4\u65b0\u673a\u5668\u4eba\u7684\u8fde\u5b50\u60c5\u51b5\n  fourDetial = determineEquare3(4, 2, { x, y, place: 2 });\n\n  \/\/ \u66f4\u65b0\u5df2\u843d\u5b50\u4f4d\u7f6e\u7684\u6570\u7ec4\n  airPlace.push(x * row.value + y);\n}\n\n\/\/ \u5b9a\u4e49\u5904\u7406\u56db\u4e2a\u8fde\u5b50\u7684\u51fd\u6570\nfunction handleFourInARow() {\n  \/\/ \u6839\u636e\u60c5\u51b5\u653e\u7f6e\u68cb\u5b50\n  \/\/ ...\n}\n\n\/\/ \u5b9a\u4e49\u5904\u7406\u963b\u6321\u7528\u6237\u7684\u51fd\u6570\nfunction handleBlockUser() {\n  \/\/ \u6839\u636e\u60c5\u51b5\u653e\u7f6e\u68cb\u5b50\n  \/\/ ...\n}\n\n\/\/ \u5b9a\u4e49\u673a\u5668\u4eba\u7684\u4f01\u56fe\u5b8c\u6210\u4e94\u4e2a\u8fde\u5b50\u7684\u51fd\u6570\nfunction airFiveLine() {\n  \/\/ \u6839\u636e\u60c5\u51b5\u653e\u7f6e\u68cb\u5b50\n  \/\/ ...\n}\n\n\/\/ \u5176\u4ed6\u4ee3\u7801\n<\/script><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u7b80\u5316\u540e\u7684\u4ee3\u7801\u66f4\u52a0\u6e05\u6670\u6613\u8bfb\uff0c\u7ef4\u62a4\u96be\u5ea6\u4e5f\u964d\u4f4e\u4e86\u3002<\/strong><\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u5982\u4f55\u4f18\u5316 Vue \u4e94\u5b50\u68cb\u7a0b\u5e8f\u4e2d\u7684\u91cd\u590d\u4ee3\u7801\uff1f\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
\u7b80\u5316\u4ee3\u7801 \u95ee\u9898\uff1a \u4e00\u4e2a\u4f7f\u7528 \u7f16\u5199\u7684\u4e94\u5b50\u68cb\u7a0b\u5e8f\u4e2d\u5b58\u5728\u5927\u91cf\u91cd\u590d\u4ee3\u7801\uff0c\u9700\u8981\u8fdb\u884c\u7b80\u5316\u3002 \u4ee3\u7801\u91cd\u590d\uff1a \u7acb\u5373\u5b66\u4e60\u201c\u201d\uff1b \u90e8\u5206\u7684 clickbox \u51fd\u6570\u4e2d\u91cd\u590d\u7684\u6761\u4ef6\u68c0\u67e5\u548c\u68cb\u5b50\u653e\u7f6e\u903b\u8f91\u3002 <script> \u90e8\u5206\u7684 aripoint \u51fd\u6570\u4e2d\u91cd\u590d\u7684\u56db\u79cd\u6761\u4ef6\u68c0\u67e5\u548c\u68cb\u5b50\u653e\u7f6e\u903b\u8f91\u3002<\/script> <script> \u90e8\u5206\u7684 determineequare3 \u51fd\u6570\u4e2d\u91cd\u590d\u7684\u56db\u79cd\u6761\u4ef6\u68c0\u67e5\u548c\u8fde\u5b50\u7c7b\u578b\u5224\u65ad\u903b\u8f91\u3002<\/script> \u7b80\u5316\u65b9\u6848\uff1a \u5c06\u8fd9\u4e9b\u91cd\u590d\u7684\u90e8\u5206\u63d0\u53d6\u6210\u72ec\u7acb\u7684\u51fd\u6570\u6216\u65b9\u6cd5\uff0c\u5e76\u5728\u9700\u8981\u65f6\u8c03\u7528\u8fd9\u4e9b\u51fd\u6570\u6216\u65b9\u6cd5\u3002 \u7b80\u5316\u4ee3\u7801\u793a\u4f8b\uff1a \u90e8\u5206\uff1a <template> <!– \u5176\u4ed6\u4ee3\u7801 –> <div class=”game-main”> <div v-for=”(box, index) in boxs” :key=”index” class=”flex” > <div v-for=”(item, index2) in box” :key=”index2″ class=”item-one” @click=”clickbox(item)” > <div v-if=”item.place” class=”circle” :style=”‘background:’ + (item.place === 1 ? ‘white’ : […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-2690","post","type-post","status-publish","format-standard","hentry","category-16"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/2690","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=2690"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/2690\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=2690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=2690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=2690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}