- 博客(22)
- 收藏
- 关注
RSS订阅原创 游戏评论之——戴森球计划
游戏评论之——戴森球计划前段时间，应该是几个月前，B站上到处都在直播戴森球计划。戴森球这个词对理科生来说有天然的吸引力，于是尝试性的看了几分钟就关闭了了直播。因为我找游戏玩时有个特点，如果能从一些只言片语的评论以及自己的部分偏见中找到一些吸引我的因素，我才会去试玩。而戴森球就是这么一款最近才转行成为一名游戏策划，很多游戏理论设计都不懂，于是从 游戏体验 出发，谈谈我对戴森球的感受。“游戏体验”这个词，是我曾跟同事讨论时被不断提及的概念。曾经我问过一个同事，这里就称他为“执宙”吧。我问他：“在游戏设计中，
2022-03-13 01:17:18
3983
原创 参赛【GGJ2022】回顾，作品--双生共合
参赛今年1月21-23，我参加了GGJ2022的比赛。这是我第一次参加GGJ（Global Game Jam），和其余5位小伙伴一起，在48小时内做了一款游戏。选题游戏的主题是Duality。在21号晚上，我们讨论了很久。在最终定方案时，适当的问了句，什么能做，小哥答道：“什么都能做，策划定”。于是选择了平台跳跃。第二天便开始了制作。最终做出了一款，一人控制两个角色，上下非对称的，高难度的平台跳跃类游戏。设计为了表现二元性，我们设计了两个完全对立的角色 ，天使与恶魔，在各自对立的场景中同步奔跑。
2022-01-28 00:07:24
2263
1
原创 新的开始
新的开始何去何从回首过往转行走过的路我辞职了。去年下半年裸辞的，稍微休息了一下。何去何从期间，一直在想一件事。既然已经辞职了，那是否可以去尝试一下做自己喜欢的事。以前经常说，自己喜欢玩游戏，想去做游戏；然后又找借口，已经在与游戏不想关的行业工作了这么多年，又没有从事相关行业的朋友，为什么别人愿意招你，这个既没相关能力也没经验更没人脉的和应届生共同起步的人。现在，已经离开舒适区的我，这些接口已经不再有任何意义了，于是就决定试试。回首过往遥想毕业当年，不知道该做啥，就被培训机构忽悠去学计算机编程。当时
2021-05-26 22:42:11
126
1
原创 Vuex源码分析（五）-- actions
Vuex源码分析（五）-- actions官方描述源码分析构造函数storeinstallModulemakeLocalContext官方描述Action 类似于mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。让我们来注册一个简单的 action：const store = new Vuex.Store({ state: { count: 0 }, mutations: { increm
2021-01-20 21:07:01
285
原创 Vuex源码分析（四）-- mutations
Vuex源码分析（四）-- mutations官方描述源码分析构造函数storeinstallModulestore.commit()unifyObjectStyle总结官方描述更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：const
2021-01-08 19:32:04
132
原创 Vuex源码分析（三）-- getters
Vuex源码分析（三）-- getters官方描述源码分析构造函数StoreinstallModule关键代码一，`makeLocalContext`方法关键代码二，`module.forEachGetter`mapGetters 辅助函数总结官方描述首先来看看官方对getters 的描述。Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。con
2021-01-07 16:03:36
274
原创 Vuex源码分析（二）-- state
Vuex源码分析（二）-- state首先总结state是Store实例的一个属性通过创建Store实例生成的state，根节点上的state始终包含全局state以及相应的模块名，不管子模块的namespaced是否为truenamespaced字段只影响[getters, mutations, actions] 的命名前缀const store = new Vuex.Store({ state: {a : 1}, // 这个state可以是一个对象，也可以是一个方法 modules:
2021-01-05 17:54:01
275
原创 Vue源码分析--vm.$watch()
Vue源码分析–vm.$watch()vm.$watch()核心是调用Watcher，如果你对Watcher的使用不熟悉的话，建议先看我的这篇文章 Vue另类解读–基于数据劫持的双向绑定Observer/Watcher/Depvm.$watch( expOrFn, callback, [options] )expOrFnVue.prototype.$watch = function ( expOrFn: string | Function, cb: any, options?: Ob
2021-01-05 15:49:44
231
原创 Vuex源码分析（一）-- 插件注册
Vuex源码分析（一）-- 插件注册先说总结：Vue.use(Vuex)，会给当前Vue组件的beforeCreate生命周期添加一个方法，这个方法会将在根节点引入的store对象，传入所有的子节点中这个store对象是通过 new Vuex.Store({}) 生成的；也可以是一个方法，用以返回Store对象然后通过 new Vue({store}) 在根节点引入然后看一下Vuex对象的属性结构export { Store, // sotre对象，用于构造store实例，new Sto
2021-01-05 14:41:26
102
原创 Vuex源码分析--序章
Vuex源码分析–序章Vuex 是一个专为 Vue 应用程序开发的状态管理模式。每个Vuex的核心是一个store，它采取自上而下的管理方式。有以下几个特点state 负责管理所有的数据，可以通过this.$store.state取值，不允许直接赋值getter 从state中派生出的一些状态，可以近似看做于Vue的computedMutations Vuex中更改store状态的唯一方法是提交mutations方法Actions actions是通过提交 mutations 修改数据，支持异步
2021-01-05 14:39:15
80
原创 Vue源码分析--vm.$nextTick()
Vue源码分析–vm.$nextTick()Vue暴露出去的vm.$nextTick()方法，就是内部的nextTick()方法，这个方法也为watcher.update()提供了异步更新的方式。即通过Watcher监控的属性或vm._update()方法，当其中的子元素变更时，会用nextTick方法把其回调推入队列。并去重被重复推入的watcher。然后等待下次事件循环时，按watcher.id从小到大依次执行更新Vue.prototype.$nextTick = function (fn: Fu
2021-01-04 21:57:22
139
原创 Vue源码分析--vm.$forceUpdate()
Vue源码分析--vm.$forceUpdate1. vm._watcher是啥？是怎么来的？2. vm._watcher.update() 又是啥方法？首先直接上源码，这里有两个关注点Vue.prototype.$forceUpdate = function () { const vm: Component = this // 1. vm._watcher是啥？是怎么来的？ if (vm._watcher) { // 2. vm._watcher.update() 又是啥方
2021-01-04 21:10:19
943
原创 Vue源码分析--vm.$mount()
Vue源码分析–vm.$mount(el)将Vue对象挂载到指定页面元素上，下面是一些使用时的注意点new Vue(options)时会根据模板生成一个vnode对象，再以vnode生成一个Element对象new Vue(options)时，如果存在options.el，则会用生成的Element对象替换掉页面上的el如果不存在options.el，则需手动挂载 vm.$mount(el)如果已挂载el，则无法挂载其他el如果new Vue(options)时不存在模板，则会以手动挂载对象
2021-01-04 18:59:07
533
2
原创 Vue另类解读--基于数据劫持的双向绑定Observer/Watcher/Dep
Vue另类解读--基于数据劫持的双向绑定直接解读类比Observer（教官）Dep（小本子）Watcher（作战指挥官）基于数据劫持的双向绑定，想必很多人都能理解清楚，这里就不多做描述了。只是在读Vue的基于数据劫持的双向绑定相关源码时感觉特别绕。这里记录下我对 Observer，Watcher，Dep这三者作用与关系之间的思考。以下我是站在源码的角度进行分析的，希望能帮读源码的朋友理清思路。直接解读首先摊开所有的关键点：这里的watcher与this.watch没有关系，反倒是this.com
2021-01-02 00:59:44
412
1
原创 js手写方法之--Promise
js手写方法之–PromisePromise与async/await是ES6中常用的异步操作方法，为了深刻理解Promise的用法，解读源码是一个很好的方案。其核心方法是Promise构造函数，以及.then方法，其他静态方法都是在此基础之上封装的为了方便理解，以下代码经过了适当删减// Promise状态常量值// 状态还未变化const PENDING = 0// 成功const FULLFILLED = 1// 失败const REJECTED = 2function MyProm
2020-12-31 16:03:12
223
原创 Vue源码分析--Vue.component
Vue源码分析–Vue.component我将非 Vue.component 的部分去掉了export function initAssetRegisters (Vue: GlobalAPI) { Vue.component = function ( id: string, definition: Function | Object ): Function | Object | void { if (!definition) { // 如果 definitio
2020-12-30 16:01:24
550
1
原创 js手写方法之--instanceof
js手写方法之–instanceof这个方法是用来判断构造函数 Fn 的 prototype 属性，是否存在于 obj 的原型链之上obj instanceof Fn等价于以下方法function myInstanceof (obj, Fn) { // 若obj为基本类型，返回false if (typeof obj !== 'object' || obj === null) { return false } let left = obj.__proto__ let right =
2020-12-28 15:12:30
227
原创 Vue源码分析--Vue.mixin
Vue源码分析–Vue.mixin看源码，就是将mixin对象合并到this.options上export function initMixin (Vue: GlobalAPI) { Vue.mixin = function (mixin: Object) { // 注意：这里的this.options不是指vm.$options, 而是Vue.options // 初始为 Vue.options = // {filters: {}, directives: {}, compon
2020-12-28 14:53:25
124
原创 Vue源码分析--Vue.use
VUE源码分析–Vue.use直接上源码吧export function initUse (Vue: GlobalAPI) { // 绑定静态方法 Vue.use(plugin: Function | Object) Vue.use = function (plugin: Function | Object) { // 每次绑定的插件都要保存到this._installedPlugins 数组中，避免重复绑定 const installedPlugins = (this._ins
2020-12-28 11:55:05
78
原创 new运算符到底干了啥?
new运算符到底干了啥创建一个空对象obj继承这个构造函数的原型链执行Fn.call(obj, …args)如果这个构造函数没有返回值，或是返回值为基本类型，返回obj；否则，按照构造函数的返回例如：现有一个构造函数Fnfunction Fn (x) { this.x = x}此时执行new运算符let obj = new Fn(...args)则obj经历如下let obj = (function () { // 1. 创建一个空对象_obj let _obj = O
2020-12-28 10:45:29
103
原创 js手写方法之--call/apply/bind
js手写方法之--call/apply/bindcall的实现apply的实现bind的实现call的实现/** * 核心思想： * 1. 绑定当前方法 this 为 context.fn 对象上 * 这样，执行context.fn()时，内部的this就指向了context * 2. 使用ES6新特性，展开运算符 */Function.prototype.mycall (context, ...args) { // 若context不存在，则取 context = window con
2020-12-28 00:30:01
97
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人