---
title: "Hex Ship"
url: "https://aigamehub.app/zh-tw/games/hex-ship-32eede"
source: "https://github.com/RichardLaBrecque/hex_ship"
source_type: "github"
play_url: "https://richardlabrecque.github.io/hex_ship/"
platform: "both"
login_required: false
pricing: "free"
origin: "original"
ai_tools: ["Claude Code"]
game_languages: ["en"]
author: "RichardLaBrecque"
author_handle: "RichardLaBrecque"
category: "動作"
categories: ["action", "adventure", "simulation"]
tags: ["canvas", "roguelike", "ship-building", "space", "trading", "vibe-coding"]
added: "2026-10-24T19:31:01.890Z"
updated: "2026-10-24T19:31:01.890Z"
locale: "zh-tw"
content_locale: "zh-tw"
---

# Hex Ship

一款在瀏覽器中遊玩的 Roguelike 遊戲，玩家用六角零件組裝船隻，在行星之間運送貨物，並在途中擊退襲擊者。

## Description

在瀏覽器中遊玩的俯視角太空交易 Roguelike 遊戲。玩家在太空站購買並放置六角零件（艦橋、引擎、燃料槽、船員模組、貨艙、裝甲、護盾，以及雷射、加農砲或飛彈莢艙）；擺放位置很重要，因為偏離中心的引擎會使船隻扭轉。接著玩家接下合約、裝載貨物、雇用船員並購買燃料，飛往另一顆行星，武器則會自行開火。完成運送會提升聲望，進而解鎖報酬更高的合約；這類合約需要更大的船隻，並會吸引更難纏的敵人。分數會追蹤出航時船隻價值的最高點、售出的貨物與收集到的懸賞金，最佳結果會存成高分；進行中的一局會儲存在瀏覽器中。桌上型電腦使用鍵盤與滑鼠，手機與平板橫向手持時則有專用的觸控版面配置。以 TypeScript 建構於 HTML Canvas 上，並採用 Vite、Vitest 與 Web Audio API，託管於 GitHub Pages；作者形容這是用 Claude Code 製作的 vibe-coding 練習專案。

## Original post

Build a ship from hex parts, haul cargo between planets and fight raiders. A browser roguelike made as vibe-coding practice with Claude Code.

Topics: browser-game, canvas, claude-code, game, roguelike, typescript, vibe-coding, vite

# Hex Ship A top-down space trading game you play in the browser. Build a ship out of hex parts, haul cargo between two planets, and fight off raiders on the way. Each run is roguelike: lose your ship and the run is over. **Play it:** https://richardlabrecque.github.io/hex_ship/ > **This is a vibe-coding practice project.** I built it by pairing with an AI coding agent (Claude Code), one > playable milestone at a time. I set the design, the rules and the feel, and played each build. The agent wrote > most of the code. The point is to practise that way of working, so expect placeholder balance numbers and > some rough edges. ## How to play 1. **Build your ship at the station.** Buy hex parts and place them on the grid: bridge, engines, fuel tanks, crew modules, cargo bays, armor, shields, and laser, cannon or missile pods. A ship has to be spaceworthy before it can launch, and where you put the engines matters. Engines that sit off-centre twist the ship, and the shipyard shows how far. 2. **Take a contract.** Load cargo, hire crew and buy fuel. Heavier ships burn more fuel. 3. **Fly it to the other planet.** Your weapons fire on their own. Your job is to fly. 4. **Sell, repair, upgrade, repeat.** Each delivery raises your reputation. Reputation unlocks better-paying contracts, which need bigger ships, and bigger ships draw tougher enemies. Your score has three columns: peak ship value at launch, cargo sold, and bounties collected. Your best in each column is saved as a high score. A run in progress is saved in your browser, so you can close the tab and come back to it. ### Controls | Where | Input | Action | | -------- | ------------------------- | ------------------------------------- | | Station | Left-click | Buy and place a part / select a part | | Station | Right-click or `Del` | Sell a part | | Station | `1`–`8` | Pick a part to build | | Station | `R` / `Shift+R` | Rotate | | Station | `Esc` | Stop building / deselect | | Flight | `W` / `↑` | Thrust | | Flight | `S` / `↓` | Brake | | Flight | `A` `D` / `←` `→` | Turn | | Flight | `Esc` | Turn back | | Anywhere | `M` or the speaker button | Mute | **On a phone or tablet,** hold it sideways. The station has its own touch layout: the ship's grid on the left and tabs on the right. To build, tap a part in the Parts tab, then tap a hex to see the part there. Rotate it if you need to, then tap the hex again (or Place) to buy it. Tap a part on your ship to select it, rotate it or sell it. In flight, the buttons in the bottom corners turn, thrust and brake, and you can hold two at once. ## Tech stack - TypeScript with no game framework. It draws vector art on an HTML Canvas. - [Vite](https://vite.dev/) for the dev server and build. - [Vitest](https://vitest.dev/) for tests. - The Web Audio API for synthesised sound effects. There are no audio files. - GitHub Pages for hosting. Every push to `main` redeploys through [`.github/workflows/deploy.yml`](.github/workflows/deploy.yml). ## Running it locally