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

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

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

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

What's AlloyStick

AlloyStick 是一款专为 HTML5 开发的 2D 骨骼动画引擎。可以用于 HTML5 动画开发、HTML5 游戏开发。AlloyStick 主要由骨骼动画引擎和骨骼动画编辑器两部分组成。骨骼动画编辑器提供强大的骨骼动画编辑功能，拖拽骨骼组合角色，通过设置动画关键帧，输出动画数据。js 动画库根据输出数据，依靠强大的自动补间和骨骼关系，就可以制作出逼真、生动的 Canvas 骨骼动画，可以畅快的运行在 PC、手机、平板等设备里。

一 .《墙来了》简介

《墙来了》是一款基于 HTML5 的体感游戏，第三届腾讯创意马拉松的一等奖作品，由 腾讯 AlloyTeam 和 HTML5 梦工场联合出品。《墙来了》 采用 HTML5、Javascript、CSS3 等全新 Web 技术来构建一个在线的体感游戏，只要有一个浏览器和一个摄像头，就可以通过身体的摆动，体验穿墙的刺激与快感。

• 运行平台：Chrome
• 语言支持：中英文

【场景】：

由于 CodeTank 是一个 JS 的编程游戏，所以用户的代码都可以在 CodeTank 平台上执行，从而控制 tank 的个性化行为。

在 CodeTank 设计之初，主要需要实现的目标如下：

1. 自定义的坦克可以调用公用的 API，例如 fire，ahead 等控制坦克行为的 API。
2. 自定义的坦克可以实现自己的事件处理程序，在特定事件触发时提供自己的响应。
3. 自定义坦克管理属于自己的状态队列。

一、坦克结构组成：

坦克由三个基本部件组成：主体，炮管和雷达。

1. 主体：可进行移动或旋转动作。
2. 炮管：可进行旋转和开火动作，开火可控制子弹的能量范围。
3. 雷达：可进行旋转和探测敌人的动作。当坦克停止移动时，雷达会被关闭，玩家可以通过手动调用 scan方法开启雷达。

欢迎来到 CodeTank 的世界，将会带你进入一个神奇而充满挑战的代码机器人的世界！

CodeTank（代码坦克）是全世界首个 Javascript 程序员的在线编程对战游戏，是由 腾讯 AlloyTeam 和 HTML5 梦工场联合出品的在线坦克仿真游戏平台，CodeTank 采用 HTML5、Javascript、CSS3、NodeJS、MongoDB 等全新 Web 技术来构建一个基于互联网的在线智能坦克机器人战斗仿真引擎（所以需要支持 HTML5 的浏览器来运行）。

欢迎来到 CodeTank 的世界，将会带你进入一个神奇和充满挑战的代码机器人的世界！

相信每一个男人的心中，都有一份对坦克 (Tank) 特殊的情结，那就访问：

CodeTank 官方网站：http://CodeTank.AlloyTeam.com/

关于 Canvas 中动画的处理和实现

大致会有三种类型：

• 矢量动画【No Textures】
• 关键帧动画
• 骨骼动画