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

系列文章目录

第一章 2D二维地图绘制、人物移动、障碍检测
第二章 跟随人物二维动态地图绘制、自动寻径、小地图显示(人物红点显示)
第三章 绘制冰宫宝藏地图、人物鼠标点击移动、障碍检测
第四章 绘制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键,按键触发时人物做出相应操作
  • 障碍物碰撞检测(采用格子碰撞检测,第一章实现)
    人物下一步碰撞到障碍时,提示遇到障碍,终止人物运动
  • 增加地图层(第四章实现)
    地图层与数据层(二维网格、人物)分离;主地图在初始化时加载,显示可视区域
  • 人物、地图跟随变动
    保持人物在地图中心,检测特殊情况( 进入边界内时保持地图不动、人物运动)

一、本章节效果图

请添加图片描述

二、任务拆解

在第四章基础上继续添加任务
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、加载英雄对象

    <script>
    // 英雄对象
     var hero = {
         currentPoint : [4, 6],   //初始化英雄的位置是 4,6
     }
     </script>

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、在键盘上下左右事件里,增加英雄动作的逻辑,融合英雄、地图的移动逻辑,增加边界检测

在这里插入图片描述
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、荷花池边打卡

在这里插入图片描述

2.5.2、西梁女国打卡

在这里插入图片描述

2.5.3、跑累了在后花园休息

在这里插入图片描述

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

在这里插入图片描述

2.5.5、最后在后山瞅一眼

在这里插入图片描述


总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/62482.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序中的全局数据共享(状态管理)使用介绍

开发工具&#xff1a;微信开发者工具Stable 1.06 一、状态管理简介 微信小程序全局状态是指可以在不同页面之间共享的数据或状态。 它可以存储用户的登录状态、个人信息、全局配置信息等。 二、安装MobX 1、安装NPM 在资源管理器的空白地方点右键&#xff0c;选择“在外部…

Oracle锁的学习

Oracle数据库中的锁机制 数据库是一个多用户使用的共享资源。当多个用户并发地存取数据时&#xff0c;在数据库中就会产生多个事务同时存取同一数据的情况。若对并发操作不加控制就可能会读取和存储不正确的数据&#xff0c;破坏数据库的一致性。 在数据库中有两种基本的锁类…

Grafana 曲线图报错“parse_exception: Encountered...”

问题现象 配置的Grafana图报错如下&#xff1a; 原因分析 点开报错&#xff0c;可以看到报错详细信息&#xff0c;是查询语句的语法出现了异常。 变量pool的取值为None 解决方案 需要修改变量pool的查询SQL&#xff0c;修改效果如下&#xff1a; 修改后&#x…

第4章 变量、作用域与内存

引言 由于js是一门只有在声明变量后才能明确类型的语言&#xff0c;并且在任意时刻都可以改变数据类型。这也引起了一些问题 原始值与引用值 原始值就是基本数据类型&#xff0c;引言值就是复杂数据类型 变量在赋值的时候。js会判断如果是原始值&#xff0c;访问时就是按值访问…

【Linux】网络套接字知识点补足

目录 1 地址转换函数 1.1 字符串转in_addr的函数: 1.2 in_addr转字符串的函数: 1.3 关于inet_ntoa 2 TCP协议通讯流程 1 地址转换函数 本节只介绍基于IPv4的socket网络编程,sockaddr_in中的成员struct in_addr sin_addr表示32位 的IP 地址但是我们通常用点分十进制的字符串…

认识 spring AOP (面向切面编程) - springboot

前言 本篇介绍什么是spring AOP, AOP的优点&#xff0c;使用场景&#xff0c;spring AOP的组成&#xff0c;简单实现AOP 并 了解它的通知&#xff1b;如有错误&#xff0c;请在评论区指正&#xff0c;让我们一起交流&#xff0c;共同进步&#xff01; 文章目录 前言1. 什么是s…

js-6:typeof和instanceof的区别

1、typeof typeof操作符返回一个字符串&#xff0c;表示未经计算的操作数的类型。 operand表示对象或原始值的表达式&#xff0c;其类型将被返回。 从上面的例子可以看出&#xff0c;前6个都是基础数据类型&#xff0c;虽然typeof null为object&#xff0c;但这只是javascrip…

Qt扫盲-Model/View入门

Model/View 编程入门 一、概述二、介绍1. 标准部件2. Model/View 控件3. Model/View控件概述4. 在表格单和 model 之间使用适配器 Adapters 三、 简单的 model / view 应用程序示例1. 一个只读表2. 使用role扩展只读示例3. 表格单元中的时钟4. 为列和行设置标题5. 最小编辑示例…

20天学会rust(二)rust的基础语法篇

