3.1 创建菜单与游戏页面（上）

简介

这节课只涉及前端知识

bootsrap是让程序员实现美工的效果
建议先不跟着敲代码，可以先写笔记
工欲善其事，必先利其器；

启动脚手架 ，powershell中使用 vue ui
上节课实现前端最终的效果，如下

实现导航栏

分析页面：
网站导航栏都一样，先实现导航栏组件NavBar.vue；接在在bootstrap找到一个合适的导航栏模板前端代码；粘贴到标签中

导航栏都是一样的，不怎么改变，因此可以把导航栏提取出来，作为一个组件，复用。

创建一个组件NavBar

在App.vue中import NavBar from './components/NavBar.vue'

利用bootsrap来快速实现
https://v5.bootcss.com/docs/components/navbar/

导航栏分析：

对应要写的各个页面，vue文件,推荐在views文件夹创建对应的文件夹。每个页面包含三个标签

router

知识点1：写完每个页面，需要和地址url关联起来 ；会使用到router路由组件。
<router-view>会自动根据网址来变。定义的方式在router/index.js文件定义；

router-link

知识点2：实现点击每个导航栏，填写<a href>标签就跳转相应页面；
但是页面会重新刷新，前后端分离为了不让页面刷新；在NavBar.vue页面使用router-link标签，代替<a href>
<router-link class="navbar-brand" :to="{ name: 'home' }">King of Bots</router-link>

bootsrap 卡片

知识点3：内容页面使用card，在bootstrap框起来-

bootsrap 网址：https://v5.bootcss.com/docs/components/card/
每个页面的内容都要使用card框起来。会发现这个框是公共的部分。因此单做一个组件ContentField.vue

<template>
    <!-- 这可以当作公共内容，实现一个白框 -->
    <div class="container">
        <div class="card">
            <div class="card-body">
                <!-- 框内填充的内容写在slot里面 -->
                <slot></slot>  

            </div>
        </div>
    </div>
</template>

<script>
</script>

<style>
div.content-field {
     
    margin-top: 20px;
}
</style>

之后把每个页面使用这个组件就可以。
例如，NotFound页面先引入组件;

<template>
    <ContentField>
        404 Not Found
    </ContentField>
</template>

<script>


import ContentField from '../../components/ContentField.vue'

export default {
   

    components: {
   
        ContentField
    }
}
</script>

<style>
</style>

另外一个功能就是点击每个导航栏，显示聚焦效果，高亮；
在标签里面加active;
点击那个页面，使得哪个栏高亮；
方法：
用到userRoute API； 在NavBar中。

import {
    useRoute } from "vue-router"
// 实时计算
import {
    computed } from "vue"

export default {
   
    setup() {
   
        const route = useRoute();
        //获得当前页面的名称
        let route_name = computed(() => route.name)
        return {
   
            route_name
        }
    }
}

获取之后怎样使用？
需要在<router-link >里面加：表达式，写法如下；
<router-link :class="route_name == 'pk_index' ? 'nav-link active' : 'nav-link'" :to="{ name: 'pk_index' }">对战</router-link>

实现游戏地图

13*13 的地图，周围一圈都是墙，里面有些随机是墙。保证从左下角能够走到右上角。
生成合法地图，每次刷新都可以生成新的地图。

游戏里面怎移动的？
游戏动画的原理；
假设每秒刷新60次，每秒画面渲染60次，60帧；每一帧的位置在哪里，放60张图片就会显示物体在移动；
需要写一个基类（工具），实现公共的功能；移动的物体。
每秒刷新60次；每个物体都需要60次；
代码脚本放到assest文件、里面
每一帧都要渲染一次

移动的基类：

const AC_GAME_OBJECTS = [];

export class AcGameObject {
   
    constructor() {
   
        AC_GAME_OBJECTS.push(