본문 바로가기
Jaden's spectrum/💡 Tech Tips

[Game Builder Challenge] Retro-Tetris with Amazon Q (part. 1)

by JadenWe 2025. 6. 27.
반응형

Your chosen game and why you picked it

In the first place, I made it after seeing this article.

I've never done any game development before, but I found an interesting game challenge. With a week to go, Amazon Q's powerful features quickly made simple games. So I learned a lot of big and small things, and I felt a lot of productivity gains.

I chose Retro Tetris. Tetris was a pretty tough challenge for me, new to game development, because it needed a bunch of algorithms, a bunch of features. But with the help of prompts, I was able to make it pretty easy. I felt it was important to lead the prompts a little smarter and more precise.

Effective Prompting Techniques Discovered

1. Describe Problems with Context

Effective:

 - After pressing spacebar for hard drop, then using arrow keys to move, the next block doesn't appear

 - When I press ESC, the pause message appears but it's not centered

 

Ineffective: 

 - The game has a bug
 - Something is wrong with the controls

 

2. Build Features Incrementally
Instead of asking for everything at once, break it down:
1. Create a basic game board
2. Add block movement with arrow keys
3. Implement collision detection
4. Add line clearing mechanics
5. Create a scoring system

 

3. Be Specific with Numbers and Positions

Effective:

 - Move the block spawn position from the 5th column to the 6th column
- Position the level-up popup at x=460, y=350

Ineffective:

 - Adjust block positioning
 - Move the popup to a better location

 

How AI handled classic programming challenges

 

Collision Detection Algorithm

AI generated an efficient 2D grid-based collision system:

public checkCollision(piece: Tetromino): boolean {
    const shape = piece.shape;
    for (let y = 0; y < shape.length; y++) {
        for (let x = 0; x < shape[y].length; x++) {
            if (shape[y][x]) {
                const boardX = piece.x + x;
                const boardY = piece.y + y;
                
                if (boardX < 0 || boardX >= TetrisBoard.BOARD_WIDTH || 
                    boardY >= TetrisBoard.BOARD_HEIGHT ||
                    (boardY >= 0 && this.grid[boardY][boardX] > 0)) {
                    return true;
                }
            }
        }
    }
    return false;
}

 

 

Examples of development automation that saved you time

Project Setup Automation

I was very low on building and running the game, which helped me a lot.

 

AI generated complete build configuration:

{
  "scripts": {
    "build": "tsc && vite build",
    "deploy": "npm run build && gh-pages -d dist"
    ......
  },
  "devDependencies": {
    "vite": "^6.2.0",
    "typescript": "~5.7.3",
    "gh-pages": "^6.1.1"
  ....

 

 

Automatic Code Refactoring

Transformed a monolithic 300+ line class into modular architecture:

 

Before: Single large update method

After: Separated concerns with dedicated methods for timing, rendering, and game logic

 

 

Constant Extraction

AI automatically identified and extracted magic numbers:

private static readonly GAME_WIDTH = 1000;
private static readonly GAME_HEIGHT = 800;
private static readonly BOARD_X = 250;
private static readonly BOARD_Y = 50;
private static readonly DROP_SPEED_BASE = 1500;

 

 

 

GitHub Pages Deployment Setup

 

Generated complete Vite configuration for deployment:

export default defineConfig({
  base: '/retro-tetris/',
  build: {
    outDir: 'dist',
    assetsDir: 'assets'
  ........
});

 

 

Code examples of interesting AI-generated solutions

Retro-Style 3D Button Effect

 

AI translated visual reference into CSS-in-JS implementation:

private createRetroButton(text: string, x: number, y: number): Container {
    const buttonContainer = new Container();
    
    const button = new Graphics();
    button.rect(0, 0, 160, 50);
    button.fill(0x4A4A4A);
    
    // 3D effect implementation
    button.rect(0, 0, 160, 3).fill(0xCCCCCC); // Top highlight
    button.rect(0, 0, 3, 50).fill(0xCCCCCC);  // Left highlight
    button.rect(0, 47, 160, 3).fill(0x222222); // Bottom shadow
    button.rect(157, 0, 3, 50).fill(0x222222); // Right shadow
    
    button.interactive = true;
    buttonContainer.addChild(button);
    
    const buttonText = new Text(text, {
        fontSize: 18,
        fill: 0xFFFFFF,
        fontFamily: 'Arial',
        fontWeight: 'bold'
    });
    buttonText.anchor.set(0.5);
    buttonText.position.set(80, 25);
    buttonContainer.addChild(buttonText);
    
    return buttonContainer;
}

 

 

Dynamic Difficulty Scaling

 

Level-based obstacle generation system:

public addRandomBottomBlocks(level: number): void {
    const blockRows = Math.min(level, 10); // Level equals number of rows, max 10
    const blockDensity = Math.min(0.3 + (level * 0.1), 0.8);
    
    for (let row = 0; row < blockRows; row++) {
        const y = TetrisBoard.BOARD_HEIGHT - 1 - row;
        for (let x = 0; x < TetrisBoard.BOARD_WIDTH; x++) {
            if (Math.random() < blockDensity) {
                this.grid[y][x] = Math.floor(Math.random() * 7) + 1;
            }
        }
    }
    
    this.renderWithCurrentPiece(null);
}

 

 

Animated Level-Up Popup

 

Blinking text effect with automatic cleanup:

private showLevelUpPopup(): void {
    const levelUpText = new Text(`LEVEL ${this.gameState.level}!`, {
        fontSize: 48,
        fill: 0xFFFF00,
        fontWeight: 'bold'
    });
    levelUpText.anchor.set(0.5);
    levelUpText.position.set(460, 350);
    levelUpText.name = 'levelUpText';
    this.addChild(levelUpText);
    
    let blinkCount = 0;
    const blinkInterval = setInterval(() => {
        const text = this.getChildByName('levelUpText');
        if (text) {
            text.alpha = text.alpha === 1 ? 0.3 : 1;
            blinkCount++;
            if (blinkCount >= 10) {
                clearInterval(blinkInterval);
                this.removeChild(text);
            }
        }
    }, 200);
}

 

 

Screenshots or gameplay footage of your final creation

Core Gameplay Features

 - 12x20 game board with pixel-perfect rendering

 - Seven standard Tetromino pieces (I, O, T, S, Z, J, L)

 - Proper piece rotation and collision detection

 - Line clearing with cascade effect

 - Progressive speed increase by level

 

User Interface Elements

 - Real-time score and level display

 - Next piece preview window

 - Pause/resume functionality

 - Game over screen with retry/home options

 

Visual Design

 - Retro aesthetic with 90s-style button design

 - Pixel art styling with clean borders

 - Smooth animations and transitions

 

Level Progression System

 - Level increase every 10 lines cleared

 - Dynamic obstacle generation (level = number of obstacle rows, max 15)

 - Increasing game speed with level progression

 

Control Scheme

 - Arrow keys for movement and rotation

 - Down arrow for soft drop

 - Spacebar for hard drop

 - ESC for pause/resume

 

 

012

 

 

 

https://github.com/JadenWe/retro-tetris

 

GitHub - JadenWe/retro-tetris

Contribute to JadenWe/retro-tetris development by creating an account on GitHub.

github.com

 

반응형