DEV Community: mike dg

Small Bit Arcade Games + Site - Amazon Q Developer Quack the Code Challenger

mike dg — Sun, 11 May 2025 16:48:21 +0000

This is a submission for the Amazon Q Developer "Quack The Code" Challenge: That's Entertainment!

What I Built

I built Small Bit Arcade, a nostalgic virtual arcade experience that transports users back to the neon-drenched world of 80s gaming. The project features a retro-styled website with multiple arcade games including Mad Monkey, Slime Sucker, Missile Madness, and Sharky Shark, all presented in retro stye with Atari-like graphics.

Demo

You can experience Small Bit Arcade by visiting the general website or directly hop to one of the games below.
Games

Sharky Shark - Single button or screen tap, works on mobile
Mad Monkey - single button or screen tap, works on mobile
Missile Madness - requires a keyboard, does not work on mobile
Slime Sucker - WASD controls, not working on mobile. Least polished

Code Repository

No public code available for this repository.

How I Used Amazon Q Developer

Amazon Q Developer did almost every single bit of work in creating Small Bit Arcade. I basically added sounds aside from intensive prompting.

Innitial Game Setup I prompted games individually, had Q make changes based on new prompts. I had started with Pygame then decided I wanted to get the games working on the web. Q also ported them, often in 1 attempt.
Initial Site Setup: I used Amazon Q to help scaffold the Astro project structure. I gave guidance on what components I wanted and then strong design guidance for the 80's neon look.
SVG Game Icons: Creating the pixel-art style SVG game icons was challenging. I described what I wanted to Amazon Q, which then generated the SVG code for each game icon, saving me hours of manual work. First passes weren't great or representative of the game, but telling Q to look at the game code resulted in much more representative icons.
Responsive Design Troubleshooting: When the arcade cabinets weren't displaying correctly on mobile devices, I asked Amazon Q for help. It identified the issues in my CSS and provided fixes that made the site fully responsive, including media queries that adjusted the layout for smaller screens.
Game Logic Assistance: For the game mechanics, Amazon Q implemented collision detection for Sharky Shark and the jumping physics for Mad Monkey.

Amazon Q Developer felt like having an intern working for me. I was just throwing things over to AI and getting really useable reuslts back.

What impressed me most was Q's ability to understand the retro arcade aesthetic I was aiming for and provide solutions that maintained that visual style.

Retro Arcade made with Amazon Q

mike dg — Sun, 11 May 2025 16:44:52 +0000

This is a submission for the Amazon Q Developer "Quack The Code" Challenge: That's Entertainment!

What I Built

Demo

You can experience Small Bit Arcade by visiting the general website or directly hop to one of the games below.
Games

Sharky Shark - Single button or screen tap, works on mobile
Mad Monkey - single button or screen tap, works on mobile
Missile Madness - requires a keyboard, does not work on mobile
Slime Sucker - WASD controls, not working on mobile. Least polished

Code Repository

No public code available for this repository.

How I Used Amazon Q Developer

Amazon Q Developer did almost every single bit of work in creating Small Bit Arcade. I basically added sounds aside from intensive prompting.

Innitial Game Setup I prompted games individually, had Q make changes based on new prompts. I had started with Pygame then decided I wanted to get the games working on the web. Q also ported them, often in 1 attempt.
Initial Site Setup: I used Amazon Q to help scaffold the Astro project structure. I gave guidance on what components I wanted and then strong design guidance for the 80's neon look.
SVG Game Icons: Creating the pixel-art style SVG game icons was challenging. I described what I wanted to Amazon Q, which then generated the SVG code for each game icon, saving me hours of manual work. First passes weren't great or representative of the game, but telling Q to look at the game code resulted in much more representative icons.
Responsive Design Troubleshooting: When the arcade cabinets weren't displaying correctly on mobile devices, I asked Amazon Q for help. It identified the issues in my CSS and provided fixes that made the site fully responsive, including media queries that adjusted the layout for smaller screens.
Game Logic Assistance: For the game mechanics, Amazon Q implemented collision detection for Sharky Shark and the jumping physics for Mad Monkey.

Amazon Q Developer felt like having an intern working for me. I was just throwing things over to AI and getting really useable reuslts back.

What impressed me most was Q's ability to understand the retro arcade aesthetic I was aiming for and provide solutions that maintained that visual style.

Leetcode and Kotlin complaint

mike dg — Thu, 18 Jun 2020 13:13:30 +0000

Dear Leetcode,

Stop using val as a field in your tree nodes. If we are going to have to write two extra characters to get around the fact that val is a keyword in Kotlin, then let's just use value.

Am I the only one annoyed by this?

I made an extension to paste images into dev.to

mike dg — Thu, 18 Jun 2020 11:46:52 +0000

The extension is available here
https://github.com/mikedg1/dev.to.paste

At some point in the near future, I plan on going through the official publishing process. But it's out in source for now.
There's a few things in there that I'd like to fix before letting it completely loose too. Things like too much logging and relying on setInterval because I could not get any DOM changes to register when the url for the image upload updates.

One of the things that keeps me from writing articles is getting the non-textual content into the article easily.

Most editors let you paste them directly in, not dev.to :( You need to have a file and upload it.

We can fix that, and every image in the article was pasted via this extension.

My Process

I searched for the id of the file input element and wound up discovering this.

The important part is the onChange. We will need to trigger that so the rest of the website does it's thing.

This block waits for a paste, grabs the files if you have an image, then moves through the upload process programatically.

After the image is uploaded, we get a url that needs to be automatically inserted. Unfortunately, I ran into issues watching the DOM for value changes, so we wound up with using setInterval to check every second.

Not being a web developer, I just grabbed insertAtCursor from some wonderful Stack Overflow post.

Android studio Layout Tip 1

mike dg — Mon, 15 Jun 2020 11:34:24 +0000

I was recently asked "When coding layouts for android apps, do you use pure XML or the editor (drag and drop)"

I do both.

A mixture of both results in the highest producivity for me.

I'll often, somewhat haphazardly, drag and drop to get the basics comoponents in the relatively correct spots in the editor. Then, visually wire up the basic constraints, and then in code fine tune the remaining constraints to actually get everything lined up at run time.

One tip for making drag-and-drop go quicker, is to use the filtering capability of Android Studio and the rest of JetBrains IDEs.

If you type in the View palette, you'll see that it filters to what ever you type.