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

2024-04-22 22:35:58

现在通常的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

文中游戏体验方式：

用DOM模型和css制作web小游戏相关推荐

html中背景条纹效果,CSS制作Web页面条纹背景样式的技巧分享
通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果,这里我们就了解CSS制作Web页面条纹背景样式的技巧分享,需要的朋友可以参考下一.横向条纹如下代码:background ...
html5横竖条纹背景,CSS制作Web页面条纹背景样式的介绍
这篇文章主要介绍了关于CSS制作Web页面条纹背景样式的介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果 ...
web小游戏开发：蜘蛛纸牌（完）
web小游戏开发:蜘蛛纸牌(完) 实现移动成功连续的扑克记录分数撤销记录操作监听键盘实现撤销完整代码 html css js 小结实现移动上一篇文章,我们已经实现了拖拽,并用 spi ...
【游戏思路】制作简单小游戏实现思路总结
很多小伙伴在制作游戏的时候苦于没有思路,实际上制作一个游戏是很简单的,我们可以先从小游戏开始思考. 小游戏的概念和分类概念:单机或联机类型,操作简单,效果简单,体积不大,玩法单一类型. 特点:体积小 ...
JS与HTML、CSS实现2048小游戏（一）
JS与HTML.CSS实现2048小游戏(一) 引言知识储备编译器推荐游戏框架构建游戏的基础页面后续文章引言这是大一刚结束的时候做的东西,之前也写了文章做记录,最近想发一下博客,就重新整 ...
web小游戏开发：华容道（一）
web小游戏开发:华容道(一) 华容道 html css 素材原图素材验证游戏关卡华容道老顾儿时的记忆啊,也是一个经典的益智游戏. 游戏规则就不用再介绍了吧,就是让曹操移动到曹营就算胜利. C ...
web小游戏开发：华容道（完）
web小游戏开发:华容道(完) 游戏关卡 html css js js 说明实现角色移动和胜利判定完整代码小结游戏关卡书接上文,对于游戏来说,我们可以看做一个 4 x 5 的区域,最小的小兵 ...
web小游戏开发：蜘蛛纸牌（二）
web小游戏开发:蜘蛛纸牌(二) 修正 html 最终样式初始的 js 发牌机制根据难度生成扑克洗牌初始发牌主动发牌小结样式部分 js 部分修正 html 之前做了两个小游戏,都是用 ...
python编的俄罗斯方块游戏_手把手制作Python小游戏：俄罗斯方块(一)
手把手制作Python小游戏:俄罗斯方块1 大家好,新手第一次写文章,请多多指教 A.准备工作: 这里我们运用的是Pygame库,因为Python没有内置,所以需要下载如果没有pygame,可以到官 ...

最新文章

热门文章