[JavaScript游戏开发] Q版地图上让英雄、地图都动起来

柔光的暖阳◎ 2023-10-14 14:34 10阅读 0赞

## 系列文章目录 ##

[第一章 2D二维地图绘制、人物移动、障碍检测][2D]  
[第二章 跟随人物二维动态地图绘制、自动寻径、小地图显示(人物红点显示)][Link 1]  
[第三章 绘制冰宫宝藏地图、人物鼠标点击移动、障碍检测][Link 2]  
[第四章 绘制Q版地图、键盘上下左右地图场景切换][_Q]  
[第五章 Q版地图上让英雄、地图都动起来][_Q]

--------------------

#### 文章目录 ####

*  系列文章目录
 *  前言
 *  一、本章节效果图
 *  二、任务拆解
 *   *  2.1、准备【物料层】
     *   *  2.1.1、在可视窗口里加载地图
         *  2.1.2、加载英雄对象
         *  2.1.3、 加载物料
         *  2.1.4、 编辑地图数据
     *  2.2、设置物料层可视区域的行、列
     *  2.3、调整地图和英雄的步骤跨度一致
     *  2.4、在键盘上下左右事件里，增加英雄动作的逻辑，融合英雄、地图的移动逻辑，增加边界检测
     *  2.5、看看最终效果
     *   *  2.5.1、荷花池边打卡
         *  2.5.2、西梁女国打卡
         *  2.5.3、跑累了在后花园休息
         *  2.5.4、休息完去大礼堂门口转一转
         *  2.5.5、最后在后山瞅一眼
 *  总结

--------------------

## 前言 ##

本章内容在第一章【2D二维地图绘制、人物移动、障碍检测】、第四章【绘制Q版地图、键盘上下左右地图场景切换】的基础上进行了升级，因此带大家回顾下这两章的内容

*  使用JavaScript绘制简单的二维地图（第一章实现）  
    采用二维数组存储地图信息，使用表格绘制地图，每个td单元格存储数据
 *  键盘上下左右控制（第一章实现，本章节增加地图层控制）  
    使用JavaScript keyPress键盘事件监听WASD键，按键触发时人物做出相应操作
 *  障碍物碰撞检测(采用格子碰撞检测，第一章实现)  
    人物下一步碰撞到障碍时，提示遇到障碍，终止人物运动
 *  增加地图层（第四章实现）  
    地图层与数据层（二维网格、人物）分离；主地图在初始化时加载，显示可视区域
 *  人物、地图跟随变动  
    保持人物在地图中心，检测特殊情况（ 进入边界内时保持地图不动、人物运动）

## 一、本章节效果图 ##

![请添加图片描述][545819b3e3d04e7cbb65853f77b07e04.gif]

## 二、任务拆解 ##

在第四章基础上继续添加任务  
1、准备【物料层】，设置为地图图片高、宽， 计算物料层2D网格的行、列  
2、设置物料层可视区域的行、列；  
3、调整地图和英雄的步骤跨度一致；  
4、在键盘上下左右事件里，增加英雄动作的逻辑，融合英雄、地图的移动逻辑，增加边界检测  
5、看看最终效果

### 2.1、准备【物料层】 ###

#### 2.1.1、在可视窗口里加载地图 ####

<div style="width: 95%; height: 95%; position: absolute; background-color: red; overflow: hidden;  " id="parentDiv">
        <div style="z-index: 1; height: 2480px; width: 3280px"  id="mapDiv" >
            <table class="main bg" id="map1001"></table>
        </div>
    </div>
    
    <style>
    
        table.main  {
         
            border-collapse: collapse;
        }
    
        table.main td {
         
            /*border: 0.5px red solid;*/  //调试地图时可开启
            width: 79px;
            height: 79px;
        }
    </style>

#### 2.1.2、加载英雄对象 ####

#### 2.1.3、 加载物料 ####

导入物料js
    <script src="../js/item.js"></script>

**item.js**

