メニュー
Creates browser-based board games (Othello, Gomoku, Chess, etc.) with HTML/CSS/JS. Use when the user wants to create a new board game, implement game logic, or add AI opponents.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/tegnike/ai-agent-game-streamer --skill create-gameコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | create-game |
| description | Creates browser-based board games (Othello, Gomoku, Chess, etc.) with HTML/CSS/JS. Use when the user wants to create a new board game, implement game logic, or add AI opponents. |
| allowed-tools | Read, Write, Edit, Glob, Grep, Bash(python3 -m http.server*), Bash(open http://*) |
ブラウザで動作するボードゲームを作成するためのスキルです。
このスキルは以下のようなゲームの作成をサポートします：
ユーザーに以下を確認してください：
- ゲームの種類（オセロ、五目並べ、etc.）
- ボードサイズ（8x8、15x15、etc.）
- 対戦形式（プレイヤー vs CPU、2人対戦、etc.）
- AI の難易度（簡単、普通、難しい）
- 追加機能（アニメーション、サウンド、履歴、etc.）
すべてのゲームは以下の構成で作成します：
games/<game-name>/
├── index.html # UI構造
├── script.js # ゲームロジック + AI
└── style.css # スタイリング
既存のサンプルを参照してください：
# オセロの実装を確認
cat games/nike-othello/script.js
<div class="container">
<h1>ゲーム名</h1>
<div class="game-info">
<div class="turn-display">
現在のターン: <span id="current-turn">...</span>
</div>
<div class="score-display">
<!-- スコア表示 -->
</div>
</div>
<div id="board" class="board"></div>
<div id="message" class="message"></div>
<button id="reset-btn" class="reset-btn">リセット</button>
</div>
class GameName {
constructor() {
this.board = []; // ボード状態
this.currentPlayer = 1; // 現在のプレイヤー (1: 黒/先手, 2: 白/後手)
this.gameOver = false; // ゲーム終了フラグ
this.init();
}
// 初期化
init() { }
// ボード描画
renderBoard() { }
// クリックハンドラ
handleCellClick(row, col) { }
// 有効な手かチェック
isValidMove(row, col, player) { }
// 有効な手一覧取得
getValidMoves(player) { }
// 手を打つ
makeMove(row, col, player) { }
// ターン切り替え
switchTurn() { }
// CPU の手
cpuMove() { }
// 最善手選択（AI）
selectBestMove(validMoves) { }
// 勝敗判定
checkWinner() { }
// ゲーム終了処理
endGame() { }
() { }
() { }
}
重要: 16:9アスペクト比対応
ゲームは配信用途で使用されるため、16:9の横長画面（1280x720） に収まるようにレイアウトを設計してください。
/* 基本設定 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Hiragino Sans', 'Meiryo', sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* 横長レイアウト用コンテナ（ボードが大きい場合） */
.container {
display: flex;
align-items: center;
gap: 30px;
}
/* 情報パネル（右側） */
.game-panel {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
/* ボードグリッド */
.board {
display: grid;
grid-template-columns: repeat(BOARD_SIZE, 1fr);
gap: 2px;
background: #333;
padding: 10px;
border-radius: 10px;
}
/* セル - 720p対応のサイズ調整 */
/* 8x8ボード: 50px, 15x15ボード: 35px, 19x19ボード: 30px */
{
: ;
: ;
: ;
: flex;
: center;
: center;
: pointer;
}
| ボードサイズ | 推奨セルサイズ | ボード全体の高さ |
|---|---|---|
| 8x8 (オセロ) | 50px | 約420px |
| 10x10 | 40px | 約420px |
| 15x15 (五目並べ) | 35px | 約545px |
| 19x19 (囲碁) | 30px | 約600px |
オセロのような「角が有利」なゲーム向け。
const POSITION_WEIGHTS = [
[100, -20, 10, ...],
[-20, -50, -2, ...],
// ...
];
selectBestMove(validMoves) {
let bestScore = -Infinity;
let bestMoves = [];
for (const move of validMoves) {
const score = POSITION_WEIGHTS[move.row][move.col];
if (score > bestScore) {
bestScore = score;
bestMoves = [move];
} else if (score === bestScore) {
bestMoves.push(move);
}
}
return bestMoves[Math.floor(Math.random() * bestMoves.length)];
}
先読みが必要なゲーム向け。
minimax(board, depth, isMaximizing, alpha, beta) {
if (depth === 0 || this.isGameOver(board)) {
return this.evaluate(board);
}
if (isMaximizing) {
let maxEval = -Infinity;
for (const move of this.getValidMoves(board, CPU)) {
const newBoard = this.applyMove(board, move, CPU);
const eval = this.minimax(newBoard, depth - 1, false, alpha, beta);
maxEval = Math.max(maxEval, eval);
alpha = Math.max(alpha, eval);
if (beta <= alpha) break;
}
return maxEval;
} else {
let minEval = Infinity;
for (const move of this.getValidMoves(board, PLAYER)) {
const newBoard = .(board, move, );
= .(newBoard, depth - , , alpha, beta);
minEval = .(minEval, );
beta = .(beta, );
(beta <= alpha) ;
}
minEval;
}
}
const PATTERNS = {
FIVE: /11111/, // 勝ち
OPEN_FOUR: /011110/, // 両端空き4連
FOUR: /11110|01111/, // 片端4連
OPEN_THREE: /01110/, // 両端空き3連
// ...
};
evaluateLine(line, player) {
const str = line.map(c => c === player ? '1' : c === 0 ? '0' : '2').join('');
if (PATTERNS.FIVE.test(str)) return 100000;
if (PATTERNS.OPEN_FOUR.test(str)) return 10000;
// ...
}
詳細な実装ガイドは以下を参照：
| ガイド | 説明 |
|---|---|
| references/gomoku.md | 五目並べの実装ガイド |
| references/common-patterns.md | 共通パターン・ユーティリティ |
すぐに使えるテンプレートファイル：
| テンプレート | 説明 |
|---|---|
| templates/game-template.html | HTML基本テンプレート |
| templates/game-template.css | CSS基本テンプレート |
| templates/game-template.js | JS基本テンプレート |
作成したゲームの動作確認：
# ローカルサーバー起動
cd games/<game-name>
python3 -m http.server 8080
# ブラウザで開く
open http://localhost:8080
ゲーム作成時の確認事項：
src/types.ts の GameId 型に追加src/games/game-registry.ts にゲーム設定を追加games/index.html の一覧ページにカードを追加npm run build でビルドが通るゲーム作成後、以下の3箇所に新しいゲームを登録してください：
src/types.ts）export type GameId = "othello" | "gomoku" | ... | "<new-game>";
src/games/game-registry.ts）"<new-game>": {
id: "<new-game>",
name: "Game Name",
nameJa: "ゲーム名",
directory: "<new-game>",
controlMethod: "cell-click", // "cell-click" | "move" | "dom-click"
apiMethods: ["handleCellClick", "getGameState", "init"],
port: 8888,
},
games/index.html）.grid 内にカードを追加し、ホバーカラー用のCSSも追加する：
<a href="<new-game>/" class="card card-<new-game>">
<img src="icons/<icon>.png" alt="ゲーム名" class="card-icon">
<div class="card-name">ゲーム名</div>
<div class="card-desc">ゲームの簡単な説明</div>
</a>
登録後に npm run build を実行して型エラーがないことを確認する。
ゲーム一覧に表示するためのアイコンを作成します。generate-transparent-image スキルを使用してください。
games/<game-name>/icon.pnggenerate-transparent-image スキルを呼び出すgames/<game-name>/icon.png として保存する