Deploying a Retro-Style Game with GitHub Copilot Without Writing a Single Line of Code

Introduction

Using VS Code's GitHub Copilot Agent Mode (Claude Opus 4.6), I entrusted the entire process to AI—from developing a mobile-compatible retro-style 2D platformer game from scratch to deploying it to Azure Static Web Apps.

Human-written code: 0 lines. My involvement was limited to entering prompts and selecting an account during Azure SSO login. The development time was approximately one hour.

Playable on both mobile and PC. Please feel free to give it a try!

👉 https://yellow-stone-0c8825500.6.azurestaticapps.net

👉 GitHub Repository: https://github.com/pcmn1000/retro-game

Prerequisites and Environment

To complete the process from development to deployment using GitHub Copilot Agent Mode, the following tools must be set up in advance.

Tool	Purpose	Notes
VS Code	Editor	Host environment for Agent Mode
GitHub Copilot	AI Code Generation & Operation	Uses Claude Opus 4.6 in Agent Mode
Git	Version Control	Copilot executes git commands in the terminal
GitHub CLI (gh)	Repository Creation & Operation	Copilot executes gh repo create, etc.
Azure CLI (az)	Azure Resource Operation	Copilot executes az staticwebapp create, etc.
Azure Subscription	Hosting	Free with the Static Web Apps Free plan

The crucial point is that Copilot itself calls these tools via the terminal. You don't need to memorize the commands yourself, but the tools must be installed on your system.

Why I Chose Claude Opus 4.6

While Agent Mode is available with other models (such as GPT-4o), Claude Opus 4.6 provided the most stable results for this specific project.

Leveraging MCP Servers

In this development, I also leveraged MCP (Model Context Protocol) Servers built into VS Code. MCP Servers are a mechanism to extend the set of tools that Copilot Agent Mode can access.

MCP Servers Used

MCP Server	Purpose	Specific Usage
Azure MCP	Azure resource management	Retrieving subscription information, checking resources, and obtaining deployment best practices
Microsoft Docs MCP	Official documentation search	Checking Azure Static Web Apps specifications and referring to API references

How MCP Servers Work

MCP Servers function as "external tools" for Copilot. In standard Agent Mode, Copilot can only perform basic operations like file editing, terminal execution, and searching. However, by adding MCP Servers, it becomes possible to directly manipulate Azure resources and search/reference official documentation.

For example, in this project:

"Tell me about my Azure subscription information"
→ Azure MCP retrieves the list of subscriptions and provides the answer

"Tell me the best practices for Azure Static Web Apps"
→ Azure MCP retrieves the latest best practices
→ Microsoft Docs MCP searches for details from the official documentation

Features of the Completed Game

• 3 Stages + Boss Battle: Surface → Underground → Sky → Boss Battle
• Double Jump: Possible to jump again in mid-air
• Touch Control Support: Playable in mobile browsers (Virtual D-pad + Jump button)
• Keyboard Controls: Arrow keys / WASD + Space bar
• Coin Collection & Score System
• Enemy Characters: Using original images as enemy sprites
• Boss Battle: A boss 1.5 times the size of normal enemies appears, with an HP bar, defeated by stomping 3 times
• Particle Effects: Effects for jumping, collecting coins, and defeating enemies
• Stage Clear Effect: Clear by touching the flag

Development Process

I proceeded with the development interactively by giving the following instructions to GitHub Copilot.

Step 1: Creating the Basic Game Structure

Prompt: "I want to develop a retro-style game that runs in a mobile web app."

With this single prompt, Copilot generated the following three files:

• index.html — HTML structure for the game screen, title screen, and game over screen
• style.css — Mobile-friendly responsive CSS (including safe-area-inset support)
• game.js — Game engine with approximately 1,200 lines (physics, collision detection, 3 stages, and enemy AI)

Step 2: Adding Game Features

Prompt: "Please implement double jumping" "Make the character speed constant"

• Implemented double jumping by adding maxJumps / jumpCount to the Player class.
• Changed acceleration and friction-based movement to constant speed movement.

Step 3: Changing Enemy Characters

Prompt: "Change the enemy characters to the character in the attached image"

• Set the attached image (enemy.png) as the enemy sprite.
• Implemented a Canvas drawing fallback in case the image fails to load.

Step 4: Title Screen, Bug Fixes, and Adding a Boss Battle

Prompt: "Make the title cute" "Fix the speed bug" "Fix the brick overhang" "Add a boss battle"

• Placed an Earth character image on the title screen with a bounce animation.
• Fixed a bug where movement speed accelerated after dying.
• Fixed an issue where brick block rendering overhung to the right using clipping.
• Added a boss battle stage after clearing WORLD 1-3 (HP: 3, boss is 1.5 times the size of normal enemies).

Step 5: Creating the GitHub Repository

Copilot automatically executed the following for me:

git init → git add → git commit
gh repo create pcmn1000/retro-game --public
git push

It handled the entire flow from repository creation to pushing.

Step 6: Deploy to Azure Static Web Apps

Prompt: "I want to publish this professionally. I have an Azure subscription."

Copilot used the Azure CLI to execute the following:

1. az group create — Created a resource group retro-game-rg in East Asia.
2. az staticwebapp create — Created an Azure Static Web App (Free plan) and linked it with the GitHub repository.
3. A GitHub Actions workflow was automatically generated, enabling automatic deployment upon pushing to the main branch.