// 物品
    var item = {
        };
    
    item.initItem = function (){
        
        item.empty = 0;   //空地或草坪
        item.stone = 1;   //石头的标记是1
        item.factory = 2; //工厂
        item.girl = 3;  //女子
        item.girl_01 = 4; //女孩
        item.kt = 5; //空投大礼包
        item.lz = 6; //路障
        item.pz = 7; //喷子
        item.zz = 8; //沼泽
        item.hero = 9;   //英雄的标记是9
        item.heroHasPath = 10;   //自动寻径的英雄标记是10
        item.wdss = 11;  //僵尸的标记是11
        item.lzAndempty = 12;  //空白的路障
        item.datas = [];  // 物品的图片集合
    
        var itemPrefixPath = "../img/item/";
        item.datas[0] = "";  // 可行走的路径
        item.datas[1] = itemPrefixPath + "stone.png";
        item.datas[2] = itemPrefixPath + "gc.png";
        item.datas[3] = itemPrefixPath + "girl.png";
        item.datas[4] = itemPrefixPath + "girl.bmp";
        item.datas[5] = itemPrefixPath + "kt.png";
        item.datas[6] = itemPrefixPath + "lz.png";
        item.datas[7] = itemPrefixPath + "pz.png";
        item.datas[8] = itemPrefixPath + "zz.png";
        item.datas[9] = itemPrefixPath + "/spine/hero002.gif";
        item.datas[10] = itemPrefixPath + "/spine/tank.gif";
        item.datas[11] = itemPrefixPath + "wdss.gif";
        item.datas[12] = "";  //看不见的路障
    }

#### 2.1.4、 编辑地图数据 ####

根据地图绘制可行走路径，

/**
             * 加载地图数据
             * 0 可走的路径
             * 12 看不见的路障
             * @type {number[]}
             */
            var mapData = [
                [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12 ],
                [12, 12, 12, 12,  0, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0, 12, 12, 12, 12, 12 ],
                [12, 12, 12,  0,  0, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0, 12, 12, 12, 12, 12 ],
                [12, 12, 12,  0,  0,  0,  0,  0,  0,  0, 12, 12, 12, 12, 12, 12,  0, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0,  0,  0,  0,  0, 12, 12, 12, 12, 12 ],
                [12, 12, 12,  0,  0,  0,  0,  0,  0,  0, 12, 12, 12, 12, 12, 12,  0, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0,  0,  0,  0,  0,  0, 12, 12, 12, 12, 12 ],
                [12, 12,  0,  0,  0,  0,  0,  0,  0,  0, 12, 12, 12, 12, 12, 12,  0,  0,  0, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0, 12, 12,  0,  0, 12, 12, 12, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0,  0,  0,  0,  0,  0, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0, 12, 12, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0,  0, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0,  0,  0,  0,  0,  0, 12, 12,  0,  0,  0,  0,  0,  0,  0, 12, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0, 12, 12, 12, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0,  0, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0,  0,  0,  0, 12, 12, 12, 12, 12, 12, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0,  0,  0,  0, 12, 12,  0,  0,  0,  0,  0, 12, 12,  0,  0,  0,  0, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0,  0,  0,  0, 12,  0, 12, 12, 12, 12, 12, 12,  0,  0, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0,  0, 12,  0,  0,  0,  0,  0, 12, 12, 12, 12, 12,  0,  0, 12,  0,  0,  0, 12, 12, 12, 12, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0,  0, 12,  0,  0,  0,  0,  0, 12, 12, 12, 12, 12, 12,  0, 12,  0,  0,  0, 12, 12, 12, 12, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0,  0, 12, 12, 12, 12,  0, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0,  0,  0, 12, 12, 12, 12, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0,  0, 12, 12, 12, 12, 12, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0,  0,  0,  0, 12, 12, 12, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0, 12, 12,  0,  0,  0,  0, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0,  0, 12, 12, 12,  0, 12, 12,  0, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0, 12, 12, 12, 12,  0,  0,  0,  0,  0,  0,  0, 12, 12, 12,  0, 12, 12,  0, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0, 12, 12,  0,  0,  0,  0,  0,  0, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0,  0, 12, 12,  0,  0,  0,  0,  0,  0,  0, 12, 12,  0,  0,  0,  0,  0,  0, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12,  0,  0, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0, 12, 12, 12,  0,  0,  0,  0,  0,  0,  0, 12, 12,  0,  0,  0,  0,  0,  0, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0, 12, 12, 12, 12,  0,  0,  0,  0,  0, 12, 12, 12, 12, 12,  0,  0,  0,  0,  0, 12, 12,  0,  0,  0,  0,  0,  0, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0, 12, 12,  0,  0,  0,  0,  0, 12, 12, 12, 12, 12, 12, 12,  0, 12,  0,  0,  0,  0, 12,  0,  0,  0,  0, 12, 12, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0, 12,  0,  0, 12, 12, 12, 12, 12, 12, 12, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0,  0,  0,  0,  0,  0, 12, 12, 12, 12, 12, 12, 12, 12, 12,  0, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12 ],
                [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12 ]
            ]

