Stylemancer by mattdotam

[raw]
made by mattdotam for Ludum Dare 45 (JAM)

Learn CSS in a cyberpunk setting.

Learn CSS skills from nothing. Use them to manipulate the environment, solve puzzles, and progress.

@mattdotam

​​Controls:​

WASD/Arrows: Movement. Space: Jump. Shift: Run.

Run+Jump performs a bigger jump.

Use the mouse to select objects in the environment when the time comes.​

I coded this with vanilla JavaScript, and CSS (of course!).

Game works with Chrome and Firefox. Have not tested other browsers.

screen1.png

Ratings

Overall 170th 3.887⭐ 33🧑‍⚖️
Fun 111th 3.919⭐ 33🧑‍⚖️
Innovation 12th 4.419⭐ 33🧑‍⚖️
Theme 727th 3.113⭐ 33🧑‍⚖️
Graphics 660th 3.355⭐ 33🧑‍⚖️
Humor 374th 3.093⭐ 29🧑‍⚖️
Mood 468th 3.444⭐ 29🧑‍⚖️
Given 24🗳️ 30🗨️

Feedback

Jayometric
08. Oct 2019 · 01:54 UTC
Really cool concept! At first I wondered why the box came up at the bottom and I expected dialogue, but then it became clear. Nicely done!
🎤 mattdotam
08. Oct 2019 · 01:56 UTC
Thanks @jayometric! My first reviewer. Glad it made sense in the end. Thank you for playing. Now to review your game :smiley:
Adam Konig
08. Oct 2019 · 02:04 UTC
That was actually dope. I love a good coding game. Great for teaching CSS to a newbie, could be very cool online resource one day for someone. Also loved the intro really clean spooky atmospheric. Only feedback I would give would be to add some more sprites for tiles and such but you said that was all you could do in the time you had so I say great job
Adam Gaskins
08. Oct 2019 · 02:04 UTC
Awesome, I love it! I always love coding games. My only complaint is that it was so short!!!
zissou
08. Oct 2019 · 02:04 UTC
Jumping feels a bit sluggish.
Idontknow
08. Oct 2019 · 02:05 UTC
Like the concept. But, I don't like needing to lower my font size just to be able to fit all of the text ontot he screen. (I use Very large text size so I'm not squinting at everything. :P)
pinosaur
08. Oct 2019 · 02:06 UTC
Woooow, that was a very interesting concept. Adding sound effects and music would have polished off the game. Amazing job nonetheless!
sacredbacon
08. Oct 2019 · 02:06 UTC
Awesome teaching tool for CSS would love to see more. Great job
BrokenMirrorMedia
08. Oct 2019 · 02:07 UTC
I think I saw something about this game on Twitter, so when it came up here I was exited to check it out. Overall I think it's really cool, definitely an interesting learning tool, I could see this being really helpful if it was expanded upon. I noticed a slight animation glitch when running forwards into a wall but other than that I didn't notice anything wrong with the game at all.
Vanea
08. Oct 2019 · 02:07 UTC
that is a seriously interesting concept. I think it would be super interesting if expanded upon further. I love it!
FlashViper
08. Oct 2019 · 02:10 UTC
Nice game! I love the concept of learning html and css through a video game. It's almost like hacking.
🎤 mattdotam
08. Oct 2019 · 02:13 UTC
The comments are coming thick and fast!! Thanks everyone. Some replies:

@adam-konig: Thank you for digging the vision and atmosphere. I didn't have the full 3 days for the jam; definitely more sprites.

@adam-gaskins: I feel the same way. I had another 10 tutorial exercises (and terrible puns) drafted to include. Soon!

@zissou: I could have spent longer on the physics, for sure. Thank you for testing this out for me.

@idontknow: I spent so long making this responsive, and completely forgot to set a standard font-size. Poor form for a CSS game! Thank you for playing.

@pinosaur: Once I learn those skills :) Next LD!

@sacredbacon: Seriously considering expanding on this, thanks to feedback like yours. Thanks.

@brokenmirrormedia: Glad you dig the vision! Yes the run animation bugs out against the walls. It's on my list of bug fixes, thanks for pointing it out.

@vanea: Thank you!!!

@flashviper: It is hacking. And coding is modern-day wizardry. Just make the right incantation, and you can create anything you can imagine.

Feeling really encouraged to keep going with this learning tool concept. Thanks everyone!!! :heart: Now to check out all your games.
Keith Wang
08. Oct 2019 · 03:08 UTC
I have seen games about coding before, but I haven't seen any game about CSS(let me know if there are any), which I now realized fits perfectly well with games.
🎤 mattdotam
08. Oct 2019 · 03:10 UTC
@keith-wang Sure does! I can't think of any either. This was fun to make as a proof-of-concept. So much left to explore (changing inner content, animations for moving platforms, etc). Thanks for playing.
bubblewandgames
08. Oct 2019 · 04:35 UTC
This is so clever I love it!!
Seth Marx
08. Oct 2019 · 04:51 UTC
Fantastic level design that prompts the player to try things out. Loved the word play too :)) The setting reminds me of Mirror's Edge which strikes a chord with me too <3
🎤 mattdotam
08. Oct 2019 · 06:09 UTC
@bubblewandgames: thank you!

