Lemmings CSS Animation

(markblah.github.io)

169 points | by MarkBlah 4 hours ago

25 comments

  • rfarley04 1 hour 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

    • MarkBlah 48 minutes 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
  • Waterluvian 3 hours 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.

    • tomcam 2 hours ago
      https://ablakey.ca/

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

    • diginova 3 hours ago
      the base plates lighting up showing history of where the robot travelled is a fun detail
  • ckx 5 minutes ago
    Really fun to play around with! Good job!
  • VorticonCmdr 12 minutes 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
  • MisterMunchkin 30 minutes 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
  • OuterVale 2 hours 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.
  • ggsp 3 hours ago
    Cute :) It has a couple of zoom bugs on mobile, something like

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

    should fix them!

    • MarkBlah 2 hours ago
      Oh awesome thank you, I will add this in
  • freshteapot 1 hour 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.

  • noufalibrahim 2 hours 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.
  • grumbel 2 hours 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/

    • jcattle 1 hour ago
      Just a note for you: Nothing at all shows up for someone who has prefers reduced motion on.
    • MarkBlah 1 hour ago
      Haha that’s cool, need to hunt sheep.exe
  • richardfey 1 hour ago
    Funny how they keep hopping on a toggling horizontal scrollbar there at the bottom.
  • adamddev1 41 minutes ago
    Nothing good comes from vib...

    Ok, this is awesome.

  • felipeerias 2 hours 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.

    • 9dev 1 hour 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.
  • rob74 1 hour 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...

  • WhyIsItAlwaysHN 1 hour ago
    Thank you for making this. It was really fun and a really pleasant start to my day.
  • allexsendev 1 hour 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

    • MarkBlah 45 minutes ago
      The tick rate isn’t high so should be able to have thousands
      • allexsendev 42 minutes 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.
  • alana314 3 hours ago
    This is fantastic.
  • swiftcoder 1 hour ago
    I love that they can also walk on the text headings
  • nilail 2 hours ago
    Super funny idea ! But it does not follow the scroll down on Safari
  • jdw64 45 minutes ago
    Oh, this game brings back memories
  • MarkBlah 4 hours ago
    A tribute to Psygnosis, just for fun
  • cheapcheerful 2 hours ago
    Awesome. Loved the originals.
  • memming 2 hours ago
    Now that's what I'm talking about.
  • tmountain 1 hour ago
    [dead]
  • clilog_d 2 hours ago
    [flagged]