Ask coding questions

← Back to all posts
KaboomJS - How can I center the levels/how can I make the game responsive?
amehdi96 (0)

Hello, I have been playing around with KaboomJS just for fun and have been working on a Space Invaders clone. I have a couple of levels and a boss level so far.

When I play the game in the Replit preview pane, the levels fit fairly well in the pane and it makes sense. However, when I take the URL of the game and play it in a new tab, while the title screen and the player object appear centered, the levels themselves (and the enemies in them) are always in the top-left corner and aren't centered. Also, when I resize the window, the game isn't responsive to the changes.

How can I make it so that the levels are centered on the page and the game stays responsive and changes in scale depending on the window size? I have tried playing around with the fullscreen and scale options in the main Kaboom settings in Replit, but they haven't done the job for me.

Thanks in advance!

Answered by Coder100 (19278) [earned 5 cycles]
View Answer
Coder100 (19278)

Unfortunately, you can't with the kaboom language settings, you will have to manually do it yourself

amehdi96 (0)

@Coder100 I see, thanks. So I guess I have to play around with the CSS? I was trying to do that before but it seems like everytime I hit Run in Replit it overwrites the CSS I write in index.html. I guess I'll have to download it locally and try stuff out myself.

Coder100 (19278)

yeah, the kaboom language doesn't allow for it, you will have to manually import the library in an HTML repl @amehdi96

amehdi96 (0)

@Coder100 Alright cool makes sense, thanks a lot!