80岁拄拐搞前端

问题由来 记上周做了一个微信 H5 的落地页，由于只有一个页面，而且全是图拼接而成的，所有采取了原始的 jQuery 写法 内部有一些点击之后跳转到外部链接的需求，于是咔咔写下 ： 然后返回页面的时候

ref引用简介 ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用 本质： 对象 每个组件实例都包含 $refs对象，持有注册过 ref attribute 的

Vuex概述 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 同时也是一种组件间通信的方式，且

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

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

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

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

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

Flappy Bird 是一款前不久风靡世界的休闲小游戏，虽然难度超高，但是游戏本身却非常简单。下面使用 PIXI 来快速开发 HTML5 版的 Flappy Bird 初始化舞台 由于图片素材的背景