目录一、案例效果二、实现思路三、完整代码+详细注释四、案例素材一、案例效果二、实现思路创建游戏背景板和小鸟，并分别设置相对定位与绝对定位；初始化背景图的位置；初始化小鸟的位置；设置游戏状态，游戏开始时背景和管道全部向左运动，游戏结束全部停止运动；使小鸟飞行，其实就是背景图在X轴方向的位置不断减小，实现小鸟向右飞行效果；设置点击事件，每点击一次小鸟在Y轴的位置减小，实现向上飞的效果；创建管道，X方向上管道和下管道位置相同，Y方向上上管道和下管道高度随机，但中间要空出200px；实现管道向左运动，与背景图向左操作类似，也是在X轴方向的位置不断减小；管道向左运动移出游戏面板最左侧时再回到原位重新执行
目录一、案例效果二、实现思路三、完整代码+详细注释四、案例素材一、案例效果二、实现思路创建游戏背景板和小鸟，并分别设置相对定位与绝对定位；初始化背景图的位置；初始化小鸟的位置；设置游戏状态，游戏开始时背景和管道全部向左运动，游戏结束全部停止运动；使小鸟飞行，其实就是背景图在X轴方向的位置不断减小，实现小鸟向右飞行效果；设置点击事件，每点击一次小鸟在Y轴的位置减小，实现向上飞的效果；创建管道，X方向上管道和下管道位置相同，Y方向上上管道和下管道高度随机，但中间要空出200px；实现管道向左运动，与背景图向左操作类似，也是在X轴方向的位置不断减小；管道向左运动移出游戏面板最左侧时再回到原位重新执行
介绍Jest是目前前端工程化下单元测试火热的技术栈，而Enzyme的支持提供了Jest测试React业务、组件的能力，下面来介绍一下React组件测试的一些实际场景。1.测试依赖包 "enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","enzyme-to-json":"^3.3.5","jest":"^28.1.1","jest-less-loader":"^0.1.2","jsdom":"^19.0.0", //解决mount渲染组件失败的BUG，具体见上文"ts-jest":"^28.0.5",2.测试环境搭建由于enzyme的
介绍Jest是目前前端工程化下单元测试火热的技术栈，而Enzyme的支持提供了Jest测试React业务、组件的能力，下面来介绍一下React组件测试的一些实际场景。1.测试依赖包 "enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","enzyme-to-json":"^3.3.5","jest":"^28.1.1","jest-less-loader":"^0.1.2","jsdom":"^19.0.0", //解决mount渲染组件失败的BUG，具体见上文"ts-jest":"^28.0.5",2.测试环境搭建由于enzyme的
1.原生js获取DOM节点：document.querySelector(选择器)document.getElementById(id选择器)document.getElementsByClassName(class选择器)....2.vue2中获取当前组件的实例对象：因为每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。所以在默认情况下， 组件的$refs 指向一个空对象 。可以先在组件上加上ref="名字" ，然后通过this.$refs.名字 获取相应元素并进行操作。这是一个测试样例按钮exportdefault{data(){retu
1.原生js获取DOM节点：document.querySelector(选择器)document.getElementById(id选择器)document.getElementsByClassName(class选择器)....2.vue2中获取当前组件的实例对象：因为每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。所以在默认情况下， 组件的$refs 指向一个空对象 。可以先在组件上加上ref="名字" ，然后通过this.$refs.名字 获取相应元素并进行操作。这是一个测试样例按钮exportdefault{data(){retu
目录BOM（BrowserObjectModel）浏览器对象模型window对象常用的Window方法window的子对象navigator对象history对象location对象弹出框警告框确认框提示框计时相关DOM（DocumentObjectModel）文档对象模型DOM标准规定HTML文档中的每个成分都是一个节点(node)查找标签id查找类查找标签查找（直接查找）代码练习1.id查询2.类查询（多个标签对象返回数组）3.标签查询（多个标签对象返回数组）变量名存储方法间接查找（熟悉）1.生成变量名（存储变量名）2.拿父节点（找父标签）3.找所有的子标签4.找第一个孩子节点操作1.需求
目录BOM（BrowserObjectModel）浏览器对象模型window对象常用的Window方法window的子对象navigator对象history对象location对象弹出框警告框确认框提示框计时相关DOM（DocumentObjectModel）文档对象模型DOM标准规定HTML文档中的每个成分都是一个节点(node)查找标签id查找类查找标签查找（直接查找）代码练习1.id查询2.类查询（多个标签对象返回数组）3.标签查询（多个标签对象返回数组）变量名存储方法间接查找（熟悉）1.生成变量名（存储变量名）2.拿父节点（找父标签）3.找所有的子标签4.找第一个孩子节点操作1.需求
BOM原生对象：成为js中的内置对象，就是由js中的构造函数创建的对象就被称为原生对象：Object、Number、Array、Date、String。。。。宿主对象：web运行环境，也就是windows操作系统和浏览器这些被称为宿主，有这些宿主提供的对象，就叫宿主对象。*BOM：浏览器对象模型，专门用来操作浏览器中的功能使用在BOM中最顶层的对象就是window对象，window对象是浏览器中内置对象，里面包含了操作浏览器的方法和属性window中常用的方法和属性：innerHeight、innerWidth：专门用来设置浏览器窗口的尺寸，例：↓1pid="demo">显示窗口的高度和宽度(
BOM原生对象：成为js中的内置对象，就是由js中的构造函数创建的对象就被称为原生对象：Object、Number、Array、Date、String。。。。宿主对象：web运行环境，也就是windows操作系统和浏览器这些被称为宿主，有这些宿主提供的对象，就叫宿主对象。*BOM：浏览器对象模型，专门用来操作浏览器中的功能使用在BOM中最顶层的对象就是window对象，window对象是浏览器中内置对象，里面包含了操作浏览器的方法和属性window中常用的方法和属性：innerHeight、innerWidth：专门用来设置浏览器窗口的尺寸，例：↓1pid="demo">显示窗口的高度和宽度(
