For a while I've had the idea in the back of my head, of a game where someone can learn HTML and CSS by actually jumping across/ interacting with the things they are creating and changing.
Normally I'm sure that using canvas or something would be a much better plan for this kind of thing, but it really mattered to me that user inputted HTML and CSS behaved as close as possible to how it would in the real world. A fair bit of research told me that trying to emulate that on canvas wouldn't work well.
So, instead - the game has logic to add user-submitted HTML and CSS directly to the page. On each new code submission the game updates its list of object you might hit. On each step of the game loop, the collision detection service checks each of the listed objects with some fairly simple bounding box stuff.
I have to say I really enjoyed some of the levels, and coming up with ways to make things like "border radius" tangible in the game world. I would have loved to include challenge levels where CSS experts can test their skills, unfortunately because of the limitations of the implementation that doesn't look possible, but if anyone has ideas I would love to hear them.
Had to include a couple hacks to make all of that work well. I.e. having the cube constantly bounce massively simplifies things because the game only has to detect impact and trigger a jump. That's important because there's no real communication between the game state and CSS animations, apart from when the loop is checking for collisions. So instead of having to handle the process of moving the player up and down at the same speed as platforms, we just trigger a jump, the player probably doesn't notice any significant overlap between the cube and the moving platform, and if the platform is moving up/down it's just that the next bounce comes sooner or later.
Yea sorry, unfortunately not something the SQL library I used supports, select * is the best for now but I'm adding "table preview" to the list for future updates!
I have been thinking SQL is getting more and more important for people to learn so wanted to do something for that and I decided if I was gonna do it I wanted it to be an impressive attempt (plus I wanted to learn JS web dev, and midjourney image creation gave me the chance to really step up the visuals)
I've tried to hit a bit of a balance between english-sounding instructions and being clear on table columns, will definitely note this down to think more about
A charitable read! Just a screw up on my part. A lot of this ended up quite hard-coded so when I updated tables sometimes I missed updating some instructions. Thanks for spotting!
And very glad you've been enjoying it aside from that! :-)
Definitely open to feedback in that regard! Somewhat embarrassingly In both English and have a degree in English... but I had massive scope creep on this and was usually smashing out bits on planes, trains, and automobiles so tried to catch silly things but clearly missed some!
Yep! I have put a bit of thought into why this still matters and I'm not attempting to plug a twitter thread but I laid out a lot of my logic for why we should still bother to know this stuff here; https://twitter.com/RobinLord8/status/1647903067013013505?t=...
Essentially I think the fact that LLMs can do some of this makes it MORE valuable to know how to read it. That's because we're less likely to get into frustrating situations where we know the answer but are off by a character but simultaneously because LLMs can't understand the tables like we can it is valuable for us to be able to direct the investigation/ check the results
Normally I'm sure that using canvas or something would be a much better plan for this kind of thing, but it really mattered to me that user inputted HTML and CSS behaved as close as possible to how it would in the real world. A fair bit of research told me that trying to emulate that on canvas wouldn't work well.
So, instead - the game has logic to add user-submitted HTML and CSS directly to the page. On each new code submission the game updates its list of object you might hit. On each step of the game loop, the collision detection service checks each of the listed objects with some fairly simple bounding box stuff.
I have to say I really enjoyed some of the levels, and coming up with ways to make things like "border radius" tangible in the game world. I would have loved to include challenge levels where CSS experts can test their skills, unfortunately because of the limitations of the implementation that doesn't look possible, but if anyone has ideas I would love to hear them.
Had to include a couple hacks to make all of that work well. I.e. having the cube constantly bounce massively simplifies things because the game only has to detect impact and trigger a jump. That's important because there's no real communication between the game state and CSS animations, apart from when the loop is checking for collisions. So instead of having to handle the process of moving the player up and down at the same speed as platforms, we just trigger a jump, the player probably doesn't notice any significant overlap between the cube and the moving platform, and if the platform is moving up/down it's just that the next bounce comes sooner or later.