Skip to content

V
VueJS

无情编码工具人 / VueJS
与 Fork 源项目一致

Fork自 inscode / VueJS

通知 1
Star 2
Fork 3
V
VueJS
提交 aac03165 编写于 作者: 6 644a732612700e0fdb30d839
浏览文件
操作

Auto Commit

上级 a5450115
隐藏空白更改
内联 并排
Showing with 468 addition and 38 deletion
src/App.vue
浏览文件 @ aac03165
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>
<template> <template>
<header> <div>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /> <div>
<input v-model="wh" name="wh" type="number" />
<div class="wrapper"> <button @click="reset">重置</button>
<HelloWorld msg="You did it!" />
</div> </div>
</header>
<main> <canvas
<TheWelcome /> id="checkerboard"
</main> :width="wh"
:height="wh"
@click="handlerClick"
></canvas>
</div>
</template> </template>
<style scoped> <script>
header { export default {
line-height: 1.5; 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 { for (let item of this.points) {
display: block; if (
margin: 0 auto 2rem; 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) { let right_down = this.points.find((e) => {
header { return (
display: flex; e.x == item.x + this.interval &&
place-items: center; e.y == item.y + this.interval &&
padding-right: calc(var(--section-gap) / 2); !e.exist
} );
});
.logo { if (right_down) arr.push(right_down);
margin: 0 2rem 0 0;
} let left = this.points.find((e) => {
return e.x == item.x - this.interval && e.y == item.y && !e.exist;
header .wrapper { });
display: flex; if (left) arr.push(left);
place-items: flex-start;
flex-wrap: wrap; 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> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或