用DOM模型和css制作web小游戏

现在通常的web游戏都是基于html5中canvas2d或者WebGl来制作，但是css3规范能提供更加便捷的图形变换和动画定义方式，仅仅用作web文档布局有些大材小用，采用dom模型加css3来完成一些web小游戏制作需求也是一种不错的选择~

比如绘制圆角矩形，canvas2d需要用线条绘制加一些几何组合来完成，dom+css只需要定义borderRadius属性就可以。
而且dom+css和dom的事件更加有利于UI的制作，虽然一般web中可以dom和画布结合使用，但是一些情况是没有dom模型的（比如微信小游戏）。

下面的这个web小游戏就是作者百忙中每天睡觉前10分钟使用dom模型制作的（使用了Vue.js和css3）。

Vue 用于dom和数据的绑定，方便操作数据驱动dom；
css3 （animation，transform，transition）用于生产动画和图形变换；

对于其中一个玩法，使三种相同的颜色方块相连来消除它们，dom+css的流程设计为：

1. 使用vue将dom的显示抽象出一个二维数组；
2. 将用户操作完成的方块数据添加的数组中；
3. 遍历数组寻找符合消除条件的数组元素；
4. 改变这些元素绑定的的css属性；
5. 产生动画效果；

如过使用原生canvas来实现，需要绘制所有图形，绘制每一帧产生动画甚至需要写贝塞尔曲线函数来制作平滑动画。

所以一些动画或者游戏需求可以采用dom模型和css来实现也许更加合适。

放一些游戏效果图：

针对canvas2d和webGl已经有很多第三方游戏引擎，但是基于dom+css的游戏引擎目前好像还没有，基本的都是一些普通网页组件的三方。做一款基于css的游戏三方库也许不错哦~

你更偏向使用什么来做web游戏呢

• flash
• canvas2d
• webgl
• css