在第一节&#xff08;20天学rust&#xff08;一&#xff09;和rust say hi&#xff09;我们配置好了rust的环境&#xff0c;并且运行了一个简单的demo——practice-01&#xff0c;接下来我们将从示例入手&#xff0c;学习rust的基础语法。 首先来看下项目结构&#xff1a; 项目…

OpenUSD联盟:塑造元宇宙的3D未来

一、引言 近日&#xff0c;美国3D内容行业的五家主要公司苹果、英伟达、皮克斯、Adobe和Autodesk联合成立了OpenUSD联盟&#xff08;AOUSD&#xff09;。这一联盟的成立标志着元宇宙领域的一次重要合作&#xff0c;旨在制定元宇宙的3D图形标准。本文将深入探讨OpenUSD联盟的目…

MySQL 在CentOS下安装

yum安装 1、yum源安装 yum install mariadb-server2、启动MySQL服务 systemctl start mariadb3、查看运行状态 systemctl status mariadb4、设置初始密码 mysql -u rootuse mysql;update user set passwordpassword("root")where userroot;flush privileges;e…

车载软件架构 —— 闲聊几句AUTOSAR OS(十)

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 没有人关注你。也无需有人关注你。你必须承认自己的价值,你不能站在他人的角度来反对自己。人生在世,最怕的就是把别人的眼光当成自己生活的唯一标…

嵌入式开发学习(STC51-16-ADC模数转换)

内容 通过ADC转换电路采集电位器AD值&#xff0c;将采集的AD值转换成电压值&#xff0c;通过数码管显示出来&#xff1b; 采集光敏电阻的AD值&#xff1b; 采集热敏电阻的AD值&#xff1b; 采集外部通道AIN3的电压值&#xff1b; 为了方便显示&#xff0c;我们可以通过独立…

C高级 作业 day3 8/4

1.整理思维导图 2.判断家目录下&#xff0c;普通文件的个数和目录文件的个数 1 #!/bin/bash2 arr(ls -l ~ | cut -d r -f 1 | grep -w d )3 arr1(ls -l ~ | cut -d r -f 1 | grep -w -)4 echo "目录文件个数为 ${#arr[*]}"5 echo "普通文件个数为 ${#arr1[*]}&q…

小程序开发趋势:探索人工智能在小程序中的应用

第一章&#xff1a;引言 小程序开发近年来取得了快速的发展&#xff0c;成为了移动应用开发的重要一环。随着人工智能技术的飞速发展&#xff0c;越来越多的企业开始探索如何将人工智能应用于小程序开发中&#xff0c;为用户提供更智能、便捷的服务。本文将带您一起探索人工智能…

40.利用欧拉法求解微分方程组(matlab程序)

1.简述 求解微分方程的时候&#xff0c;如果不能将求出结果的表达式&#xff0c;则可以对利用数值积分对微分方程求解&#xff0c;获取数值解。欧拉方法是最简单的一种数值解法。前面介绍过MATLAB实例讲解欧拉法求解微分方程&#xff0c;今天实例讲解欧拉法求解一阶微分方程组。…

js-7:javascript原型、原型链及其特点

1、原型 JavaScript常被描述为一种基于原型的语言-每个对象拥有一个原型对象。 当试图访问一个对象的属性时&#xff0c;它不仅仅在该对象上搜寻&#xff0c;还会搜寻该对象的原型&#xff0c;以及该对象的原型的原型&#xff0c;依次层层向上搜索&#xff0c;直到找到一个名字…

vs导出和导入动态库和静态库

1. 动态库和导出和导入 1.1 动态库的导出 1. 创建新项目 新建新项目&#xff0c;选择动态链接库&#xff08;DLL&#xff09;。 填写项目名称&#xff0c;并选择项目保存的路径&#xff0c;然后点击创建。 创建完成后&#xff0c;会自动生成如下所示文件&#xff0c;可以根据…

LabVIEW使用DSA技术从X射线图像测量肺气容量

LabVIEW使用DSA技术从X射线图像测量肺气容量 相衬X射线&#xff08;PCX&#xff09;成像技术利用相邻介质之间折射率的微小差异来增强传统X射线成像通常不可见的物体的边界。事实证明&#xff0c;这一进展在一系列生物医学和材料科学中非常有益于材料表征、疾病检测以及解剖形…

C语言 — 动态内存管理(动态内存函数)

前言 本期分为三篇介绍动态内存管理相关内容&#xff0c;关注博主了解更多 博主博客链接&#xff1a;https://blog.csdn.net/m0_74014525 本期介绍动态内存函数&#xff0c;函数如何使用、函数格式、在使用在所需要的注意点及C/C程序的内存开辟区域 系列文章 第一篇&#xff…