我在小小的船里睡

首先 async/await 是一种用于处理异步操作的语法糖，在 ES2017 被引入，用于更简洁地编写基于 Promise 的链式回调代码 使用 async/await ...

项目创建 目前 Vue 官方已经声明 Vue-CLI 在维护状态，更推荐使用 npm create 创建一个应用，使用该方式创建的Vue 应用默认是 Vite 脚手架的 这...

封装背景 在如今前后端分离的开发模式中，我们有很多需要通过异步请求获取数据的场景，在此过程中会可能存在有很多的处理，如 loading、错误捕获、数据处理、请求前校验等。 ...

什么是WebComponent 首先 WebComponent 直译过来第一感觉是 web 组件的意思，实际上它是 HTML5 推出的一个新特征，在这个依赖前端框架的时代，...

移动端 Web 页面的开发，由于机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得 Web 页面在不同移动设备上具有适应的展示效果，需要在开发过程中使用合理的适配方案...

移动端适配 所谓移动端适配，其概念就是在任意手机中我们开发的网页显示都是正常的，如下例子所示 上面的页面如果在 iPhone6/7/8 中查看那就一切正常，因为 iPhon...

rem适配 在日常的移动端开发中，设计稿一般为750物理像素，而我平时开发的时候，习惯以屏幕宽度为375，高度为724为标准( iPhone X 在微信内置浏览器的宽高) ...

Pixi简介 Pixi 是一个非常快的 2D sprite 渲染引擎 Pixi 的用途： 显示、动画和管理交互式图形 制作游戏和应用程序 创建任何交互式应用，包括手机应用 ...

操作精灵 定位 通过更改精灵的 x 和 y 属性值来更改猫的位置 精灵的左上角(左耳)代表它的 x 和 y 锚点 若使精灵向右移动，需增加其 x属性的值 若使猫向下移动，请...

前面两篇已将讲述如何显示精灵，但是如何使它们移动？这很简单： 使用Pixi的 ticker 创建一个循环函数，这被称为游戏循环(game loop) 放入游戏循环的任何代码...

前面三章已经讲述了如何显示精灵与对精灵的操作，本次讲述的是用pixi.js绘制各种图形，以及两个精灵之间的碰撞检测。 图形绘制 Pixi 也有自己的底层绘制工具，可以使用这...

寻宝猎人 游戏需求： 使用键盘上的箭头键帮助探险家找到宝藏并将其带到出口 怪物在地牢壁之间上下移动，如果探险家触碰到怪物则变成半透明，并且右上角的生命值会减少 如果所有生命...

Flappy Bird 是一款前不久风靡世界的休闲小游戏，虽然难度超高，但是游戏本身却非常简单。下面使用 PIXI 来快速开发 HTML5 版的 Flappy Bird 初...

到目前为止，已经实现了小鸟的飞行，接下来开始初始化障碍物，让障碍物不断从右到左移动 创建障碍 障碍是游戏中另一个非常重要的角色，整个障碍由许多成对的上下管子组成，障碍只需要...

在准备好背景和地面之后，接下来就可以实现游戏的准备场景，还有控制小鸟的飞行 准备场景 准备场景由一个 Get Ready！ 文字图片和 TAP 提示图片组成 创建一个 Re...

目前障碍物已经可以持续从右往左移动，那么接下来就是计算小鸟穿过的障碍物数量，以及判断小鸟与障碍物是否碰撞 初始化分数 由于分数的 0 到 9 也有各自对应的纹理，那么可以通...

现在整个游戏只差一个结束场景，目前小鸟的碰撞和玩家得分都已经实现，接下来就是衔接结束场景 结束场景 结束场景跟准备场景相似，由一个 Game Over 文字图片、计分板图片...

React简介 概念： React 是将数据渲染为 HTML 视图的 JavaScript 库，用于构建用户界面，由组件组成，拥有自己的逻辑和外观 (官方简介：用于构建 W...