Lemmings CSS Animation

Posted by MarkBlah 1 day ago

Counter407Comment77OpenOriginal

Comments

Comment by rfarley04 1 day ago

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

Comment by TimTheTinker 1 day ago

There's a modern macOS port of Lemmings here I've been playing for a few weeks (and several other classic 68k Macintosh game ports): https://roytinker.com/68k-ports/

Comment by frizlab 21 hours ago

Comment by TimTheTinker 20 hours ago

I tried that, but it seems buggy and large (2.06 GB!) compared to the 68k-ports version (about 1.5 MB)

Comment by frizlab 20 hours ago

> 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.

The size probably comes from that.

Comment by 20 hours ago

Comment by TacticalCoder 1 day ago

> ... 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.

Oh noooooooo!

Comment by detritus 1 day ago

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...

Comment by MarkBlah 1 day ago

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

Comment by SanjayMehta 1 day ago

I played this for dozens of hours with my dad yelling helpfully over my shoulder. I still have the floppy in storage, but with no drive to read it.

Comment by rfarley04 1 day ago

Comment by shevy-java 1 day ago

Agreed - but what is shown on the webpage here, is not really lemmings.

Comment by MarkBlah 1 day ago

Duh

Comment by Waterluvian 1 day ago

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.

Comment by tomcam 1 day ago

https://ablakey.ca/

Nice! Your site is impressive and your achievements even more so.

Comment by diginova 1 day ago

the base plates lighting up showing history of where the robot travelled is a fun detail

Comment by cs02rm0 1 day ago

I recently put lemmings into some clinic management software I've been working on as a software egg.

https://postimg.cc/gxvZHbgG

Comment by tosti 1 day ago

That's beautiful! I hope it doesn't measure and chart the patients ^-^

Comment by noufalibrahim 1 day ago

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.

Comment by tosh 1 day ago

Comment by noufalibrahim 1 day ago

That's the one! Thanks.

Comment by brettermeier 22 hours ago

Haha so nice that this random request has an answer, love this forum for that. Sorry for offtopic.

Comment by 1 day ago

Comment by ggsp 1 day ago

Cute :) It has a couple of zoom bugs on mobile, something like

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

should fix them!

Comment by xtracto 1 day ago

You can make the lemmings jump on mobile by scrolling down and up as a fast movement. Like catapulting/pushing them up

Comment by MarkBlah 1 day ago

Oh awesome thank you, I will add this in

Comment by tosti 1 day ago

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.

Comment by pwagland 1 day ago

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.

Comment by WorldMaker 21 hours ago

Page response might be smoother in both if the script switched from `setInterval` to `requestAnimationFrame`.

Comment by OuterVale 1 day ago

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.

Comment by grumbel 1 day ago

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/

Comment by MarkBlah 1 day ago

Haha that’s cool, need to hunt sheep.exe

Comment by em-bee 1 day ago

when i opened this thread my first thought was that i want pingus characters, not lemmings.

it's also awesome that you took over maintenance of xpenguins since you are the original creator the characters.

way to go!

Comment by jcattle 1 day ago

Just a note for you: Nothing at all shows up for someone who has prefers reduced motion on.

Comment by tniemi 1 day ago

Comment by piratebroadcast 1 day ago

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?

Comment by nilamo 1 day ago

That's also the tutorial for XNA/monogame from Riemer from way back in the day, if you're interested in making your own: https://github.com/simondarksidej/XNAGameStudio/wiki/Riemers...

Comment by Isaackoz 1 day ago

There were a few, but my favorite was "tanks".

https://www.addictinggames.com/strategy/tanks

Comment by moochamerth 1 day ago

Scorched Earth

Comment by unpleasurable 1 day ago

Comment by bradley13 1 day ago

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.

Comment by WorldMaker 21 hours ago

Comment by patwolf 1 day ago

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.

Comment by MarkBlah 1 day ago

Bmp

Comment by freshteapot 1 day ago

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.

Comment by Hunterson 1 day ago

Awesome, brings back memories of playing lemmings on my Amiga in the early 90s

Comment by MisterMunchkin 1 day ago

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

Comment by fschuett 1 day ago

Reminds me of a similar game I had as a kid (Dweebs 2: The New Breed).

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

Comment by adamddev1 1 day ago

Nothing good comes from vib...

Ok, this is awesome.

Comment by felipeerias 1 day ago

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.

Comment by dspillett 1 day ago

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.

Comment by 9dev 1 day ago

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.

Comment by alana314 1 day ago

This is fantastic.

Comment by VorticonCmdr 1 day ago

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

Comment by MarkBlah 1 day ago

A tribute to Psygnosis, just for fun

Comment by msephton 1 day ago

Psygnosis were the publisher, DMA Design were the developers (you might know them from their other big game: Grand Theft Auto)

Comment by richardfey 1 day ago

Funny how they keep hopping on a toggling horizontal scrollbar there at the bottom.

Comment by WhyIsItAlwaysHN 1 day ago

Thank you for making this. It was really fun and a really pleasant start to my day.

Comment by rob74 1 day ago

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...

Comment by filcuk 1 day ago

They are...

Comment by hoppp 1 day ago

On android they fall down along the side all the way to the bottom

Comment by nilail 1 day ago

Super funny idea ! But it does not follow the scroll down on Safari

Comment by swiftcoder 1 day ago

I love that they can also walk on the text headings

Comment by allexsendev 1 day ago

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

Comment by MarkBlah 1 day ago

The tick rate isn’t high so should be able to have thousands

Comment by allexsendev 1 day ago

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.

Comment by ckx 1 day ago

Really fun to play around with! Good job!

Comment by int32max 23 hours ago

we should make the web more fun and interactive like this

Comment by cheapcheerful 1 day ago

Awesome. Loved the originals.

Comment by ForHackernews 1 day ago

Seems like a good place to drag this one out: DHTML Lemmings from 2004(!) https://jezsoft.co.uk/online/lemm2/index.html

Comment by TheRealPomax 1 day ago

Lemmings JS + CSS Animation

Comment by ForgotMyUUID 1 day ago

So cute!

Comment by shevy-java 1 day ago

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.

Comment by jdw64 1 day ago

Oh, this game brings back memories

Comment by manif00ld 1 day ago

this made my day

Comment by metchio 1 day ago

this is awesome

Comment by memming 1 day ago

Now that's what I'm talking about.

Comment by tmountain 1 day ago

[dead]

Comment by clilog_d 1 day ago

[flagged]

Comment by monkeydust 1 day ago

Is there anyway to get the classic version of Lemmings (on Amiga/PC) playable on the Switch?

Comment by dole 1 day ago

There's a homebrew port of DOS Lemmings to 3DS, with an LLM it might not be too hard to get working.

https://www.gamebrew.org/wiki/Lemmings_for_3DS

https://github.com/esoteric-programmer/lemmings_3ds