SpringBoot学习笔记-创建菜单与游戏页面（上）

import { createRouter, createWebHistory } from "vue-router";
import PKIndexView from "@/views/pk/PKIndexView";
import RecordIndexView from "@/views/record/RecordIndexView";
import RanklistIndexView from "@/views/ranklist/RanklistIndexView";
import MyBotsIndexView from "@/views/user/mybots/MyBotsIndexView";
import NotFoundView from "@/views/error/NotFoundView";

const routes = [
  {
    path: "/",
    name: "home",
    redirect: "/pk/",  // 如果是根路径则重定向到对战页面
  },
  {
    path: "/pk/",
    name: "pk_index",
    component: PKIndexView,
  },
  {
    path: "/record/",
    name: "record_index",
    component: RecordIndexView,
  },
  {
    path: "/ranklist/",
    name: "ranklist_index",
    component: RanklistIndexView,
  },
  {
    path: "/user/mybots/",
    name: "user_mybots_index",
    component: MyBotsIndexView,
  },
  {
    path: "/404/",
    name: "404",
    component: NotFoundView,
  },
  {
    path: "/:catchAll(.*)",
    name: "others",
    redirect: "/404/",  // 如果不是以上路径之一说明不合法，重定向到404页面
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/dist/js/bootstrap";

createApp(App).use(store).use(router).mount("#app");

const AC_GAME_OBJECTS = []; // 存储所有运动对象

export class AcGameObject {
  constructor() {
    AC_GAME_OBJECTS.push(this);
    this.timedelta = 0;  // 当前帧距离上一帧的时间间隔，浏览器每一帧时间间隔可能有误差不一样因此需要记录
    this.has_called_start = false;  // 是否执行过start函数
  }

  start() {  // 只在对象创建时执行一次
  }

  update() {  // 除了第一帧外每一帧执行一次
  }

  on_destroy() {  // 在删除对象之前可能需要执行的某些操作
  }

  destroy() {  // 将当前对象删除，即从AC_GAME_OBJECTS中移除
    this.on_destroy();

    for (let i in AC_GAME_OBJECTS) {  // 用in遍历下标
      const obj = AC_GAME_OBJECTS[i];
      if (obj == this) {
        AC_GAME_OBJECTS.splice(i);
        break;
      }
    }
  }
}

let last_timestamp;  // 上一帧执行的时刻

const step = (timestamp) => {  // 每次调用会传入当前时刻
  for (let obj of AC_GAME_OBJECTS) {  // 用of遍历值
    if (!obj.has_called_start) {
      obj.start();
      obj.has_called_start = true;
    } else {
      obj.timedelta = timestamp - last_timestamp;
      obj.update();
    }
  }
  last_timestamp = timestamp;
  requestAnimationFrame(step);  // 递归调用
}

requestAnimationFrame(step);

import { AcGameObject } from "./AcGameObject";

export class GameMap extends AcGameObject {
  constructor(ctx, parent) {  // ctx表示画布，parent表示画布的父元素
    super();

    this.ctx = ctx;
    this.parent = parent;
    this.L = 0;  // 一个单位的绝对长度
  }

  start() {}

  update() {
    this.render();
  }

  render() {}
}

import { AcGameObject } from "./AcGameObject";

export class GameMap extends AcGameObject {
  constructor(ctx, parent) {  // ctx表示画布，parent表示画布的父元素
    super();

    this.ctx = ctx;
    this.parent = parent;
    this.L = 0;  // 一个单位的绝对长度
    this.rows = 13;  // 地图的行数
    this.cols = 13;  // 地图的列数
  }

  start() {}

  update_size() {  // 每一帧更新地图大小
    this.L = parseInt(Math.min(this.parent.clientWidth / this.cols, this.parent.clientHeight / this.rows));
    this.ctx.canvas.width = this.L * this.cols;
    this.ctx.canvas.height = this.L * this.rows;
  }

  update() {
    this.update_size();
    this.render();
  }

  render() {
    this.ctx.fillStyle = "green";
    this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);  // 参数分别表示左上角横纵坐标和边长
  }
}

import { AcGameObject } from "./AcGameObject";

export class GameMap extends AcGameObject {
  constructor(ctx, parent) {  // ctx表示画布，parent表示画布的父元素
    ...
  }

  start() {}

  update_size() {  // 每一帧更新地图大小
    ...
  }

  update() {
    ...
  }

  render() {
    const color_even = "#AAD752", color_odd = "#A2D048";
    for (let r = 0; r < this.rows; r++) {
      for (let c = 0; c < this.cols; c++) {
        if ((r + c) % 2 == 0) {
          this.ctx.fillStyle = color_even;
        } else {
          this.ctx.fillStyle = color_odd;
        }
        // canvas坐标系横轴是x，纵轴是y，与数组坐标系不同
        this.ctx.fillRect(c * this.L, r * this.L, this.L, this.L);
      }
    }
  }
}

import { AcGameObject } from "./AcGameObject";

export class Wall extends AcGameObject {
  constructor(r, c, gamemap) {  // 需要传入第几行第几列以及GameMap
    super();

    this.r = r;
    this.c = c;
    this.gamemap = gamemap;
    this.color = "#B47226";
  }

  update() {
    this.render();
  }

  render() {
    const L = this.gamemap.L, ctx = this.gamemap.ctx;
    ctx.fillStyle = this.color;
    ctx.fillRect(this.c * L, this.r * L, L, L);
  }
}

import { AcGameObject } from "./AcGameObject";
import { Wall } from "./Wall";

export class GameMap extends AcGameObject {
  constructor(ctx, parent) {  // ctx表示画布，parent表示画布的父元素
    super();

    ...

    this.inner_walls_count = 20;  // 地图内部的随机障碍物数量，需要是偶数
    this.walls = [];  // 所有的障碍物
  }

  check_connectivity(g, sx, sy, tx, ty) {  // 用flood fill算法判断两名玩家是否连通
    if (sx == tx && sy == ty) return true;
    g[sx][sy] = true;
    let dx = [-1, 0, 1, 0], dy = [0, 1, 0, -1];
    for (let i = 0; i < 4; i++) {
      let nx = sx + dx[i], ny = sy + dy[i];
      if (!g[nx][ny] && this.check_connectivity(g, nx, ny, tx, ty))  // 地图已经有边界标记了因此无需判断越界
        return true;
    }
    return false;
  }

  create_walls() {
    const g = [];  // 表示每个位置是否是障碍物

    // 初始化障碍物标记数组
    for (let r = 0; r < this.rows; r++) {
      g[r] = [];
      for (let c = 0; c < this.cols; c++) {
        g[r][c] = false;
      }
    }

    // 给地图四周加上障碍物
    for (let r = 0; r < this.rows; r++) {
      g[r][0] = g[r][this.cols - 1] = true;
    }

    for (let c = 0; c < this.cols; c++) {
      g[0][c] = g[this.rows - 1][c] = true;
    }

    // 添加地图内部的随机障碍物，需要有对称性因此枚举一半即可，另一半对称生成
    for (let i = 0; i < this.inner_walls_count / 2; i++) {
      for (let j = 0; j < 10000; j++) {
        let r = parseInt(Math.random() * this.rows);
        let c = parseInt(Math.random() * this.cols);
        if (g[r][c] || g[c][r]) continue;
        if (r == this.rows - 2 && c == 1 || r == 1 && c == this.cols - 2) continue;  // 判断是否覆盖到出生地
        g[r][c] = g[c][r] = true;
        break;
      }
    }

    const g_copy = JSON.parse(JSON.stringify(g));  // 复制一份g，可以先转换成json再转回来就是一份新的了
    if (!this.check_connectivity(g_copy, this.rows - 2, 1, 1, this.cols - 2)) return false;

    // 创建障碍物
    for (let r = 0; r < this.rows; r++) {
      for (let c = 0; c < this.cols; c++) {
        if (g[r][c]) {
          this.walls.push(new Wall(r, c, this));
        }
      }
    }

    return true;
  }

  start() {
    for (let i = 0; i < 10000; i++) {  // 暴力枚举直至生成合法的地图
      if (this.create_walls())
        break;
    }
  }

  update_size() {  // 每一帧更新地图大小
    ...
  }

  update() {
    ...
  }

  render() {
    ...
  }
}

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: (config) => {
    config.plugin("html").tap((args) => {
      args[0].title = "King of Bots";
      return args;
    });
  },
});