### 2.2、设置物料层可视区域的行、列 ###

1、加载物料到地图对象里  
2、设置可视区域的行、列  
3、增加英雄与上下边框的距离计算方法  
4、增加英雄与左右边框的距离计算方法

// 地图对象
        var mapObj = {
        
             data: mapData,  //地图上的物品数据
             // 设定地图最大的高度
             maxRow: 8,
             // 地图的行
             row: function (){
        
                 return mapObj.data.length > this.maxRow ? this.maxRow : mapObj.data.length
             },
    
             // 设定地图最大的列
             maxCol: 12,
             //地图的列
             col: function (){
        
                 return mapObj.data[0].length > this.maxCol ? this.maxCol : mapObj.data[0].length;
             },
    
             // 英雄与上下边框的距离
             heroMarginTop: function () {
        
               return  Math.floor( this.row() / 2)
             },
             // 英雄与左右边框的距离
             heroMarginLeft: function () {
        
                 return  Math.floor( this.col() / 2)
             },
    
         }

### 2.3、调整地图和英雄的步骤跨度一致 ###

var stepDistance = 80;   // td的高、宽也设置成80或79px

### 2.4、在键盘上下左右事件里，增加英雄动作的逻辑，融合英雄、地图的移动逻辑，增加边界检测 ###

![在这里插入图片描述][3de104d8620f49aeb08caf9df287a366.png]  
1、在body标签上增加键盘事件  
2、在文档准备好之后开始执行初始化方法  
3、定义游戏窗口层、游戏地图层，并渲染页面  
4、定义 键盘上下左右事件  
5、在第四章基础上，上下左右事件里增加英雄动作的逻辑，融合英雄、地图的移动逻辑  
6、增加双重地图检测，保持英雄在地图的中心位置（地图、英雄一起移动）  
7、增加英雄边界检测（英雄在边界内时，只移动人物，不移动地图）  
8、简单的碰撞检测，下一步到达的目标只有是空地的情况，英雄才能移动

