Re:Lemmings CSS Animation
by Waterluvian on Thursday November 05, 2026 @12:53AM
(#50375689)
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 that blew me away.
Re:Lemmings CSS Animation
by tosti on Thursday November 05, 2026 @10:07AM
(#50380025)
Cool! Have you also tried setting maximum display size in accessibility settings on android? I lost most of them at the stairs and the rest fell into the walls. Is that supposed to happen? None reached the bottom. That said, this is pretty cool.
Re:Lemmings CSS Animation
by noufalibrahim on Thursday November 05, 2026 @01:55AM
(#50376009)
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.
Re:Lemmings CSS Animation
by OuterVale on Thursday November 05, 2026 @02:16AM
(#50376129)
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.
Re:Lemmings CSS Animation
by 9dev on Thursday November 05, 2026 @02:49AM
(#50376349)
Right, I thought the same. Construct it such that a Lemming falling down from the top will have to clear every level to the bottom instead of just falling past all of them.
Re:Lemmings CSS Animation
by dspillett on Thursday November 05, 2026 @06:26AM
(#50377886)
As the first paragraph says (“Drag one to carry it”) you can move them around to put them on/in the parts that you want to test their interactions with.
Other than respawning them as you scroll around, so one starts in an appropriate place as a test comes into view, and resetting them automatically, perhaps on a timer, there probably isn't a better way to properly show it off than that.
Re:Lemmings CSS Animation
by grumbel on Thursday November 05, 2026 @02:47AM
(#50376336)
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.
Re:Lemmings CSS Animation
by rob74 on Thursday November 05, 2026 @03:26AM
(#50376614)
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.
Re:Lemmings CSS Animation
by rfarley04 on Thursday November 05, 2026 @03:32AM
(#50376660)
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.
Re:Lemmings CSS Animation
by MarkBlah on Thursday November 05, 2026 @03:59AM
(#50376876)
Haha yea I pulled the sprites from the original game, I was thinking the same, an umbrella or die, it’d be a good way to artificially increase web analytics, maybe a message bubble
Re:Lemmings CSS Animation
by TacticalCoder on Thursday November 05, 2026 @06:50AM
(#50378053)
> ... is one of those times when nostalgia is so overwhelming
1991, Psygnosis (of course), Commodore Amiga (double of course!): my little brother was 9 y/o at the time and we were teenagers and we'd play Lemmings like crazy on our Amiga.
My little brother couldn't speak english yes but he'd imitate the "oh, nooooo" sentence Lemmings you'd "suicide" would make.
More than three decades later my brother is still nicknamed "Lem" after "Lemmings" and that's how we call him. And about two decades ago, he gave his consulting company a name sounding like "Lemmings" (spelling slightly different). He's still "Lem" and he still has got that company.
Re:Lemmings CSS Animation
by detritus on Thursday November 05, 2026 @10:02AM
(#50379965)
One of the best features of the Amiga (and perhaps Atari ST?) was the two player version. A mouse in each of the joystick sockets, each player starts from opposing ends of the map in a splitscreen view, having to get to the other and obviously not interfering with the opposition's efforts. Ahem.
An evil game. Such fun. I wish they'd expanded on it more...
Re:Lemmings CSS Animation
by frizlab on Thursday November 05, 2026 @04:39PM
(#50384824)
> And then here comes Erik Veland with a port of... well, all of them. The original game. The semi-sequel games. The three different holiday games. Preview support for the two full sequels. And six thousand fan levels.
Re:Lemmings CSS Animation
by TimTheTinker on Thursday November 05, 2026 @04:42PM
(#50384857)
Still, if actually ported from the original binaries, that should total less than 500 MB if we assume <50k per level (which I think is generous if we're talking compressed size)
Re:Lemmings CSS Animation
by allexsendev on Thursday November 05, 2026 @04:05AM
(#50376915)
Could be, yeah, didn't look deep into it. Just speaking from my experience with the flashy websites doing impressive demos usually starting to lag fairly soon.
Re:Lemmings CSS Animation
by MisterMunchkin on Thursday November 05, 2026 @04:16AM
(#50376984)
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
Re:Lemmings CSS Animation
by shevy-java on Thursday November 05, 2026 @05:02AM
(#50377331)
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.
Re:Lemmings CSS Animation
by pwagland on Thursday November 05, 2026 @07:46AM
(#50378448)
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.
Re:Lemmings CSS Animation
by patwolf on Thursday November 05, 2026 @08:37AM
(#50378908)
I remember having Lemmings and messing with the animation sprites from the game--I don't recall if they were saved in a bmp format or if it required a tool to extract. I'd try to recolor their hair or change their outfits pixel by pixel, but there were a lot of animations and a lot of frames. I always wanted to use them to build a Tetris/Lemmings hybrid game (the two games with the best music), but never got around to it.
Okay, this reminds me of an game from a similar time period where there would be these two tanks firing at each other from across the screen, one at a time. Does anybody remember that and what it was called?
Re:Lemmings CSS Animation
by bradley13 on Thursday November 05, 2026 @11:31AM
(#50381163)
Cute. However, the fact that this is possible shows how ridiculously out of control CSS is. It is supposed to control appearance, and that does not entail being Turing complete.
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 that blew me away.
Nice! Your site is impressive and your achievements even more so.
html { overflow-x: clip; touch-action: manipulation; }
should fix them!
https://www.elizium.nu/scripts/lemmings/
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 arranged the scenery a bit differently.
Other than respawning them as you scroll around, so one starts in an appropriate place as a test comes into view, and resetting them automatically, perhaps on a timer, there probably isn't a better way to properly show it off than that.
[1] http://xpenguins.seul.org/ and updated at https://github.com/Grumbel/xpenguins-ng
[2] https://xpenguins-web.github.io/
it's also awesome that you took over maintenance of xpenguins since you are the original creator the characters.
way to go!
[1] https://www.youtube.com/watch?v=F_RmG9WB4BE
1991, Psygnosis (of course), Commodore Amiga (double of course!): my little brother was 9 y/o at the time and we were teenagers and we'd play Lemmings like crazy on our Amiga.
My little brother couldn't speak english yes but he'd imitate the "oh, nooooo" sentence Lemmings you'd "suicide" would make.
More than three decades later my brother is still nicknamed "Lem" after "Lemmings" and that's how we call him. And about two decades ago, he gave his consulting company a name sounding like "Lemmings" (spelling slightly different). He's still "Lem" and he still has got that company.
Oh noooooooo!
An evil game. Such fun. I wish they'd expanded on it more...
The size probably comes from that.
And I overenjoyed throwing lil marios around
Thank you for bringing this to life.
Ok, this is awesome.
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.
https://postimg.cc/gxvZHbgG
Explanation: https://www.youtube.com/watch?v=uZ1atMUOUMU
https://www.gamebrew.org/wiki/Lemmings_for_3DS
https://github.com/esoteric-programmer/lemmings_3ds
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.
https://www.youtube.com/watch?v=82cqmq6quXI
https://archive.org/details/win3_BANGBANG
https://www.addictinggames.com/strategy/tanks