In my school days, during summer season, I used to go to my friends home and play video games in his computer. There were many games I used to like; one such game was BattleShip.
Fast forward to the current summer, I got to rebuild the same game from scratch. I got introduced to Amazon Q. It is a generative AI-powered assistant which I used as my coding copilot. It helped me with code completion, saved me from writing boilerplate code, and accelerated my ability to write better code.
Then, I got introduced to Amazon Q CLI, an Agentic Assistant. Just give it a command and let it take care of the rest. Without writing a single line of code, we can create an entire application from scratch.
Setting Up
To install Amazon Q CLI in Windows, you must enable WSL (Windows Subsystem for Linux).
wsl --install
Once the Machine is restarted, you can access the WSL.
We can install Amazon Q CLI by downloading the ZIP file and installing.
curl --proto '=https' --tlsv1.2 -sSf "<https://desktop-release.q.us-east-1.amazonaws.com/latest/q-x86_64-linux.zip>" -o "q.zip"
Then, unzip it and run the installation.
unzip q.zip
./q/install.sh
Now, we can run q doctor to check the installation status.
You can login to Amazon Q CLI using q login.
Prompt To Generate the game:
You can select from the available models to help with the task. I selected Claude 4 Sonnet.
I used below prompt to generate the code.
Create a Complete Browser-Based Battleship Game
Technical Requirements:
• Use HTML, CSS, and vanilla JavaScript only (no frameworks or libraries)
• Implement as multiple project files for better maintainability
• Ensure responsive design that works on different screen sizes
Game Features:
• Single-player gameplay against a computer opponent
• 10x10 grid boards for both player and computer
• 5 ships of different sizes: Carrier (5), Battleship (4), Cruiser (3), Submarine (3), Destroyer (2)
Ship Placement Phase:
• Manual placement by clicking on cells
• Option to randomize ship positions
• Ability to rotate ships before and after placement
• Ability to move ships after placement but before game start
• Visual selection and highlighting of ships for editing
• No ships should touch (including diagonally)
Gameplay Mechanics:
• Turn-based gameplay where players alternate firing at opponent's grid
• Visual indication of hits and misses with animations
• Ship status tracking (active vs. sunk)
• Game over detection when all ships of either player are sunk
• Clear feedback messages throughout gameplay
Visual Elements:
• Detailed top-view representations for different ship types
• Visual differentiation between ship parts (bow, middle, stern)
• Ship legend showing all ship types and their current status
• Clear visual feedback for hits, misses, and selected ships
• Seamless ship appearance without gaps between cells
• Animation for ship blasts when hit
• Cross marker over ships when completely sunk
• Only the latest hit cell should animate/blink
• Clean, intuitive user interface with appropriate buttons and controls
Additional Requirements:
• Include detailed comments in the code to explain implementation logic
• Ensure proper visual feedback when ships are hit or sunk
• Implement proper ship damage visualization
• Ensure no duplicate ships appear when sunk
• Make sure hit markers are clearly visible on ships
The game should provide an engaging and visually appealing experience while following classic Battleship rules.
After I entered the prompt, Amazon Q started doing its magic by “Thinking”.
And after a few minutes, it created the entire game with a proper folder structure.
Conclusion
I opened the index.html file that was created, and boom!
The game was ready to play!
You can experience the game from the URL below: https://jayaganeshk.github.io/battleship/
You can find the code that was generated in the repo below: https://github.com/jayaganeshk/battleship
Top comments (0)