One of the concepts I want to exercise for this game journey is a mobile first perspective.  I’ve NEVER done that approach before and haven’t successfully created a game with a good mobile experience yet.    So, the absolute first thing I want to accomplish for this project is nailing down the responsive design and being able to detect the device type for touch screen controls or switching to keyboard.

I think there’s a bit of a knowledge gap online about this.  There’s a TON of resources about ‘responsive design’ for web technologies.  But I struggled finding good information about what is a good base template for a mobile device for game dev.  I think making a mobile game online has a few unique requirements. 

Fortunately, Game Dev Shift Discord, https://discord.gg/SjjxGa33, came through and I was able to get some guidance by those that have walked this path before me.

There’s some CSS magic that allows for the mobile screen to behave properly.

This seems to be helping the screen control itself properly.  I am testing this in a few different ways.  I am deploying to vercel so I can test on my surface tablet.  Also, I have my iPhone.  The responsive nature of this seems to be in place.  But I struggled prior to getting assistance with this. 

One of the design decisions I had in my mind initially was this to be a ‘landscape only’ format game.  I couldn’t see someone playing this game in portrait mode for a phone.  I did some light testing on my phone at this stage, and I think it’s ‘plausible’ to play the game in portrait mode, and that idea might make this easier to code in responsive manner at that point.

Based on my discussions in Discord, I think I’m leaning towards adding a touch event listener be used to switch on the touch controls for mobile, thus…. If my surface tablet is being used as a desktop, the keyboard is bound.  I think that covers this section.

 This currently hosted game site: https://asteroids-revisited.vercel.app/

Twitter: @jyoung424242

SlideShare: https://www.slideshare.net/JustinYoung3/next-gen-asteroids

GitHub: https://t.co/utxHxXKdOz