Introduction
Thank you for always reading my articles! I'm a mob engineer who previously created simple games through Amazon Q Developer for CLI projects. This time, I wanted to implement a game that could be used for educational activities both inside and outside the company, so I decided to create a second iteration.
Basic Development Approach
I implemented this project primarily using instructions to Amazon Q Developer for CLI. The concept I had in mind during implementation was:
- AWS Security Learning Tetris Puzzle
- Including security elements from Government Cloud
- Supporting both Japanese and English languages
Game Overview
I've published the implemented game on GitHub.io. You can play it at the following URL:
Game URL: [https://masakiokuda-eng.github.io/cloud-guardian-puzzle]
Key Features:
- English Support (Some Japanese text remains and needs tuning)
- Tutorial Screen (Placement examples are animated)
- Gameplay Screen
Tutorial screen with animated placement examples
Main gameplay interface
The game is implemented so that you can achieve high scores by considering security countermeasures in your gameplay strategy.
Development Architecture & Approach
You can check the repository at the following URL:
Repository: [https://github.com/MASAKIOKUDA-eng/cloud-guardian-puzzle]
Directory Structure
I created the following directory structure:
├── assets/ # Static assets
│ ├── images/ # Image files
│ │ └── aws/ # AWS service icons
│ ├── sounds/ # Audio files
│ └── styles/ # CSS stylesheets
├── dist/ # Build artifacts
├── public/ # Public files
│ ├── assets/ # Public assets
│ └── index.html # Main HTML file
├── src/ # Source code
│ ├── components/ # React components
│ │ ├── common/ # Common components
│ │ ├── game/ # Game-related components
│ │ └── pages/ # Page components
│ ├── core/ # Core functionality
│ ├── i18n/ # Internationalization
│ ├── levels/ # Level definitions
│ ├── models/ # Data models
│ ├── puzzles/ # Puzzle definitions
│ ├── tetris/ # 2D Tetris implementation
│ │ ├── components/ # Tetris components
│ │ ├── engine/ # Game engine
│ │ └── models/ # Tetris models
│ ├── tetris3d/ # 3D Tetris implementation
│ │ ├── components/ # 3D Tetris components
│ │ ├── engine/ # 3D Game engine
│ │ └── models/ # 3D Tetris models
│ └── utils/ # Utility functions
└── tests/ # Test files
Deployment Strategy
Since this implementation uses Node.js, I needed a build → deploy process using npm commands. While playing locally would simply require setting up a server, I aimed to publish on GitHub.io, which took considerable implementation time.
I adopted a deployment strategy using GitHub Actions to place build artifacts on a deployment branch. The Deploy.yml I created is as follows:
name: Deploy to GitHub Pages
on:
push:
branches:
- main
permissions:
contents: write
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout@v3
- name: Setup Node.js ⚙️
uses: actions/setup-node@v3
with:
node-version: '18'
cache: 'npm'
- name: Install dependencies 📦
run: npm ci
- name: Copy assets to public directory
run: |
mkdir -p public/assets/images/aws
cp -r assets/images/aws/*.png public/assets/images/aws/
- name: Build 🔧
run: npm run build
- name: Create .nojekyll file
run: touch dist/.nojekyll
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@v4
with:
folder: dist
branch: gh-pages
clean: true
Package Configuration
The package.json generation also required careful consideration and took implementation time:
{
"name": "cloud-guardian-puzzle",
"version": "0.1.0",
"description": "AWS GovCloud security and compliance themed Tetris game",
"main": "src/index.js",
"scripts": {
"start": "webpack serve --mode development --port 3001",
"build": "webpack --mode production",
"test": "jest",
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
},
"repository": {
"type": "git",
"url": "git+https://github.com/MASAKIOKUDA-eng/cloud-guardian-puzzle.git"
},
"keywords": [
"aws",
"govcloud",
"security",
"puzzle",
"game",
"tetris"
],
"author": "",
"license": "MIT",
"bugs": {
"url": "https://github.com/MASAKIOKUDA-eng/cloud-guardian-puzzle/issues"
},
"homepage": "https://MASAKIOKUDA-eng.github.io/cloud-guardian-puzzle",
"dependencies": {
"phaser": "^3.55.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.10.0"
},
"devDependencies": {
"@babel/core": "^7.21.4",
"@babel/preset-env": "^7.21.4",
"@babel/preset-react": "^7.18.6",
"babel-loader": "^9.1.2",
"copy-webpack-plugin": "^13.0.0",
"css-loader": "^6.7.3",
"file-loader": "^6.2.0",
"gh-pages": "^6.3.0",
"html-webpack-plugin": "^5.5.1",
"jest": "^29.5.0",
"style-loader": "^3.3.2",
"webpack": "^5.80.0",
"webpack-cli": "^5.0.2",
"webpack-dev-server": "^4.13.3"
}
}
Implementation Challenges
While games that complete with HTML only can be implemented quickly, I found that there are many elements to consider when creating dynamic games using Node.js that can be published via GitHub.io. Additionally, I felt there's a risk of generating code that deviates from requirements if you don't properly check the diff.
Therefore, I think minimal understanding of the programming language is necessary to properly use Amazon Q Developer for CLI. (If the requirement was just to play on a local server, the implementation difficulty wouldn't be that high.)
Areas for Improvement
Through gameplay, I identified several improvement points:
Current Issues:
- Language Switching: Some strings don't reflect when switching between English ↔ Japanese
- Performance: Screen stutters during gameplay
- Gameplay Mechanics: It's a simple Tetris game, so I'd like to enable player characters
- Development Flexibility: The specification only starts on port 3001, lacking flexibility
Future Prospects
I want to continue utilizing Amazon Q Developer for CLI not only for game creation but also for hands-on tutorial creation and practical business applications. I'm also interested in jsii (a library that converts TypeScript to other development languages), so I'm thinking of making a "pseudo-jsii" as my next target.
Key Takeaways
- AI-Assisted Development: Amazon Q Developer for CLI can significantly accelerate game development
- Deployment Complexity: Publishing Node.js applications to GitHub Pages requires careful build pipeline configuration
- Educational Value: Combining gaming with technical education creates engaging learning experiences
- Iterative Improvement: AI-generated code requires human oversight and iterative refinement
Technical Stack
- Frontend: React, Phaser.js for game engine
- Build Tools: Webpack, Babel
- Deployment: GitHub Actions, GitHub Pages
- Development: Amazon Q Developer for CLI
- Languages: JavaScript/TypeScript with internationalization support
Learning Outcomes
This project demonstrated the potential of AI-assisted development while highlighting the importance of:
- Understanding the underlying technology stack
- Proper code review and validation
- Incremental development and testing
- Balancing automation with human expertise
This was a rough overview, but thank you for reading to the end! I hope this inspires others to explore AI-assisted development for educational gaming projects.
Related Resources
- Campaign Information Page (until 6/20)
- Amazon Q Developer Documentation
- Amazon Q CLI Related Articles
I personally think it could also be useful for OSS maintenance.
Top comments (0)