Pits - CSS3+JS网页小游戏

src="http://www.sfg.name/apps/pits/" width="600" height="300">


玩游戏 ↑ - 游戏主页 - 原文链接

游戏介绍

这是一款非常简单的网页小游戏。在小动物的前面的路上有美味的食物，然而挡在它面前的是一个方形的坑，要想拿到食物并须用土块把坑填上再过去。按住屏幕放大土块，松开手指让土块落下并填到坑里。如果土块太大，土块无法填入坑里，小动物将被挡住；如果土块太小，小动物会陷在坑里。因此土块的大小非常重要。热心的你快来帮忙吧！

游戏制作

游戏基于CSS3和Javascript实现，在PC和移动端的浏览器中均可运行。游戏中的动画效果主要使用CSS3 transition属性来实现。关于CSS3 transition，请戳W3School CSS3 transition了解更多。

此外，按住屏幕放大土块的动画效果使用Javascript实现，逻辑如下：按下屏幕（mousedown/touchstart）时启动一个周期函数（setInterval），在该函数中增大土块的边长并重绘土块；抬起手指（mouseup/touchend）时清除周期函数（clearInterval），停止扩大土块。

具体实现及源码请参考 github，点击原文链接查看原文。