目录
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' // 实时计算用computed export 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)
