WKY

The King of Bots

 
  • Nov 25, 2025

前后端分离小游戏，技术栈：SpringBoot，WebSocket，微服务，Vue

PK模块：匹配界面（微服务）、实况直播（WebSocket）、真人PK（WebSocket）

对战列表模块：录像回放

排行榜模块：Bot列表

用户中心：注册、登录、我的Bot、Bot的记录

前后端不分离：用户操作（提交url）→服务器返回html页面

前后端分离：用户操作（提交url）→前端静态html页面加载→前端发出HTTP请求调用后端 API→后端返回json格式数据给前端→前端渲染数据到页面。

配置Git环境

（1）在本地右键，选择Git bash， 进入家目录，生成秘钥：ssh-keygen

（2）进入.ssh隐藏文件，到公钥文件id_rsa.pub取出公钥

（3）点击gitHub右上方头像，进入setting-Access-SSH and GPG keys，将公钥粘贴进去

创建项目

创建本地仓库

（1）在本地创建项目kob：进入文件夹后右键，选择Git bash， git init后创建vim readme.md，通过git status可以看到新建的文件，然后git add .，git commit -m "创建项目" ，本地仓库创建完毕之后，远程连接gitHub仓库，并push本地仓库的内容

（2）有了远程仓库，直接用git clone（等价于git init+git remote add+git pull），每次写代码前git pull，写完之后commit并git push

创建项目后端backend

（1）JDK1.8，java8，添加Spring Web、thymeleaf（实际并不需要，前后端不分离用这个）依赖，create之后，配置Maven，运行BackendApplication.java文件

（2）一个地址栏中的url对应一个函数

  • 前后端不分离实例（用的@Controller，而前后端分离用@RestController）：

函数index()对应127.0.0.1:8080/pk/index/

@Controller
@RequestMapping("/pk/")
public class IndexController {
    @RequestMapping("index/")
    public String index() {
        return "pk/index.html";
    }
}

在浏览器输入网址127.0.0.1:8080/pk/index/（注意最后有/，因为后端是index/，如果不想要有/则后端改为index），输出resources/templates/pk/index.html中的内容

  • 前后端分离（@RestController = @Controller + @ResponseBody）

返回值处理方式 @Controller: 返回字符串时被视作视图名称（模板名称） 需要手动添加 @ResponseBody 才能返回 JSON/文本数据 @RestController: 所有方法默认返回数据内容，直接写入响应体 适合构建 RESTful API 接口

@RestController
@RequestMapping("/pk/")
public class BotInfoController {
    @RequestMapping("getbotinfo/")
    public String getBotInfo() {
        return "hhhhh";
    }
}

在浏览器输入网址127.0.0.1:8080/pk/getbotinfo/

创建项目web端和acapp端

windows推荐powershell或者cmd，git bash有些指令不兼容

（1）如果没有Node.js，安装

（2）如果没有@vue/cli（如果后续报错安装早期的@vue/cli@5.0.8）：npm i -g @vue/cli@5.0.8

（3）启动图形化项目管理界面vue ui，如果报错：使用管理员身份打开终端，输入set-ExecutivePlicy RemoteSigned，然后按y（也可以直接在终端操作不需要ui）

在kob下创建web：选择手动安装，选择插件vue-router、vuex，依赖安装jQuery3.7.1（npm install jquery --save）、bootstrap5.1.3（npm install bootstrap@5 --save）

在kob下创建acapp：选择手动安装，插件选择 vuex

推荐：用终端，选择手动安装然后选择插件，再npm安装依赖

前后端交互

解决跨域

前端界面

从上至下开发：导航栏组件，页面组件（每个页面都有card框起来，因此将其抽离出来：ContentField组件，不同页面用不同slot填充）

App.vue中， 为导航栏组件， 为页面组件（设置路由path，但是每次点击之后会刷新，前后端分离项目可以不用，因此用在NavBar中用router-link代替a标签实现点击之后不刷新）：

<a class="navbar-brand" href="/">King Of Bots</a>
<router-link class="navbar-brand" :to="{name: 'home'}">King Of Bots</router-link>

游戏动画原理

  • 帧率概念: 游戏每秒刷新60次（60帧/秒），每帧渲染一张图片
  • 运动实现:
    • 通过计算物体在每一帧的位置变化
    • 快速连续播放多帧形成动画效果
    • 使用requestAnimationFrame实现递归渲染
  • 速度计算: 需要考虑帧间时间间隔（time delta），用速度×时间间隔计算位移
Search