<body onkeydown="keydown(event)">
    		</body>
    
       		//文档准备好之后开始执行
            window.onload = function () {
        
                init();
            }
    		/**
             * 定义游戏窗口层、游戏地图层，并渲染页面
             */
            function init() {
        
    
                // 定义游戏窗口层
                parentDivEle = document.getElementById("parentDiv");
                // 定义游戏地图层
                mapDivEle = document.getElementById('mapDiv');
                // 获取 1001地图 Dom元素
                mapDiv = document.getElementById("map1001");
    
                parentDivEle.style.width =  (mapObj.col() + 1) * stepDistance  + "px";
                parentDivEle.style.height = (mapObj.row() + 1) * stepDistance + "px";
    
                item.initItem();
    
                //二维数组里，去初始化熊猫的位置
                mapObj.data[hero.currentPoint[0]][hero.currentPoint[1]] = item.hero;
    
                loadData();
            }
    
            /**
             * 人物移动方法
             * @param point
             */
            function operateHero(point) {
        
                mapObj.data[hero.currentPoint[0]][hero.currentPoint[1]] = item.hero
                mapObj.data[point[0]][point[1]] = item.empty
                loadData();
            }
    
    
            /**
             *  渲染地图
             * @param mapData
             */
            function loadData() {
        
                // 加载地图
                mapDivEle.style.background= 'url("../img/item/bg/os.jpg")';
    
                //渲染一行 row 列的数据
                var mapHTML = "";
                for (var i = 0; i < mapObj.data.length; i++) {
        
                    mapHTML += "<tr>";
                    for (var j = 0; j < mapObj.data[0].length ;j++) {
        
                        if (mapObj.data[i][j] == item.empty) {
           //只有点击路，才能自动寻径
                            mapHTML += "<td οnclick='tdClick(" + i + "," + j + ")'></td>";
                        } else if(  mapObj.data[i][j] == item.lzAndempty ) {
        
                            mapHTML += "<td></td>";
                        } else {
        
                            mapHTML += '<td><img src="'+ item.datas[mapObj.data[i][j]] +'" style="width: 100%; height: 100%; border-radius: 0%;" ></td>';
                        }
                    }
                    mapHTML += "</tr>";
                }
                // 渲染大地图
                mapDiv.innerHTML = mapHTML;
            }
    
    
            /**
             * 定义 键盘上下左右事件
             * 并判断边界
             * @param e
             */
            var keydown = function (e) {
        
                if (e.keyCode == 37) {
        
                    console.log("向左")
                    if( Number(mapDivEle.style.marginLeft.replaceAll("px", "")) - stepDistance < 0 ) {
        
    
                        var point = hero.currentPoint;
                        var xPoint = hero.currentPoint[1] -1;
                        var yPoint = hero.currentPoint[0];
                        if (checkStone(yPoint, xPoint)) {
        
                            console.log("碰撞到障碍了，停止动作")
                            return
                        }
                        console.log("移动后的位置：x:" + xPoint + " , y:" + yPoint)
                        if( xPoint <= (mapObj.data[0].length - mapObj.heroMarginLeft()) && Number(mapDivEle.style.marginLeft.replaceAll("px", "")) ) {
        
                            mapDivEle.style.marginLeft = Number(mapDivEle.style.marginLeft.replaceAll("px", "")) + stepDistance + "px";
                        }
                        hero.currentPoint = [yPoint, xPoint]
                        operateHero(point);
    
                    } else {
        
                        console.log("超出边界")
                    }
                } else if (e.keyCode == 38) {
        
                    console.log("向上")
                    if( Number(mapDivEle.style.marginTop.replaceAll("px", "") ) - stepDistance < 0 ) {
        
    
                        var point = hero.currentPoint;
                        var xPoint = hero.currentPoint[1];
                        var yPoint = hero.currentPoint[0] - 1;
                        if (checkStone(yPoint, xPoint)) {
        
                            console.log("碰撞到障碍了，停止动作")
                            return
                        }
                        console.log("移动后的位置：x:" + xPoint + " , y:" + yPoint)
                        if( yPoint <= (mapObj.data.length - mapObj.heroMarginTop()) &&  Number(mapDivEle.style.marginTop.replaceAll("px", "")) < 0 ) {
        
                            mapDivEle.style.marginTop = Number(mapDivEle.style.marginTop.replaceAll("px", "")) + stepDistance + "px";
                        }
                        hero.currentPoint = [yPoint, xPoint]
                        operateHero(point);
    
                    } else {
        
                        console.log("超出边界")
                    }
                } else if (e.keyCode == 39) {
        
                    console.log("向右")
                    if ( (parentDivEle.clientWidth) - mapDivEle.clientWidth <= Number(mapDivEle.style.marginLeft.replaceAll("px", ""))) {
        
    
                        var point = hero.currentPoint;
                        var xPoint = hero.currentPoint[1] + 1;
                        var yPoint = hero.currentPoint[0];
                        if (checkStone(yPoint, xPoint)) {
        
                            console.log("碰撞到障碍了，停止动作")
                            return
                        }
                        // 超出边界，只移动英雄， 不移动地图
                        if (  xPoint > mapObj.heroMarginLeft()  && (parentDivEle.clientWidth) - mapDivEle.clientWidth + stepDistance <= Number(mapDivEle.style.marginLeft.replaceAll("px", ""))) {
        
                            mapDivEle.style.marginLeft = Number(mapDivEle.style.marginLeft.replaceAll("px", "")) - stepDistance + "px";
                        }
    
                        console.log( "移动后的x轴距离:" + xPoint * stepDistance);
    
                        console.log("移动后的位置：x:" + xPoint + " , y:" + yPoint)
                        hero.currentPoint = [yPoint, xPoint]
                        operateHero(point);
    
                    } else {
        
                        console.log("超出边界")
                    }
                } else if (e.keyCode == 40) {
        
                    console.log("向下")
                    if( (parentDivEle.clientHeight) - mapDivEle.clientHeight  <= Number(mapDivEle.style.marginTop.replaceAll("px", "")) ) {
        
    
                        var point = hero.currentPoint;
                        var xPoint = hero.currentPoint[1];
                        var yPoint = hero.currentPoint[0] + 1;
                        if (checkStone(yPoint, xPoint)) {
        
                            console.log("碰撞到障碍了，停止动作")
                            return
                        }
                        console.log("移动后的位置：x:" + xPoint + " , y:" + yPoint)
    
                        // 超出边界，只移动英雄， 不移动地图
                        if( yPoint > mapObj.heroMarginTop()  &&  (parentDivEle.clientHeight) - mapDivEle.clientHeight + stepDistance <= Number(mapDivEle.style.marginTop.replaceAll("px", "")) ) {
        
                            mapDivEle.style.marginTop = Number(mapDivEle.style.marginTop.replaceAll("px", "")) - stepDistance + "px";
                        }
                        hero.currentPoint = [yPoint, xPoint]
                        operateHero(point);
    
                    } else {
        
                        console.log("超出边界")
                    }
                }
    
                loadData();
            }
    
            /**
             * 障碍检测（可加多个障碍条件）
             * @param yPoint
             * @param xPoint
             * @returns {boolean}
             */
            function checkStone(yPoint, xPoint) {
        
                return mapObj.data[yPoint][xPoint] != item.empty;
            }

