创建菜单与游戏界面

本节课任务，实现游戏界面，页面导航栏
先写前端在写后端。从上往下，减少代码重构
导航栏专门拿出来，做组件
前端的框架，模仿一遍
格式：组件名称需要有两个大写字母
bootstrap 实现美工功能
**浏览器页面切换快捷键 ctrl tab **
记得导入 bootstrap 依赖，使样式发生变化
需要五个页面 对战，对局列表，排行版，我的bots，不合法页面
../ 返回上级目录
写好页面 添加到重定向router中

**复习添加组件 使用component，在app.vue中导入 **
router-view 自动根据网址变化 变化规则在router中定义
container-fluid 组件靠左一些 备注 container是一个自定义大小的容器
router-view 当你的路由path 与访问的地址相符时，会将指定的组件替换该 router-view

自己的憨憨错误，在app.vue删掉router view
前后端不分离 单页面的应用
记录router-link标签的使用 router-link :to="{name:'要重定向的标签名字'}"
card组件 将一片区域框起来
**user bot 多一层目录 记得../ **

active 设置选中高亮。首先取得页面使用 useroute。实时计算的函数 computed
**希望使用表达式 属性前用冒号 :class v-bind: **
**游戏环境构建 首先创造基类 AcGameObject **
**js中 of遍历的是值 in 遍历下标 for let obj of XXX **
小结：知识点很多，无论怎么样，都要花很长的时间去学习，去理解。无论是边看边敲代码，还是看一部份，敲一部分代码，都要耐心去理解
现在，自己的原则是，抓取自己需要的，理解框架流程。让自己可以简单持久
这节课的任务 实现两个对象 地图 和墙
js的引用 import 。如果是default，不需要加括号
**设计地图，script设置变量，挂载 template **
创建地图 canvas。在pk页面上，设计不同的页面
MDN 搜索自己需要的html，js前置知识，如canvas
思路梳理 pk页面vue调用 playground。playground包含gameMap和其他。gameMap有vue与js，vue调用js

<template>
    <!-- 建立关联 -->
    <div ref="parent" class="gamemap">
        <canvas ref="canvas">
            <h1>xianyv map route </h1>
        </canvas>
    </div>
</template>

<script>
// 引入GameMap js 。构造 template 与 js的联系。引用需要vue的属性 ref
// 挂载后的入口 onmounted
import {ref,onMounted} from 'vue';
import {GameMap} from "@/assets/scripts/GameMap.js";
export default {
    setup(){
        let parent= ref( null );
        let canvas= ref( null );
        // 当挂载后需要完成的操作
        onMounted(()=>{
            // new一个对象  传参数
            new GameMap(canvas.value.getContext('2d'),parent.value)
        
        });

        return {
            parent,
            canvas
        }
    }
}
</script>

<style scoped>
    div.gamemap{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

map.js 问题所在。换成别人的就没问题。玄学问题，this.cols显示Nan

import { AcGameObject } from "./AcGameObject";
// 类名定义错误。晕。是GameMap
export class Game extends AcGameObject{
    // 引入画布  画布的父元素  控制画布的大小
    constructor(ctx,parent){
        // 先执行基类的构造函数
        super();

        this.ctx=ctx;
        this.parent=parent;
        this.L=0;

        this.rows=13;
        this.clos=13;
    }
    
    start(){

    }

    update_size(){
        // 辅助函数  更新边长
        this.L=Math.min(this.parent.clientWidth/this.cols,this.parent.clientHeight/this.rows)
        console.log("xianyv test map " )
        // 求画布的长宽  小正方形的长度乘以列数 行数
        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)
    }
}

注意canvas 的坐标系
import {AcGameObject} from "@/assets/scripts/AcGameObject"
https://www.cnblogs.com/lyls/p/7852350.html import加不加大括号的区别

最后总结，多敲多练，抄一遍差不多就能理解大致的思路流程，就能学会了。关闭vue ctrl c