Lemmings CSS 动画
Lemmings CSS Animation

原始链接: https://markblah.github.io/lemmings/

Walker 游乐场允许你添加、拖动、搬运和投掷行走者。调整窗口大小会移动表面,并可能把站在上面的行走者弹射出去。游乐场包含楼梯、高楼梯、悬浮平台、坑壁和卡片;缩小窗口时,卡片会换行到新行,把站在上面的行走者推走。卡片边框是实体的,允许在顶边行走,或把行走者困在里面。第三张卡片的文本充当可行走的地板,而第四张卡片可用于把行走者向上投掷。在阅读区域,文本列在调整大小时会重排,每行文本都成为行走者可以落下、掉落或着陆的地板。行距保持很近,以免文本困住行走者;只有边框、盒子、按钮、图像和字段会阻挡它们。靠近底部的长地板会接住所有完全落下的东西。

一篇 Hacker News 帖子介绍了 MarkBlah 的“Lemmings CSS Animation”,一个怀旧致敬作品,动画旅鼠在页面周围走动并可拖拽。评论者回忆在 Amiga/PC 上和家人玩《旅鼠》的时光,并分享端口,如 68k Mac 版本和 macsourceports。其他人链接类似网页项目,包括 DHTML Lemmings 和 xpenguins-web。技术评论讨论浏览器性能:Chrome 动画更流畅但影响滚动,Safari 占用更多 CPU 却保持滚动流畅;有人建议 requestAnimationFrame。用户还指出移动端/缩放问题、对减少动态偏好的用户的无障碍问题,以及该项目尽管是 CSS 动画却主要使用 JavaScript。一些人与原游戏比较,指出缺少挖掘和建造等机制。总体来说,该帖子引发了对网页动画和经典游戏移植的怀旧与讨论。
相关文章

原文
Walker Playground

Add walkers with the button below or __walker.add(). Drag one to carry it, flick it to throw it. Resize the window and walkers ride the surface they're standing on, so a fast resize launches them.

Stairs

Stairs too tall to climb

Floating platforms

Pit

Walls

Cards

These wrap onto new rows as the window narrows, which shoves anyone standing on them.

Card one

Borders are solid. Walk the top edge or get trapped inside.

Card three

Text is a floor you can land on but walk through.

Card four

Throw a walker up here.

Cage

Reading

Columns of text reflow a lot when the window changes size, so this is a good place to try a resize launch. Each line of text is its own floor. Walkers can drop from line to line, fall off the end of a short line, and land on whatever is below.

Lines sit closer together than a walker is tall, so text never blocks them. Only borders, boxes, buttons, images and fields do. That keeps walkers from getting stuck between two lines of a paragraph.

Near the bottom of the page there is one long floor to catch anything that falls all the way down.

联系我们 contact @ memedata.com