diff --git a/src/App.vue b/src/App.vue index c1289b98e2c0bafe8eee191f1b39387eb730685e..bcd7b99b092d2712319ac048dde3b815145acb2d 100644 --- a/src/App.vue +++ b/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,24 +416,47 @@ export default { }, //胜利判断 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"); + 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(); + 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; + 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(); + } + }); } }); }, @@ -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")); }, }, };