### 2.5、看看最终效果 ###

#### 2.5.1、荷花池边打卡 ####

![在这里插入图片描述][6112d8e8e2114b5b88add7b9299230bf.png]

#### 2.5.2、西梁女国打卡 ####

![在这里插入图片描述][0628dc88ab4e497ca3ca85efa8eecd46.png]

#### 2.5.3、跑累了在后花园休息 ####

![在这里插入图片描述][0c068201ba224136b67315cfaf78d277.png]

#### 2.5.4、休息完去大礼堂门口转一转 ####

![在这里插入图片描述][4845855076384aa0b5e9c18789e1d321.png]

#### 2.5.5、最后在后山瞅一眼 ####

![在这里插入图片描述][725ebb89254c46589848d4a6335abbd6.png]

--------------------

## 总结 ##

以上就是今天要讲的内容，本文简单介绍Q版地图的绘制，地图/英雄的移动、边界检测，喜欢的同学可以参考第二张把自动寻径加上。  
原生JavaScript知识点就到这里结束了，以后前端知识点主要以Vue为主。

[2D]: https://blog.csdn.net/s445320/article/details/131816861
[Link 1]: https://blog.csdn.net/s445320/article/details/131881734
[Link 2]: https://blog.csdn.net/s445320/article/details/131947568
[_Q]: https://blog.csdn.net/s445320/article/details/132029317
[545819b3e3d04e7cbb65853f77b07e04.gif]: https://img-blog.csdnimg.cn/545819b3e3d04e7cbb65853f77b07e04.gif
[3de104d8620f49aeb08caf9df287a366.png]: https://img-blog.csdnimg.cn/3de104d8620f49aeb08caf9df287a366.png
[6112d8e8e2114b5b88add7b9299230bf.png]: https://img-blog.csdnimg.cn/6112d8e8e2114b5b88add7b9299230bf.png
[0628dc88ab4e497ca3ca85efa8eecd46.png]: https://img-blog.csdnimg.cn/0628dc88ab4e497ca3ca85efa8eecd46.png
[0c068201ba224136b67315cfaf78d277.png]: https://img-blog.csdnimg.cn/0c068201ba224136b67315cfaf78d277.png
[4845855076384aa0b5e9c18789e1d321.png]: https://img-blog.csdnimg.cn/4845855076384aa0b5e9c18789e1d321.png
[725ebb89254c46589848d4a6335abbd6.png]: https://img-blog.csdnimg.cn/725ebb89254c46589848d4a6335abbd6.png