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

Remember staying up late playing games on those chunky old computers? The satisfying click-clack of loading a floppy disk, the suspense of watching loading screens count bytes, those iconic chiptune sounds?

That's exactly what inspired me to create 8-BitHub for the Amazon Q "Quack The Code" challenge! I wanted to bring those nostalgic gaming experiences directly to GitHub READMEs, complete with authentic loading screens and all the retro feels.

Try It Out!

Before I explain how I built it, check out 8-BitHub in action:

How Amazon Q Helped Me Bring This Dream to Life

This project wouldn't have been possible without Amazon Q's help! When I explained my vision for an embeddable retro game collection to Amazon Q, it immediately understood what I wanted and helped me build a solid foundation.

I asked Amazon Q: "Can you help me design a core engine for retro-style games that would work in GitHub READMEs?" and it suggested this excellent starting structure:

// Core engine for 8-BitHub with Amazon Q's help
class RetroEngine {
  constructor(container) {
    this.container = container;
    this.canvas = document.createElement('canvas');
    this.canvas.width = 320;
    this.canvas.height = 240;
    this.ctx = this.canvas.getContext('2d');
    this.container.appendChild(this.canvas);

    // System palette (inspired by classic CGA/NES colors)
    this.palette = [
      '#000000', '#0000AA', '#00AA00', '#00AAAA', 
      '#AA0000', '#AA00AA', '#AA5500', '#AAAAAA',
      '#555555', '#5555FF', '#55FF55', '#55FFFF', 
      '#FF5555', '#FF55FF', '#FFFF55', '#FFFFFF'
    ];
  }
}

Amazon Q even suggested the perfect color palette inspired by classic systems - that authentic touch I was looking for!

The GitHub Challenge (That Almost Broke Me 😅)

So here's the thing - I hit a MAJOR roadblock! I originally wanted to create GitHub3DMI.emt files (my made-up name for GitHub embedded games) but found out GitHub strictly sanitizes HTML in markdown files.

This meant my dream of direct embeds was CRUSHED! All iframes, JavaScript, and interactive elements get stripped right out of READMEs.

But I didn't give up! With Amazon Q's help, I pivoted to create a hosted solution that users could link to instead.

Creating That Authentic Retro Feel

The most fun part was recreating that loading screen experience. Remember how computers used to show you exactly how many bytes were loading? Amazon Q helped me build that:

// Show authentic disk loading animation (improved with Amazon Q)
async showLoadingSequence(disk) {
  // Simulate the loading counter
  let loadedBytes = 0;
  const totalBytes = Math.floor(Math.random() * 64000) + 16000;

  while (loadedBytes < totalBytes) {
    ctx.clearRect(0, height/2 + 40, width, 20);
    ctx.fillText(`LOADING ${loadedBytes}/${totalBytes} BYTES`, width/2, height/2 + 50);

    // That random pause that made you wonder if the game crashed
    if (Math.random() < 0.1) {
      await new Promise(r => setTimeout(r, 300));
    }

    loadedBytes += Math.floor(Math.random() * 2000) + 500;
  }
}

Every time I test this code, I'm 10 years old again waiting for my game to load!

Sound Effects That Take You Back

I was stuck on how to make those perfect 8-bit sounds until Amazon Q suggested this awesome solution:

// 8-bit sound synthesis powered by Amazon Q
class ChiptuneSynth {
  constructor() {
    this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    this.sounds = {};

    // Create that disk insertion sound we all remember
    this.createSound('insert', [
      { type: 'square', freq: 220, duration: 100 },
      { type: 'square', freq: 440, duration: 200 }
    ]);
  }
}

The first time I heard that beep-boop sound, I literally got goosebumps! 🔊

Multiple Game Types

One of my favorite parts of this project was creating different game experiences. With Amazon Q's help, I built:

1. Arcade Game: A space-invaders style shooter with colorful enemies
2. Text Adventure: Remember Zork? This has the same "YOU ARE IN A DARK ROOM" vibes
3. Demo Scene: Those trippy visual effects that were SO impressive back in the day!

Amazon Q helped me solve a super tricky bug with the collision detection in the arcade game:

// Fix collision checking (Amazon Q saved me here!)
ArcadeGame.prototype.checkCollisions = function() {
  // Check bullet-enemy collisions
  for (let i = this.bullets.length - 1; i >= 0; i--) {
    const bullet = this.bullets[i];

    for (let j = this.enemies.length - 1; j >= 0; j--) {
      const enemy = this.enemies[j];

      if (Math.abs(bullet.x - enemy.x) < 10 && Math.abs(bullet.y - enemy.y) < 10) {
        // Remove the enemy
        this.enemies.splice(j, 1);

        // Remove the bullet
        this.bullets.splice(i, 1);

        // Add score and play sound
        this.score += 10;
        this.engine.audioEngine.playSound('shoot');

        break;
      }
    }
  }
};

I'd been stuck on this for HOURS until Amazon Q pointed out I needed to loop backwards through arrays when removing elements. Genius! 🧠

Check It Out on GitHub!

<iframe
  src="https://jacksonkasi1.github.io/8bithub/embed.html"
  width="320"
  height="240"
  frameborder="0"
>
</iframe>

<!-- Arcade Game -->
<iframe
  src="https://jacksonkasi1.github.io/8bithub/embed.html#arcade"
  width="320"
  height="240"
  frameborder="0"
></iframe>

<!-- Text Adventure -->
<iframe
  src="https://jacksonkasi1.github.io/8bithub/embed.html#adventure"
  width="320"
  height="240"
  frameborder="0"
></iframe>

<!-- Demo Scene -->
<iframe
  src="https://jacksonkasi1.github.io/8bithub/embed.html#demo"
  width="320"
  height="240"
  frameborder="0"
></iframe>

(If you enjoy it, please give the repo a ⭐ - it would make my day!)

What's Next?

I'm submitting this project for the Amazon Q Developer "Quack The Code" Challenge in the "That's Entertainment!" category. With Amazon Q's help, I was able to build something that brings back those nostalgic gaming experiences in a whole new way.

How to Use 8-BitHub

While GitHub sanitizes direct iframe embeds in markdown files, you can still use 8-BitHub on blogs and websites:

<!-- Works great on blogs and personal websites! -->
<iframe
  src="https://jacksonkasi1.github.io/8bithub/embed.html#arcade"
  width="320"
  height="240"
  frameborder="0"
></iframe>

CRT Effects That Make It Feel Real

I wanted that authentic CRT monitor look with the scanlines and glowing pixels. Amazon Q helped me get that perfect retro screen effect:

/* CRT effect - just look at those scanlines! */
.crt-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 10;
}

.scanlines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(0, 0, 0, 0.3) 51%
  );
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 12;
  opacity: 0.5;
}

This made SUCH a difference to the overall feel - suddenly the games didn't just play retro, they LOOKED retro too!

WE DID IT! 🎉

This project was SO MUCH FUN to build! Amazon Q helped me speed up development by suggesting code structures, helping debug collision detection, and even offering optimization tips I wouldn't have thought of.

If you're thinking about joining the Amazon Q "Quack The Code" Challenge, DO IT! It's amazing what you can build with a little help from AI.

Now excuse me while I go play my own game for a while... for testing purposes, of course! 😉

Made with 💾 and the help of Amazon Q for the "Quack The Code" Challenge!