HTML5嘅小游戏,一些有趣的 HTML 5 交互小游戏

HTML 5 的诞生已经有些时日,它向我们呈现了令人惊叹的视觉效果。基于网页的交互究竟能有多优秀?这些网站可以告诉你答案。

在网页上的精美制作:MakeMePulse

MakeMePulse 连续两年制作了基于鼠标的交互网页——MakeMePulse 2017 在这个页面中,你可以看到制作精美的灯泡、拍立得、机器人、纸飞机、登月飞船这五个页面。

890af35fd95e2221f44bef5685c317ba.gif

同样是 MakeMePulse 制作的 2016 MakeMePulse 年度关键字 网站也是类似的效果。长按页面开始随机选择关键词,每个关键词都可以用鼠标操作,实现很不错的效果。即便是两年前制作的动画效果,放在今天依然毫不逊色,比国内的一众测试网站要炫酷得多。

dab8ad7a2204c208615b76b94bad1847.gif

在线拧魔方:Iamthecu

Iamthecu 给我们提供了一个在线的三阶魔方,支持自动打乱、自动还原、撤销。网站交互很棒,提供了各种透视视图,来帮助你更清楚的看到还原魔方的技巧和方法。再也不用担心拧乱魔方没法还原了。

77c47a0f7d1c67aaa224e8e86832bfec.gif

如果你不满足于三阶魔方,另一个网站 Grubiks 提供了四阶、五阶、异形、金字塔魔方供你在线游玩。不过这里并不提供还原步骤演示。

d393712cbfb219d247631b7c862b316f.gif

随手就能弹出节奏:Mikutap

在 初音未来 Mikutap 中随意点击屏幕就可以让初音未来唱出歌曲,再加上魔性的背景音乐和丰富的动画效果,可以组成各种各样的节奏。

这个网页画风清新,非常动感,「随便按按就能出节奏」的畅快感有如第一次在 GarageBand 中打开示例项目,让「我也有音乐天赋」的错觉油然而生。

cb4e0eb6cefeb74e8458d140f5d6fda6.gif

网页上的点与线:鼠标躲避球

这是玩法不同,但表现形式类似的三个小游戏网站——Sinuous、Core、Coil,需要用到鼠标操作。

Sinuous 的玩法是控制鼠标躲避来自远方的红点,碰到红点或碰壁都会 Game Over。游戏过程中还有一些道具,可以干掉这些烦人的红点或者驱散他们,游戏难度分为 1-9 。我玩到难度 6 就玩不下去了,你能否打破这个记录呢?

1af32032bfa664137757f94819116986.gif

Core 则需要玩家控制防护罩,阻挡红点的入侵。后期红点太多时还可以按住空格,消耗生命达到短时间无敌的效果。是个不错的小游戏。

da537120f2de00e16ba4a0dca63dbf06.gif

这三个玩法简单的小游戏非常适合消磨时间,如果你跟我一样无聊就来玩玩看吧。

有趣的 HTML 5 交互:FFF.cmiscm

如果你看了上面这些网站还意犹未尽,还可以去 FFF.cmiscm 看看。

702c77e6a0666a5ce88f4a6f96fe4c5f.gif

它包含了多达 15 种由 HTML 5 制作的交互动画。包括「海浪模拟器」「时钟」「雨刮器效果」「数山羊模拟器」「湖面倒映模拟器」等没什么用但很有趣的效果。

来源:少数派

—————————————————————我是一条分割线——————————————————————

《免责声明》本网站转载的文章遵循原作者的版权声明,如果原文没有版权声明,按照目前互联网开放的原则,我们将在不通知作者的情况下,转载文章;如果原文明确注明“禁止转载”,我们一定不会转载。如果我们转载的文章不符合作者的版权声明或者作者不想让我们转载您的文章的话,请来信告知,邮箱:yunying@ xsteach.com;电话:020 - 29075715。 本网站转载文章仅为传播更多信息之目的,凡在本网站出现的信息,均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性,但不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何损失或损害承担责任。 任何透过本网站网页而链接及得到的资讯、产品及服务,本网站概不负责,亦不负任何法律责任。 本网站所刊发、转载的文章,其版权均归原作者所有,如其他媒体、网站或个人从本网下载使用,请在转载有关文章时务必尊重该文章的著作权,保留本网注明的“稿件来源”,并自负版权等法律责任。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值