Auto Commit

src/App.vue

@@ -18,14 +18,15 @@
 export default {
   data() {
     return {
-      wh: 999,//宽高
-      interval: 0,//间隔
-      init_X_Y: 10,//初始点
-      r: 12,//半径
-      points: [],//所有点位
-      exist_point: [],//存在点位（弃用）
+      wh: 500, //宽高
+      interval: 0, //间隔
+      init_X_Y: 10, //初始点
+      r: 12, //半径
+      points: [], //所有点位
+      exist_point: [], //存在点位（弃用）
       operate: "user", //用户或者电脑 computer
-      direction: [ //方位
+      direction: [
+        //方位
         "up",
         "down",
         "left",
@@ -39,11 +40,13 @@ export default {
     };
   },
   methods: {
-    handlerClick(e) { //用户点击棋盘
+    handlerClick(e) {
+      //用户点击棋盘
       if (this.state != 0) return;
       if (this.operate == "computer") return;
 
       for (let item of this.points) {
+        //点击可下区域周围生成棋子
         if (
           Math.abs(e.offsetX - item.x) < this.r &&
           Math.abs(e.offsetY - item.y) < this.r &&
@@ -58,8 +61,10 @@ export default {
           this.operate = "computer";
           item.exist = true;
           item.operate = "user";
+          console.log(item);
           this.win(item, "user");
           if (this.state == 0) this.computerMspaint();
+          break;
         }
       }
     },
@@ -108,6 +113,7 @@ export default {
           this.points.push({ x, y, exist: false });
         }
       }
+      console.log(this.points)
     },
     //计算点位权重
     checkPoint() {
@@ -116,21 +122,30 @@ export default {
       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;
+            //有电脑方棋子挡路权重-20
+            let arrLeft = this.bearingFor(arr[0], e, "computer").length;
+            let arrRight = this.bearingFor(
+              arr[arr.length - 1],
+              e,
+              "computer"
+            ).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) {
@@ -149,13 +164,16 @@ export default {
       }
 
       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;
+            let arrLeft = this.bearingFor(arr[0], e, "user").length;
+            let arrRight = this.bearingFor(
+              arr[arr.length - 1],
+              e,
+              "user"
+            ).length;
             if (arrLeft > 0) decrement += 20;
             if (arrRight > 0) decrement += 20;
           }
@@ -311,6 +329,8 @@ export default {
           });
           if (dirPoint != null) {
             obj = [dirPoint, ...this.bearingFor(dirPoint, "left", operate)];
+            if(operate=="user")
+            console.log(obj,'obj')
           }
           break;
         case "right":
@@ -396,13 +416,34 @@ export default {
     },
     //胜利判断
     win(item, flag) {
-      let winArr = [];
       this.direction.forEach((e) => {
-        let arr = this.bearingFor(item, e, flag);
+        if (flag == "user") {
+          console.log(this.userPoint)
+          this.points.filter((e) => (e.operate == "user")).forEach((user) => {
+            let arr = this.bearingFor(user, e, flag);
+            console.log(e, arr);
+            if (arr.length == 4) {
+              if (flag == "user") this.state = 1;
+              else this.state = 2;
+              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();
+            }
+          });
+        } else {
+          this.points.filter((e) => (e.operate == "computer")).forEach((computer) => {
+            let arr = this.bearingFor(computer, 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");
 
@@ -416,6 +457,8 @@ export default {
               g2.stroke();
             }
           });
+        }
+      });
     },
     //重置
     reset() {
@@ -425,6 +468,7 @@ export default {
       this.mspaint();
       this.getAllPoint();
       this.state = 0;
+      this.operate = "user";
     },
   },
   mounted() {
@@ -445,7 +489,9 @@ export default {
     },
     wh: {
       handler(newVal) {
-        this.interval = (newVal - this.init_X_Y*2) / 15;
+        console.log(newVal,'------')
+        this.interval = (newVal - this.init_X_Y * 2) / 15;
+        console.log(this.interval)
         setTimeout(() => {
           this.reset();
         }, 100);
@@ -460,10 +506,11 @@ export default {
     },
     //用户点位
     userPoint() {
-      return this.points.filter((e) => e.operate == "user");
+      console.log(this.points.filter((e) => (e.operate == "user")),'用户点位')
+      return this.points.filter((e) => (e.operate == "user"));
     },
     computerPoint() {
-      return this.points.filter((e) => e.operate == "computer");
+      return this.points.filter((e) => (e.operate == "computer"));
     },
   },
 };