I’m writing a science fiction game for my nephews which I hope will be finished before they’re too old for it! In the game you can travel between five different planets via a teleport system. I’d like to be able to change the background colour for each planet, so that it’s obvious at a glance which one you’re on.
I hadn’t seen this! As far as I know, since
colour definitions are only allowed in the
game block, they are fixed for the entire game.
I can explain my solution in any detail you need. I’m not a developer, and my JS is actually very very bad, and the solution is clunky and inelegant as hell! But it worked. There are a few pieces:
- In the Gruescript code:
- Gruescript rules that check tags in rooms and run js functions accordingly. Careful about that, I think there’s some bug in the
js command in Gruescript.
- In the final HTML code of the game:
- Additional HTML divs that contain the background, one for each different background.
- CSS for those divs. 100vh and vw, fixed, negative z-index, the colour gradient background, and animation.
- The JS functions called from Gruescript. They add and remove an “enabled” class to the divs. The enabled div has 100 opacity, the others have 0.
And that’s it. Then there’s the map and the pics and the functions that displayed them, and now that was a proper nightmare (with bugs that I can’t kill because I can’t discover when they happen), but the background is simpler.
I don’t think there’s any way of doing this without hacking the HTML and JS of the generated file. If you want I can point you the relevant parts of my code, it’s really not that much.
Thanks for sharing these details @pseudavid! @nilsf has also helped me with some simple code for changing the main background colour. I’m probably going to leave it at that for now and make some decisions about the appearance of the game when I get closer to finishing it.