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.
I made a HTML and CSS platforming game · HackerTrans
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.