@seth-marx: Glad you enjoyed my writing! Mirror's Edge is right on for comparing the settings. Thanks for playing.
AdamCYounis
08. Oct 2019 · 10:07 UTC
I was so disappointed with how short this game was, because the concept and content were excellent. It wasn't a standout effort on the theme or graphics, but it stood very tall on the actual gameplay.
🎤 mattdotam
08. Oct 2019 · 10:34 UTC
@adamcyounis It was great to watch you play the game on your stream today. I really valued the honest review, and appreciate the praise now. My take on "start from nothing" was with regards to a player's CSS skills (i.e. not needing any). I need to make more levels for this, there is so much to explore with CSS as a mechanic.
Yeomsley
08. Oct 2019 · 16:43 UTC
Nice game! Wish it was longer, you should flesh it out for a full release! :smile:
🎤 mattdotam
09. Oct 2019 · 02:59 UTC
@yeomsley I am seriously considering it. The feedback from you all is very encouraging!
AfroAnt
09. Oct 2019 · 03:15 UTC
Heck yeah! This game rocks! What little you have gets me excited about where it could go. You might get an over-representation of adulation here since we're all in it for the love of programming/gamedev, but...I want more!
🎤 mattdotam
09. Oct 2019 · 04:12 UTC
@afroant: you get the vision, rock on. There is a lot of places to take this concept. You raise a good point; like you have a "comedian's comedian", this might be a "game developer's game", if that makes sense. I do need a way to keep people updated on where I take this. Thanks for playing, and for your kind words!
Hare Software
09. Oct 2019 · 10:02 UTC
An amazing concept! I normally hate css, but this was the first time I actually had fun with it. Totally agree with your message at the end, reminded me of this quote by Kropotkin: "Idlers do not make history: they suffer it!". Well done and keep creating!
🎤 mattdotam
09. Oct 2019 · 10:05 UTC
@hare-software: glad the game and message struck a chord. Think I'll keep developing this idea. Will you do the same for your revolutionaries game? Thanks for playing :
Hare Software
09. Oct 2019 · 10:18 UTC
@mattdotam Certainly will, I want to keep the basic idea, but add a lot of optional stuff and content so people can explore more. Perhaps I'll even represent some different revolutionary ideologies in dialogue or information screens, maybe that will inspire someone. If not, hope they still had a good time ;)
jharler
09. Oct 2019 · 19:22 UTC
Wow, very imaginative and innovative! I enjoyed that a lot. I did notice an animation glitch when you pushed up against a wall, but that's a minor complaint. Overall, you did a great job!
🎤 mattdotam
10. Oct 2019 · 00:50 UTC
@jharler: all feedback welcomed, letting me know about glitches is welcomed. Thank you for playing, glad you liked the concept.
NachtWitch
10. Oct 2019 · 01:22 UTC
Wow, could use more polishing in my opinion but let's not focus on that, the game play is fun, the player is responsive, and the graphics look great, absolutely loved the game!
Danferb
10. Oct 2019 · 12:05 UTC
Loved it! Really cool concept and well developed. I was craving for more after finishing, :D!

If you need some feedback, there's some weird glitches with running and walls, but other players have already said the same.

Great game!! Hope you get a lot of attention after this! :D
Alexsogge
10. Oct 2019 · 18:55 UTC
Nice idea. Is this a easter egg at the credit scene, where you can set the top value of the left wall? ^^
Neon Glass
12. Oct 2019 · 16:51 UTC
Amazing potential!

With a lot of stuff already said by others, I'll definitely be looking forwards to playing a full version in the future!
Kalucifer
13. Oct 2019 · 02:08 UTC
You are the kind of people the world needs! Please finish this, i'll follow up! (In the first bridge i wrote width : 100% by instinct haha). Thank you!
🎤 mattdotam
13. Oct 2019 · 02:18 UTC
@nachtwitch: oh yes, the work has just begun, glad you liked this first effort. Thanks for playing!

@danferb: yep I know exactly what that bug is, but in the spirit of LDjam I won't fix it in this version. Thank you for your kind words and feedback.

@alexsogge: it's an easter egg if easter egg is another word for a bug ;)

@neon-glass: fantastic. I will continue developing this. I need to pick a medium for a devlog. Thinking twitch and twitter?

@kalucifer: such kind words, my sincere thanks, you all made my morning down here in Aus. I need to implement %s, along with em, rem... Please do follow up. Best way will be via twitter, same username @mattdotam
nitroglycerine
27. Oct 2019 · 10:54 UTC
cool game! I liked it very much!