diff --git a/src/App.vue b/src/App.vue
index 633a5dfe4e547c48bfa93740a290ba5ba370930a..c1289b98e2c0bafe8eee191f1b39387eb730685e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,47 +1,477 @@
-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
+  <div>
+    <div>
+      <input v-model="wh" name="wh" type="number" />
+      <button @click="reset">重置</button>
     </div>
-  </header>
 
-  <main>
-    <TheWelcome />
-  </main>
+    <canvas
+      id="checkerboard"
+      :width="wh"
+      :height="wh"
+      @click="handlerClick"
+    ></canvas>
+  </div>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-}
+<script>
+export default {
+  data() {
+    return {
+      wh: 999,//宽高
+      interval: 0,//间隔
+      init_X_Y: 10,//初始点
+      r: 12,//半径
+      points: [],//所有点位
+      exist_point: [],//存在点位（弃用）
+      operate: "user", //用户或者电脑 computer
+      direction: [ //方位
+        "up",
+        "down",
+        "left",
+        "right",
+        "left_up",
+        "right_down",
+        "left_down",
+        "right_up",
+      ],
+      state: 0, //0初始1用户赢2电脑赢
+    };
+  },
+  methods: {
+    handlerClick(e) { //用户点击棋盘
+      if (this.state != 0) return;
+      if (this.operate == "computer") return;
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
+      for (let item of this.points) {
+        if (
+          Math.abs(e.offsetX - item.x) < this.r &&
+          Math.abs(e.offsetY - item.y) < this.r &&
+          !item.exist
+        ) {
+          let canvas = document.getElementById("checkerboard");
+          let g2 = canvas.getContext("2d");
+          g2.beginPath();
+          g2.fillStyle = "white"; //
+          g2.arc(item.x, item.y, this.r, 0, 2 * Math.PI);
+          g2.fill();
+          this.operate = "computer";
+          item.exist = true;
+          item.operate = "user";
+          this.win(item, "user");
+          if (this.state == 0) this.computerMspaint();
+        }
+      }
+    },
+    //电脑下
+    computerClick() {
+      this.exist_point; //已经存在的棋子
+      this.points; //棋盘点位
+    },
+    //绘制棋盘
+    mspaint() {
+      let interval = this.interval; //间隔
+      let init_X_Y = this.init_X_Y; //初始xy
+      let r = this.r; //半径
+      let canvas = document.getElementById("checkerboard");
+      let g2 = canvas.getContext("2d");
+
+      for (let i = 0; i < 16; i++) {
+        let line_X_Y = init_X_Y + i * interval; //线条XY
+        //竖线
+        g2.beginPath();
+        g2.strokeStyle = "black";
+        g2.lineWidth = 2;
+        g2.moveTo(line_X_Y, 10);
+        g2.lineTo(line_X_Y, this.wh - 10);
+        g2.closePath();
+        g2.stroke();
+        //横线
+        g2.beginPath();
+        g2.strokeStyle = "black";
+        g2.lineWidth = 2;
+        g2.moveTo(10, line_X_Y);
+        g2.lineTo(this.wh - 10, line_X_Y);
+        g2.closePath();
+        g2.stroke();
+      }
+    },
+    //获取所有点位
+    getAllPoint() {
+      this.points = [];
+      for (let i = 0; i < 16; i++) {
+        //遍历X轴
+        let x = i * this.interval + this.init_X_Y;
+        for (let j = 0; j < 16; j++) {
+          //遍历Y轴
+          let y = j * this.interval + this.init_X_Y;
+          this.points.push({ x, y, exist: false });
+        }
+      }
+    },
+    //计算点位权重
+    checkPoint() {
+      //检查点位权重
+      let maxWeight = 0; // 连续三个+50分 连续四个+99 低于三个各方位每个加1
+      let final = {};
+      let lr, ud, lu_rd, ld_ru;
+      for (let item of this.pointDiff) {
+        let weight = 0;
+        let userWeight = this.direction.map((e) => {
+          let arr = this.bearingFor(item, e, "user");
+          let decrement = 0;
+          if (arr >= 2) {
+            let arrLeft = this.bearingFor(arr[0], e, "computer").length > 0;
+            let arrRight = this.bearingFor(arr[arr.length - 1], e, "user").length;
+            if (arrLeft > 0) decrement += 20;
+            if (arrRight > 0) decrement += 20;
+          }
+          return this.getCount(arr.length, decrement);
+        });
+        ud = userWeight[0] + userWeight[1];
+        lr = userWeight[2] + userWeight[3];
+        lu_rd = userWeight[4] + userWeight[5];
+        ld_ru = userWeight[6] + userWeight[7];
+
+        if (ud > maxWeight) {
+          maxWeight = ud;
+          final = item;
+        } else if (lr > maxWeight) {
+          maxWeight = lr;
+          final = item;
+        } else if (lu_rd > maxWeight) {
+          maxWeight = lu_rd;
+          final = item;
+        } else if (ld_ru > maxWeight) {
+          maxWeight = ld_ru;
+          final = item;
+        }
+      }
+
+      for (let item of this.pointDiff) {
+        let weight = 0;
+        let userWeight = this.direction.map((e) => {
+          let arr = this.bearingFor(item, e, "computer");
+          let decrement = 0;
+          if (arr >= 2) {
+            let arrLeft = this.bearingFor(arr[0], e, "user").length > 0;
+            let arrRight = this.bearingFor(arr[arr.length - 1], e, "user").length;
+            if (arrLeft > 0) decrement += 20;
+            if (arrRight > 0) decrement += 20;
+          }
+          return this.getCount(arr.length, decrement);
+        });
+        ud = userWeight[0] + userWeight[1];
+        lr = userWeight[2] + userWeight[3];
+        lu_rd = userWeight[4] + userWeight[5];
+        ld_ru = userWeight[6] + userWeight[7];
+        if (ud >= maxWeight) {
+          maxWeight = ud;
+          final = item;
+        } else if (lr >= maxWeight) {
+          maxWeight = lr;
+          final = item;
+        } else if (lu_rd >= maxWeight) {
+          maxWeight = lu_rd;
+          final = item;
+        } else if (ld_ru >= maxWeight) {
+          maxWeight = ld_ru;
+          final = item;
+        }
+      }
+      return final;
+    },
+    //电脑绘制棋子
+    computerMspaint() {
+      let final = this.checkPoint();
+      let canvas = document.getElementById("checkerboard");
+      let g2 = canvas.getContext("2d");
+      g2.beginPath();
+      g2.fillStyle = "black"; //
+      g2.arc(final.x, final.y, this.r, 0, 2 * Math.PI);
+      g2.fill();
+      this.points.forEach((e) => {
+        if (e.x == final.x && e.y == final.y) {
+          e.exist = true;
+          e.operate = "computer";
+        }
+      });
+      this.operate = "user";
+      this.win(final, "computer");
+    },
+
+    /**用户附近可下点位**/
+    userNearbyPoint() {
+      let userPoint = this.points.filter((e) => {
+        return e.operate == "user";
+      });
+      let arr = [];
+      for (let item of userPoint) {
+        let right = this.points.find((e) => {
+          return (
+            e.x == item.x + this.interval && e.y == item.y && e.exist == false
+          );
+        });
+        if (right) arr.push(right);
+
+        let right_up = this.points.find((e) => {
+          return (
+            e.x == item.x + this.interval &&
+            e.y == item.y - this.interval &&
+            !e.exist
+          );
+        });
+        if (right_up) arr.push(right_up);
 
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
+        let right_down = this.points.find((e) => {
+          return (
+            e.x == item.x + this.interval &&
+            e.y == item.y + this.interval &&
+            !e.exist
+          );
+        });
+        if (right_down) arr.push(right_down);
+
+        let left = this.points.find((e) => {
+          return e.x == item.x - this.interval && e.y == item.y && !e.exist;
+        });
+        if (left) arr.push(left);
+
+        let left_up = this.points.find((e) => {
+          return (
+            e.x == item.x - this.interval &&
+            e.y == item.y - this.interval &&
+            !e.exist
+          );
+        });
+        if (left_up) arr.push(left_up);
+
+        let left_down = this.points.find((e) => {
+          return (
+            e.x == item.x - this.interval &&
+            e.y == item.y + this.interval &&
+            !e.exist
+          );
+        });
+        if (left_down) arr.push(left_down);
+
+        let up = this.points.find((e) => {
+          return e.x == item.x && e.y == item.y - this.interval && !e.exist;
+        });
+        if (up) arr.push(up);
+
+        let down = this.points.find((e) => {
+          return e.x == item.x && e.y == item.y + this.interval && !e.exist;
+        });
+        if (down) arr.push(down);
+      }
+      return arr;
+    },
+    //地柜八个方向棋子
+    bearingFor(item, direction, operate) {
+      //寻找八个方位棋子
+      let obj = [];
+      let dirPoint = {};
+      //方位寻找
+      switch (direction) {
+        case "up":
+          dirPoint = this.points.find((e) => {
+            return (
+              e.x == item.x &&
+              e.y == item.y - this.interval &&
+              e.exist &&
+              e.operate == operate
+            );
+          });
+          if (dirPoint != null) {
+            obj = [dirPoint, ...this.bearingFor(dirPoint, "up", operate)];
+          }
+          break;
+        case "down":
+          dirPoint = this.points.find((e) => {
+            return (
+              e.x == item.x &&
+              e.y == item.y + this.interval &&
+              e.exist &&
+              e.operate == operate
+            );
+          });
+          if (dirPoint != null) {
+            obj = [dirPoint, ...this.bearingFor(dirPoint, "down", operate)];
+          }
+          break;
+        case "left":
+          dirPoint = this.points.find((e) => {
+            return (
+              e.x == item.x - this.interval &&
+              e.y == item.y &&
+              e.exist &&
+              e.operate == operate
+            );
+          });
+          if (dirPoint != null) {
+            obj = [dirPoint, ...this.bearingFor(dirPoint, "left", operate)];
+          }
+          break;
+        case "right":
+          dirPoint = this.points.find((e) => {
+            return (
+              e.x == item.x + this.interval &&
+              e.y == item.y &&
+              e.exist &&
+              e.operate == operate
+            );
+          });
+          if (dirPoint != null) {
+            obj = [dirPoint, ...this.bearingFor(dirPoint, "right", operate)];
+          }
+          break;
+        case "right_up":
+          dirPoint = this.points.find((e) => {
+            return (
+              e.x == item.x + this.interval &&
+              e.y == item.y - this.interval &&
+              e.exist &&
+              e.operate == operate
+            );
+          });
+          if (dirPoint != null) {
+            obj = [dirPoint, ...this.bearingFor(dirPoint, "right_up", operate)];
+          }
+          break;
+        case "right_down":
+          dirPoint = this.points.find((e) => {
+            return (
+              e.x == item.x + this.interval &&
+              e.y == item.y + this.interval &&
+              e.exist &&
+              e.operate == operate
+            );
+          });
+          if (dirPoint != null) {
+            obj = [
+              dirPoint,
+              ...this.bearingFor(dirPoint, "right_down", operate),
+            ];
+          }
+          break;
+        case "left_up":
+          dirPoint = this.points.find((e) => {
+            return (
+              e.x == item.x - this.interval &&
+              e.y == item.y - this.interval &&
+              e.exist &&
+              e.operate == operate
+            );
+          });
+          if (dirPoint != null) {
+            obj = [dirPoint, ...this.bearingFor(dirPoint, "left_up", operate)];
+          }
+          break;
+        case "left_down":
+          dirPoint = this.points.find((e) => {
+            return (
+              e.x == item.x - this.interval &&
+              e.y == item.y + this.interval &&
+              e.exist &&
+              e.operate == operate
+            );
+          });
+          if (dirPoint != null) {
+            obj = [
+              dirPoint,
+              ...this.bearingFor(dirPoint, "left_down", operate),
+            ];
+          }
+          break;
+      }
+      return obj;
+    },
+    //返回权重
+    getCount(len, decrement = 0) {
+      if (len == 3) return 50 - decrement;
+      if (len == 4) return 70 - decrement;
+      if (len >= 5) return 999 - decrement;
+      return len;
+    },
+    //胜利判断
+    win(item, flag) {
+      let winArr = [];
+      this.direction.forEach((e) => {
+        let arr = this.bearingFor(item, e, flag);
+        if (arr.length == 4) {
+          if (flag == "user") this.state = 1;
+          else this.state = 2;
+          winArr = arr;
+          let canvas = document.getElementById("checkerboard");
+          let g2 = canvas.getContext("2d");
+
+          g2.beginPath();
+          g2.strokeStyle = "#fc011a";
+          g2.lineCap = "round";
+          g2.lineWidth = 8;
+          g2.moveTo(item.x, item.y);
+          g2.lineTo(arr[arr.length - 1].x, arr[arr.length - 1].y);
+          g2.closePath();
+          g2.stroke();
+        }
+      });
+    },
+    //重置
+    reset() {
+      let canvas = document.getElementById("checkerboard");
+      let g2 = canvas.getContext("2d");
+      g2.clearRect(0, 0, this.wh, this.wh);
+      this.mspaint();
+      this.getAllPoint();
+      this.state = 0;
+    },
+  },
+  mounted() {
+    this.mspaint();
+    this.getAllPoint();
+  },
+  watch: {
+    operate: {
+      handler(newVal, oldVal) {
+        if (newVal == "computer") {
+          setTimeout(() => {}, 200);
+        }
+      },
+      immediate: true,
+    },
+    state(newVal) {
+      if (newVal != 0) newVal == 1 ? alert("用户胜利") : alert("电脑胜利");
+    },
+    wh: {
+      handler(newVal) {
+        this.interval = (newVal - this.init_X_Y*2) / 15;
+        setTimeout(() => {
+          this.reset();
+        }, 100);
+      },
+      immediate: true,
+    },
+  },
+  computed: {
+    //未使用棋子位置
+    pointDiff() {
+      return this.points.filter((e) => !e.exist);
+    },
+    //用户点位
+    userPoint() {
+      return this.points.filter((e) => e.operate == "user");
+    },
+    computerPoint() {
+      return this.points.filter((e) => e.operate == "computer");
+    },
+  },
+};
+</script>
+
+<style>
+#checkerboard {
+  background-color: #e4caa6;
 }
 </style>
+