css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

My contribution to the Codepen Halloween challenge. Lot's of stuff going on here. The concept initially started off as a simple 'Walk down a corridor and avoid traps' game, but it just kinda escalated from there. I decided i wanted to go up and down, solve puzzles etc.

The logic behind it is actually relatively simple and uses a 7+ year old technique. By clicking on an arrow (in this case a label), it checks the relevant input and then using the : checked pseudo selector, we can traverse down the DOM the correct amount of iterations and shift the entire viewport a whole 'segment' over. The lifts work entirely the same way except instead when we click down, we are actually checking the segment below.

As for game logic, we use the same concept again. The pickaxe for example is a label for a checkbox. When we click it, the checkbox is checked, then, when we click the boulder, we tell css to see if both the boulder and pickaxe inputs are checked. If it is, display it none, otherwise show a message.

Don't ask how i did the lock mechanism....i kinda fluked it somehow. Just a bunch of check boxes overlayed on top of each other. They hide when clicked to show the one underneath. As for how the code is checked, take a look at the checkCode mixin.

Everything else is pretty standard. Bunch of animations, a circular clipping mask for the game viewport etc.

I added a bunch of mixins to help add animated sprites, object comparisons and interactive items into the grid. Things like makeInteractiveObjectAt($objectID, $Segment, $Tile)

The sprites were drawn by me in Pyxel (would not have been able to do this if i hadnt bought it). Unfortunately i'm not a pixel artist, i really wish i was because this would really have the quality feel i wanted. If you're a pixel artist and would like to contribute though.... :)

I had some potential pitfalls along the way. One of them being an intermittent 413 error from Codepen. I think this had something to do with the compiled SASS being too large. It forced me to rethink some of the ways things were written. It is however, still very very un-optimised. It started off being extremely versatile, change a few numbers here and boom different sized level, all inputs and label generated for you. But now if i change a digit somewhere it will more than likely destroy the massive chain of interactions.

This Pen is a fork, but the parent Pen is now private.

Comments

  1. Great work man !!

  2. 🤯Wow this is incredible

  3. wow incredible complex

  4. Super duper awesome ⭐⭐⭐⭐⭐

  5. this is insane, great work man!

  6. Unreal! The secret note symbols were a clever touch!

  7. oh that was a lot of fun. so inspiring!

  8. super impressive, nice works!

  9. sweet lordy this is awesome!

  10. This is insane.

  11. That was awesome! Took me like 20 mins to figure out lol it shouldn't have taken that long... Great Job!

  12. I've seen the title, and i've laught so i clicked on and then... wut?Oo. I didn't take a look at the trick behind the scene but i have to tell i'm really impressed! Good job

  13. An elegant idea and a great work. I just bow before that intense work with all those checkboxes. That requires dedication.

  14. Great job! This game is incredible!!

  15. Probably this Pen was the reason for Codepen server headache. lol Absolute Brilliant. A masterpiece for sure.

  16. @niush Haha, you know it's funny. Codepen's servers went weird when i was getting a bunch of 413 errors! Sorry Codepen :)

  17. THIS IS AMAZING

  18. This is amazing! Awesome job!

  19. Check boxes. Brilliant!

  20. that is really insane!

  21. Awesome but the padlock is not working on Firefox :/

  22. Perhaps the greatest no-JS pen I've ever seen

  23. This is incredible work, seriously. I have a question about it though:

    I found the box of fuses and the game ended and displayed "Thanks for playing." I'm not sure if I won or died.

  24. super impressive.

  25. I'm gonna have to re-evaluate how much I know about CSS. This is just amazing. AMAZING!!!

  26. Amazing project ! Both the game and the code are impressive :) Even if the game is simple it's immersive and I love the graphics. Thanks for this pen <3

  27. This is so impressing I cant even

  28. @siege211 Hmm that sounds like a bug. You need to find the dynamite and the fuses before you can use it on the exit

  29. Really nice, congratulations !

  30. This is probably the coolest thing I've ever seen done with pure css.

  31. Excuse me but what the fuck dude. Amazing.

  32. Kirill @KIRILL_VASILEVICH on

    Awesome, but I can't complete the game :(

  33. This is just awesome!! It's incredible to dig through your code – I'm fascinated! Keep it up <3

  34. Sometimes i'm just impressed with what people can do in Codepen. Very amazing!!!!

  35. How Do you make an Interactive adventure game purely out of CSS and none of it is JS?

    Questions aside This is an Amazing Pen!

  36. Does anyone know what the padlock code is? I always get stuck at the padlock

  37. Wow... incredible! How many hours did you invest in this game?

  38. @siege211 @jcoulterdesign The bug is that you can leave the exit area without closing the "If only i had some dynamite & fuses" message, thus leaving the exit checkbox checked. And then, when you find the dynamite and fuses, the rule for ending the game is triggered immediately. There is a similar bug down at the waterfall.

    Adding this CSS is one way to solve it:

    /* Dont't leave waterfall and exit messages hanging */
    input#interactiveObject13:checked ~ .viewport .game_segment__control,
    input#interactiveObject17:checked ~ .viewport .game_segment__control {
        display: none;
    }
    

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...