上篇回顾:我们说了斗地主游戏的渲染展示部分,最后也讲了下 canvas 中交互的情况,下篇的重点就是游戏逻辑

逻辑主要分成两块:流程逻辑和扑克牌对比逻辑。

github 地址:https://github.com/vorshen/landlord

TAT.vorshen 从零到一,撸一个在线斗地主上篇
In Web开发 on 2019年07月30日 by view: 1,071
0

背景:朋友来深圳玩,若说到在深圳有什么好玩的,那当然是宅在家里斗地主了!可是天算不如人算,扑克牌丢了几张不全……大热天的,谁愿意出去买牌啊。不过问题不大,作为移动互联网时代的程序猿,当然是撸一个手机在线斗地主来代替实体牌了。

github 地址:https://github.com/vorshen/landlord

阅读前注意:
本文分为上下两篇,本篇讲准备工作以及前端一些布局相关的知识;下一篇讲 webassembly 实现核心逻辑和 server 端相关。

TAT.vorshen 用 threejs 制作一款简单的赛车游戏
In 未分类 on 2017年09月15日 by view: 15,466
3

最近业务比较忙,但是我们追求 3D 世界的脚步不能停下来~某天在路上看到一辆辆飞驰而过的汽车,想到要不要弄一个赛车类的游戏
没有再用原生,而是使用了 threejs,毕竟大点的 3D 项目,再用原生就是自己给自己找麻烦了……
本文从 0 到 1 讲解了这个游戏的开发过程,其中没有专门的介绍 webgl 和 threejs,没有基础的同学可以结合 threejs 文档一起看,或者先学习一下 webgl 的基础知识~
游戏地址如下:

TAT.vorshen QQ 日迹 Omi 实战开发,从 0 到 1
In 未分类 on 2017年07月14日 by view: 2,191
0

相信大家对 Omi 应该都不陌生了,如果还有不了解的同学先看看这里。了解并使用 Omi 之后你会发现真的回不去了~~~

精通 Omi 框架

先简单说一下吧,Omi 就是一个可以快速开发项目的组件化框架,和 vue/react 一样为了节省生产力的。想了解 Omi 和 vue 还有 react 区别的,上面文档有讲解,或者加入群 256426170,可以面对面咨询 Omi 作者 dnt。我这篇文章将使用 Omi 从 0 到 1 来完成一个移动端的项目,让大家了解 Omi 开发的方便快捷。

TAT.vorshen webgl 性能优化初尝
In 未分类 on 2017年05月13日 by view: 4,319
2

上次文章介绍了如何用 webgl 快速创建一个自己的小世界,在我们入门 webgl 之后,并且可以用原生 webgl 写 demo 越来越复杂之后,大家可能会纠结一点:就是我使用 webgl 的姿势对不对。因为 webgl 可以操控 shader 加上超底层 API,带来了一个现象就是同样一个东西,可以有多种的实现方式,而此时我们该如何选择呢?这篇文章将稍微深入一点 webgl,给大家介绍一点 webgl 的优化知识。

讲 webgl 优化之前我们先简单回忆一下 canvas2D 的优化,常用的 display list、动态区域重绘等等。用 canvas2D 多的同学应该对以上的优化或多或少都有了解,但是你对 webgl 的优化了解么,如果不了解的话往下看就对了~这里会先从底层图像是如何渲染到屏幕上开始,逐步开始我们的 webgl 优化。

TAT.vorshen 教你用 webgl 快速创建一个小世界
In 未分类 on 2017年03月15日 by view: 3,615
3

Webgl 的魅力在于可以创造一个自己的 3D 世界,但相比较 canvas2D 来说,除了物体的移动旋转变换完全依赖矩阵增加了复杂度,就连生成一个物体都变得很复杂。

什么?!为什么不用 Threejs?Threejs 等库确实可以很大程度的提高开发效率,而且各方面封装的非常棒,但是不推荐初学者直接依赖 Threejs,最好是把 webgl 各方面都学会,再去拥抱 Three 等相关库。

上篇矩阵入门中介绍了矩阵的基本知识,让大家了解到了基本的仿射变换矩阵,可以对物体进行移动旋转等变化,而这篇文章将教大家快速生成一个物体,并且结合变换矩阵在物体在你的世界里动起来。

TAT.vorshen webgl 世界 matrix 入门
In 未分类 on 2017年01月16日 by view: 4,031
3

这次没有带来游戏啦,本来还是打算用一个小游戏来介绍阴影,但是发现阴影这块想完完整整介绍一次太大了,涉及到很多,再加上业务时间的紧张,所以就暂时放弃了游戏,先好好介绍一遍 webgl 中的 Matrix。
这篇文章算是 webgl 的基础知识,因为如果想不走马观花的说阴影的话,需要打牢一定的基础,文章中我尽力把知识点讲的更易懂。内容偏向刚上手 webgl 的同学,至少知道着色器是什么,webgl 中 drawElements 这样的 API 会使用~

TAT.vorshen 用 webgl 打造一款简单第一人称射击游戏
In 未分类 on 2016年11月03日 by view: 11,566
14

背景:不知道大家还记不记得上次那个 3D 迷宫游戏,有同事吐槽说游戏中间有一个十字瞄准器,就感觉少了一把枪。好吧,那这次就带来一款第一人称射击游戏。写 demo 锻炼,所以依旧用的原生 webgl,这次重点会说一下 webgl 中关于摄像头相关的知识,点开全文在线试玩~~

TAT.vorshen 用 webgl 打造自己的 3D 迷宫游戏
In 未分类 on 2016年09月18日 by view: 8,600
12

背景:前段时间自己居然迷路了,有感而发就想到写一个可以让人迷路的小游戏,可以消 (bao) 遣 (fu) 时 (she) 间 (hui)

没有使用 threejs,就连 glMatrix 也没有用,纯原生 webgl 干,写起来还是挺累的,不过代码结构还是挺清晰的,注释也挺全的,点开全文开始迷宫之旅~

TAT.vorshen 与 A-Star 不同的像素级寻路算法下
In 未分类 on 2016年03月04日 by view: 1,174
0

先贴上文地址:http://www.alloyteam.com/2016/03/and-a-star-on-different-pixel-pathfinding-algorithm/

之前说到了起点和终点连线平移方式的不足,那这篇文章就介绍另一个给力的方法

演示地址:

http://westanhui.github.io/navigate/index2.html

注意:点击画障碍物,通过左键单击画多边形最后右键自动闭合图像