🔄 Update (2026/02/11)

After the initial deployment, I continued adding features to the game solely through instructions to Copilot.

Added Features

• Retro-style title screen: Press Start 2P pixel font, starry sky animation, and CRT scanline effect.
• Nickname & Ranking: Enter a nickname at game start, and a TOP 10 ranking is displayed after defeating the boss (using localStorage).
• Block Bump: Bumping a block from below triggers a bump animation, causing any enemy on top to flip and fly away.
• Moon Item Improvements: Physics-based movement where items pop out randomly to the left or right and then fall.
• Pipe Warp: Entering pipes in World 1-1 / 1-2 by pressing ▼ takes you to an underground coin bonus area.
• Pipe Blackout Transition: Animations for sinking, fading out, warping, fading in, and rising back up.

CI/CD: Automatic Deployment Just by Pushing

One of the best experiences in this development flow was that the CI/CD mechanism was integrated from the very beginning.

Deployment Flow

Input Prompt → Copilot changes code
              → Copilot executes git add / commit / push
              → GitHub Actions is automatically triggered
              → Automatic deployment to Azure Static Web Apps (approx. 1–2 minutes)

In short, it’s an experience where you say "Add this feature," and it's reflected in the production environment just a few minutes later.

GitHub Actions Workflow

As soon as the Azure Static Web App was created, a GitHub Actions workflow file (.github/workflows/azure-static-web-apps-*.yml) was automatically generated. There was zero need for me to write configuration files myself.

Actual Development Cycle

For this update, I repeated the following cycle:

1. Instruct Copilot to add features or make fixes.
2. Copilot edits the code.
3. Copilot executes git add -A && git commit -m "..." && git push.
4. GitHub Actions is triggered → Automatic deployment to Azure.
5. Verify the behavior in the browser.
6. If there are issues, instruct Copilot again → Return to step 2.

Considerations for GitHub Copilot Agent Mode

Here are some practical considerations based on my experience using it for several hours.

✅ Pros (What went well)

1. Excellent compatibility with CLI-based tools

Tools that operate entirely via the command line—such as Azure CLI (az), GitHub CLI (gh), and Git—work exceptionally well with Agent Mode. A prompt like "Deploy to Azure" is converted into az commands and executed.

2. Fast iterative fixes

The cycle of "Fix this" → Correction → push → Verification → "Not quite" → Re-correction is extremely fast. For UI/UX fine-tuning, it eliminates the need to manually search through the code.

3. Context retention

Since it remembers past changes within a session, instructions like "Continuing from the previous fix..." work seamlessly.

⚠️ Points to keep in mind

1. Provide specific prompts

"Make it look good" is less effective than "When a block is hit from below, make it bump and cause the enemy on top to flip and fly away." Specificity significantly improves accuracy.

2. Context overflow in long sessions

When a file like game.js exceeds 2,000 lines, Copilot may struggle to grasp the entire file. Success rates improve when you specify function names or provide step-by-step instructions.

3. Manual verification is essential

While it ensures code consistency, humans still need to judge "whether it looks natural."

4. Pre-setup of tools is required

Errors will occur if az, gh, git, etc., are not installed. However, Copilot itself might sometimes suggest the installation commands.

5. Beware of breaking changes

Large feature additions can sometimes break existing code. It is safer to follow a "one commit per feature" rule so you can easily use git revert if issues arise.

File Structure

retro-game/
├── index.html          # Game UI (HTML)
├── style.css           # Styles (CSS)
├── game.js             # Game engine (JavaScript, ~2,200 lines)
├── enemy.png           # Enemy character image
├── screenshots/        # Screenshots
├── README.md
└── .github/
    └── workflows/
        └── azure-static-web-apps-*.yml  # GitHub Actions for automatic deployment

Technical Stack

Category	Technology
Frontend	HTML5 Canvas, Vanilla JavaScript, CSS3
Font	Google Fonts (Press Start 2P)
Data Storage	localStorage (Rankings)
Hosting	Azure Static Web Apps (Free Plan)
CI/CD	GitHub Actions (Auto-generated by Azure)
Source Control	GitHub
Development Tool	VS Code + GitHub Copilot Agent Mode
LLM Model	Claude Opus 4.6
MCP Server	Azure MCP, Microsoft Docs MCP
Human Contribution	Prompt input, verification, Azure SSO authentication

Summary

• With GitHub Copilot's Agent Mode, you can complete everything from game development to cloud deployment without writing a single line of code.
• Claude Opus 4.6 excels in tool-calling accuracy, long-context understanding, and Japanese language support, making it a great match for Agent Mode.
• MCP Servers can extend operations for Azure resources and document searches, further improving the development experience.
• CI/CD is automatically configured by Azure Static Web Apps—automatic deployment just by pushing.
• Integration with CLI tools is powerful—seamlessly operate Azure CLI, GitHub CLI, and Git.
• Be specific with prompts, and verify with human eyes—it's important to draw a line between what to leave to AI and what to judge as a human.

GitHub Copilot's Agent Mode is not just an "AI that writes code," but an "AI that manages the entire development workflow." This experience of entrusting everything from code generation and Git management to cloud deployment in a single flow made me feel the potential to significantly change future development styles.

⚠️ This application is not for commercial purposes.