Auto Commit

src/App.vue

 <script setup>
 import { onMounted, ref, computed } from "vue"
 import { is_empty, checkWin, is_black, is_white, robotPlay } from "./utils"
+import RandomTree from "./components/RandomTree.vue";
 // import { robotPlay } from './utils/api'
 // 配置
 const size = ref(20)
@@ -80,8 +81,8 @@ async function playChess(item, row, col) {
       <label for="win_size" class="space-nowrap">胜利棋数：</label>
       <input v-model="win_size" id="win_size" type="number" min="3" max="8">
     </p>
-    <button @click="confirm" class="space-nowrap mr-6px">重新开始</button>
-    <button @click="back" class="space-nowrap">返回上一步</button>
+    <button @click="confirm" class="space-nowrap mr-6px px-6px">重新开始</button>
+    <button @click="back" class="space-nowrap px-6px">返回上一步</button>
   </div>
   <div class="content border-top content-lattice">
     <p class="row" v-for="(lattice, r_i) in lattices" :key="r_i">
@@ -90,5 +91,6 @@ async function playChess(item, row, col) {
     </p>
     </p>
   </div>
+  <RandomTree />
 </template>
 

src/assets/main.css

@@ -9,6 +9,7 @@ html,
 body,
 #app {
   height: 100%;
+  position: relative;
 }
 
 #app {
@@ -36,6 +37,10 @@ body,
 .mr-6px {
   margin-right: 6px;
 }
+.px-6px{
+  padding-left: 6px;
+  padding-right: 6px;
+}
 
 input {
   width: 60px;

src/components/RandomTree.vue

+<template>
+    <canvas width="300" height="300" ref="canvas"></canvas>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue"
+const canvas = ref(null)
+
+onMounted(() => {
+    const c = document.querySelector("canvas")
+    const a = c.getContext('2d');
+    const ctx = canvas.value?.getContext('2d')
+    ctx.translate(canvas.value.width / 2, canvas.value.height)
+    ctx.scale(1, -1)
+
+    drawBranch(ctx, [0, 0], 15, 56, 90)
+})
+
+function drawRound(ctx, v0) {
+    ctx.beginPath();
+    ctx.arc(...v0, 6, 0, 2 * Math.PI);
+    ctx.fillStyle = "#8DB1A9"
+    ctx.fill();
+}
+
+/**
+ * 
+ * @param {CanvasRenderingContext2D} ctx 2d 绘图上下文
+ * @param {[number, number]} v0 起点坐标
+ * @param {number} thick 树枝粗细
+ * @param {number} len 一截树枝长短
+ * @param {number} dir 倾斜角度
+ */
+function drawBranch(ctx, v0, thick, len, dir) {
+    if ((thick < 5 && Math.random() < 0.3)) return;
+    if (thick < 2) {
+        drawRound(ctx, v0)
+        return;
+    }
+    ctx.beginPath();
+    ctx.moveTo(...v0);
+    const v1 = [
+        v0[0] + len * Math.cos((dir * Math.PI) / 180),
+        v0[1] + len * Math.sin((dir * Math.PI) / 180)
+    ]
+    ctx.lineTo(...v1);
+    ctx.strokeStyle = "#333";
+    ctx.lineCap = "round";
+    ctx.lineWidth = thick;
+    ctx.stroke();
+
+    drawBranch(ctx, v1, thick * 0.8, len * 0.8, dir + Math.random() * 46);
+    drawBranch(ctx, v1, thick * 0.8, len * 0.8, dir - Math.random() * 46);
+}
+</script>
+
+<style>
+canvas {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 1px solid #999;
+}
+</style>
\ No newline at end of file