Lemmings CSS Animation

260 points - today at 4:54 AM

Source

Comments

fschuett today at 1:20 PM
Reminds me of a similar game I had as a kid (Dweebs 2: The New Breed).

https://www.youtube.com/watch?v=82cqmq6quXI

rfarley04 today at 8:32 AM
I played this game for dozens of hours with my dad growing up and seeing and playing with these animations is one of those times when nostalgia is so overwhelming and unexpected that I feel physically dizzy. If the animation had the sounds of lemmings dying when they fell from too high[1] I might have been hospitalized. Good work.

[1] https://www.youtube.com/watch?v=F_RmG9WB4BE

Waterluvian today at 5:53 AM
That’s pretty sweet.

I did something on my site recently like that where you can click a hexagon and it turns into a robot and starts SLAM mapping the page, navigating around text elements carefully.

Were you initially surprised by how easy it was to get exact block size of individual characters and not just entire dom elements? That’s the part I thought was going to be the most difficult.

pwagland today at 12:46 PM
Interesting experiments and differences between the browsers.

Using the test: (async () => { const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); for (let i = 0; i < 200; i++) { __walker.add(); await sleep(10); } })();

From the JavaScript console, on both Chrome and Safari.

The animation is _way_ smoother on Chrome, but scrolling on that page becomes really painful.

Safari, on the other hand, uses a lot more CPU to do the animation, and the FP of that animation drops dramatically as you change the number of lemmings from 10 -> 50 -> 100 -> 200. However scrolling the page remains smooth the entire time.

hoppp today at 1:10 PM
On android they fall down along the side all the way to the bottom
cs02rm0 today at 10:21 AM
I recently put lemmings into some clinic management software I've been working on as a software egg.

https://postimg.cc/gxvZHbgG

tniemi today at 10:50 AM
OuterVale today at 7:16 AM
I enjoy putting the lemming in the margin on the bottom of the viewport at the left or right side then scrolling down such that the lemming plummets. Then, scrolling up, I can make it bounce up as if it is on a trampoline. Very funny.
ggsp today at 6:43 AM
Cute :) It has a couple of zoom bugs on mobile, something like

html { overflow-x: clip; touch-action: manipulation; }

should fix them!

noufalibrahim today at 6:55 AM
I don't know if I'm remembering this correctly but there used to be a site called html5lemmings (or something similar) where you could play a few levels of the game. This was before modern web applications and things were still mostly server side rendered with minimal javascript. The demo was quite impressive. I don't know if it's still there. Couldn't find it with a quick search.
richardfey today at 8:31 AM
Funny how they keep hopping on a toggling horizontal scrollbar there at the bottom.
MisterMunchkin today at 9:16 AM
This sent me on a lemmings hunt and I found someone porting all of the lemmings games and community levels to Mac - https://github.com/ErikVeland/Lemmings
freshteapot today at 8:45 AM
Took me a moment to realise I could pick them up and place them, on things and in things.

Thank you for bringing this to life.

felipeerias today at 7:41 AM
Love it!

It is unfortunate that the scenery is positioned in such a way that lemmings end up falling by the side all the way to the bottom of the screen.

Perhaps it would look better if you removed the padding from <body> and added more pits to the scenery.

VorticonCmdr today at 9:35 AM
love it. I did build a html-in-canvas version (https://github.com/VorticonCmdr/lemmings) for fun and I love how creative other people get
grumbel today at 7:47 AM
I vibe-ported xpenguins[1] to Web[2] recently, can be used as bookmarklet and let run on any website. No original Lemmings in that one however, only the knockoff penguins.

[1] http://xpenguins.seul.org/ and updated at https://github.com/Grumbel/xpenguins-ng

[2] https://xpenguins-web.github.io/

adamddev1 today at 9:05 AM
Nothing good comes from vib...

Ok, this is awesome.

alana314 today at 6:34 AM
This is fantastic.
rob74 today at 8:26 AM
Cute, but it would look nicer if the walkers were... you know, actually walking? Ok, might be hard to do with CSS to be fair, I don't know enough about CSS animation to judge that.

EDIT: works in Chrome and Firefox, doesn't work in Edge (on Linux - yeah, I know almost nobody uses that) for some reason...

WhyIsItAlwaysHN today at 8:14 AM
Thank you for making this. It was really fun and a really pleasant start to my day.
ckx today at 9:42 AM
Really fun to play around with! Good job!
nilail today at 7:36 AM
Super funny idea ! But it does not follow the scroll down on Safari
allexsendev today at 8:36 AM
mad impressive imo, spawned like 50+ ppl and still running smooth (although must say I have a monster rig).

And I overenjoyed throwing lil marios around

swiftcoder today at 8:05 AM
I love that they can also walk on the text headings
MarkBlah today at 4:54 AM
A tribute to Psygnosis, just for fun
manif00ld today at 12:00 PM
this made my day
ForgotMyUUID today at 11:21 AM
So cute!
metchio today at 11:34 AM
this is awesome
cheapcheerful today at 6:54 AM
Awesome. Loved the originals.
shevy-java today at 10:02 AM
That kind of misses what made Lemmings fun though.

Without digging and building stairs and parachutes, it is only Lemmings in name, not in spirit. Also, exploding lemmings - this can probably be done via CSS animations.

jdw64 today at 9:01 AM
Oh, this game brings back memories
memming today at 6:56 AM
Now that's what I'm talking about.
tmountain today at 8:08 AM
[dead]
clilog_d today at 7:46 AM
[flagged]
monkeydust today at 11:56 AM
Is there anyway to get the classic version of Lemmings (on Amiga/PC) playable on the Switch?