项目前端

目录

• vue组件
  • 基础
  • 页面组件
  • 组件与链接关联
  • 按键绑定网址
  • 获取当前网页地址
  • bootstrap常用
  • ★实现地图以及地图刷新
    • 游戏基类
    • 游戏对象
      • 地图
        • 变量
        • 函数
      • null
      • 墙
      • ★PK页面

vue组件

基础

• 组件名两个大写字母
• template，script，style（带上scoped，给该css加上随机字符串，不影响到其他组件）
• 使用Bootstrap前端框架（将Bootstrap和popperjs/core装到vue依赖）
  • import boostrap的css和js
• 组件写好后要导入vue文件中
  • js中import该组件
  • 放入components关键字，才能在HTML中使用该组件标签
  • 写入html中
  • 

页面组件

• 习惯性放在views文件夹中
• 主界面一般叫Index，例如：PKIndexView.vue

组件与链接关联

• 在主页（App.vue）中包含router-view，在router文件夹中的index定义它。

  • import需要的组件

  • routers中定义路径

  • {path: "/",name: "home",redirect: "/pk/"  // 根地址重定向为pk目录
    }，
    {path: "/：catchAll(.*)",redirect: "/404/"  // 错乱地址重定向为404
    }
    

按键绑定网址

• navbar中修改link标签的href

• • 将a标签（即link标签），换成router-link标签（href换成:to），实现点导航栏不刷新。

  • 也可以使用name来实现,例如：

    • :to="{name: 'home'}"
      

获取当前网页地址

• import { useRoute } from 'vue-router'
  // 引入一个api：useRoute
  import { computed } from 'vue'
  // 实时计算用computedexport default {setup() {const route = useRoute();let route_name = computed(() => route.name)return {route_name}}
  }
  

• 在html中使用表达式，需要在属性前加冒号":"

  • :class="route_name == 'pk_index' ? 'nav-link active' : 'nav-link'" 
    // 如果route_name (即当前地址名) == pk_index (即/pk/的name)，则class中加active，否则不加
    

bootstrap常用

• 公共部分作为一个新组件，需要填充的内容在中

• card：框框，框住页面信息，放到

  下，container自适应大小

• 在 style中（CSS），修改边距等信息

  • 在需要修改的地方加class为xxx

  • 在style中写：div.xxx {}

    • 上边距：margin-top: 20px;
      

★实现地图以及地图刷新

• 代码脚本放在assets中，创建文件夹scripts存放所有脚本，images
• assets中写一个文件 AcGameObject.js，用于刷新
  • 把所有需要更新的游戏对象，存在数组内
  • 基类为AcGameObject
• 前端浏览器函数：requestAnimationFrame()，用于在下一次浏览器渲染之前，执行其中函数。
  • 即第一帧调用requestAnimationFrame后，在下一帧会执行其中内容
  • 递归来实现不停刷新：第一帧调用requestAnimationFrame后，在下一帧会执行step，执行step时 会再次调用requestAnimationFrame。

游戏基类

• start()
• update()
• on_destroy()，删除之前执行
• destroy()
• 属性：
  • 是否调用
  • 时间间隔timedelta
  • 上一次执行的时刻last_timestep
  • 当前函数执行的时刻timestep
  • 速度
• 在step()传入参数：当前函数执行的时刻，遍历所有物品，如果未执行start，则执行start。否则执行update
  • "of" 表示遍历值，"in" 遍历下标。
  • 最后更新last_timestep = timestep
  • 再次调用requestAnimationFrame，用于刷新

游戏对象

地图

assets/scripts下创建GameMap.js

import { AcGameObject } from "./AcGameObject.js"

如果要引进的类是export声明的，则import时需要大括号括起来

如果要引进的类是export default声明的，则不需要（export default 类似于 java里的public）

变量

• 画布： ctx
• 修改画布长宽： parent
• 绝对单位长度： L
• 行：rows
• 列：cols

函数

• start
• update_size() // 用于动态更新地图尺寸
• update
• render() // 渲染函数，每一帧执行一次，即放在update里执行

墙

★PK页面

• 将游戏区域新建成组件：PlayGround.vue
• 面板组件（游戏，结算，胜利等内容）GameMap.vue
  • 游戏画在canvas标签里（mdn中查标签作用）
• 在PK页面import导入PlayGround：
• auto表示居中，margin表示四边距
• 在PlayGround.vue导入GameMap.vue
• 在GameMap.vue导入GameMap.js中的类，创建游戏对象来实现类。
  • 导入ref来在vue中定义变量，并将变量与标签绑定
  • onMouted函数，即组件挂载完后，需要执行的操作
    • 创建游戏对象 new GameMap(xxxx)