menu

CodePen

Hey Everybody! Come share Pens, ask front-end coding questions, and get/give feedback with your CodePen pals

Channels
Team

Escape Room!

January 28, 2019 at 9:33pm (Edited 3 months ago)

We're starting a brand new collaborative pen! The theme is Escape Room.

Thanks to Cheryl, @grumpy-bunny, for coming up with our theme!

Ideas:

Puzzles- Build a puzzle that needs solving. Draggable elements, math puzzles, memory puzzles, etc.

Visuals - What does our "room" look like? What's in it? Are there clues for the puzzles?

Escaped! - What happens once you've solved all the puzzles and have "escaped"?

Cheryl Velez (@grumpy-bunny), Dominic Duffin (@dominicduffin1), Linsey Reed (@linseyo) and Kristopher Van Sant (@rosieebob) will be guiding the pen along & contributing to it until it's finished. This means we might end up passing it back and forth multiple times.

We'd love for others to join in on the fun! If you want to share in the pen and have ideas for it please feel free to chat with us below. As always we're happy to help and offer suggestions to anyone else who wants to collaborate but is not sure what to add!

:)


January 28, 2019 at 9:34pm

:D YES!

like-fill
2
  • reply
  • like

YAY! I have no idea what I'm doing but YAY!

like-fill
2
  • reply
  • like

There are a lot ways we could structure it. Linear - have to solve one puzzle to get to the next. Or have a legend/menu from which you can choose which puzzle to do next (like a real escape room). Once all puzzles are complete (figure that's a global JS var), then you get cake (or something awesome)

  • reply
  • like

OOH .. or we could jump from code pen to code pen ... like they are not all on the same codepen .... you do yours, i do mine

like-fill
1
  • reply
  • like

😄😄😄

so many ideas! I also like the idea of it being an actual room. Maybe looking from the top in? And there being a stick figure or something that moves around the room and a door that opens for it to escape when all the puzzles are solved.

Edited
  • reply
  • like

OOH .. or we could jump from code pen to code pen ... like they are not all on the same codepen .... you do yours, i do mine

hmm that could be interesting, but then I kinda feel like that would make it a little less collaborative, and for others who might can only add something small might make it awkward

  • reply
  • like

hmm that could be interesting, but then I kinda feel like that would make it a little less collaborative, and for others who might can only add something small might make it awkward

True. I was just going to put a puzzle on screen haha I hadn't thought about the "scene"

  • reply
  • like

There are a lot ways we could structure it. Linear - have to solve one puzzle to get to the next. Or have a legend/menu from which you can choose which puzzle to do next (like a real escape room). Once all puzzles are complete (figure that's a global JS var), then you get cake (or something awesome)

yeah, leaning more towards something like the latter, closer to a real escape room! I like that a lot

  • reply
  • like

True. I was just going to put a puzzle on screen haha I hadn't thought about the "scene"

Could be like you click on something in the room and the puzzle pops up?

  • reply
  • like

Could be like you click on something in the room and the puzzle pops up?

Maybe. With a cool game-show-esq "3, 2, 1 Go! splash screen" or something

like-fill
1
  • reply
  • like

January 29, 2019 at 12:15pm

Hi everyone, I like to join in ;-) It will be my first time participating in "pass-the-pen" so I have no clue, how to do it, but I think it will be fun! I also like the idea, being it a real room and you click to solve a puzzle. Maybe place it in the "hacker" universe: a circuit puzzle, defeat popup spam mails, guess IP adresses, just some ideas ;-)

Edited
like-fill
3
  • reply
  • like

Welcome Daniel! So happy you can join in! Feel free to shout out any questions about the process along the way. We're doing this pen a little different than ones in the past. Once we have a clear idea going we'll start to build out the pen passing it to one another, or using CodePen's collab mode feature. You can contribute whatever you're comfortable with and have time for.

Love your ideas!! Those are great, and I definitely like the idea of the escape room itself having a theme

  • reply
  • like

I love all these ideas - now the question is - which ones do I like more than others?

  • reply
  • like

I like the idea of the top down look but I'm not sure how to go about it. I feel like you'd have to have some kind of perspective change. Or I'm just thinking about this game way to complicatedly.

  • reply
  • like

Hey everyone, I love this project and the ideas are so good!, i'm just learning web development so i may not be able to contribute, but i'd love to see how you build this and hopefully learn a lot!

like-fill
3
  • reply
  • like

i too like the idea of the perspective from the top

  • reply
  • like

Hey Erick! Welcome! Glad to have you here. 👋

No contribution is too small! Even if you're just throwing out ideas on puzzles or how it should look or what the interactions are like that's still contributing and helping the pen along 😀

  • reply
  • like
  • reply
  • like
like-fill
1
  • reply
  • like
  • reply
  • like

Here's a couple inspirations on top down views, top being clue, bottom I found through google photos, I think it's from a Sims game lol. But I think they both kinda give an idea of what it could be

  • reply
  • like

The clue rooms have a more simple hand drawn look, which might be easier for us to get to

  • reply
  • like

vs doing something more complex and detailed like the other one

Edited
  • reply
  • like

yeah i don't think it needs to be super detailed sometimes simplicity is best

like-fill
1
  • reply
  • like
Show more messages