🌐Webアプリ公開中
📷
読み込み中...
🎯主要機能
AI対戦Connect4
Minimax アルゴリズムベースのAI対戦。Easy・Medium・Hardの3段階で初心者から上級者まで楽しめる知的ゲーム体験。
3Dテトリス
クラシックなテトリスを3D空間で再構築。Canvas APIによる滑らかなアニメーションとブロック回転で新鮮なゲーム体験。
ゼロロード設計
バニラHTML/JSで構築し、フレームワークの重さをゼロに。ページを開いた瞬間にプレイ開始可能な超軽量設計。
🎨
Feature Image
⚙️技術的詳細
Canvas API
HTML5 Canvas APIでゲームグラフィックを描画。60fpsのスムーズなアニメーションとパーティクルエフェクトを実現。
Minimax AI
Connect4のAIにMinimaxアルゴリズムを実装。α-βカット最適化で高速な手筋計算を実現。
タッチ操作対応
スマホのタッチ操作に最適化。スワイプでブロック移動、タップで回転の直感的な操作体系。
バニラJS超軽量
外部ライブラリゼロの純粋なJavaScript実装。バンドルサイズ最小で、どんな回線環境でも快適にプレイ。
💼活用シーン
⏰
ちょっとした暇つぶし
電車の待ち時間や休憩中に、ブラウザを開くだけで即プレイ。インストール不要で気軽に楽しめる。
📚
プログラミング学習の成果物
Canvas API・AIアルゴリズム・レスポンシブ設計の実装例として、ポートフォリオに掲載。
👫
友達との対戦
同じ画面でConnect4の対人戦も可能。2人でスマホを渡し合いながら対戦を楽しめる。
📖ストーリーで見る
👥
お客様編
💻
開発編
👤担当領域
企画フロントエンドゲームロジック
🛠️使用技術
HTML5JavaScriptTailwind CSSCanvas API
✨ハイライト
1
Connect4のAI対戦（難易度調整対応）
2
3Dテトリスのブラウザ実装
3
インストール不要で即プレイ可能
4
スマホ・PC両対応のレスポンシブUI
5
バニラJSで超軽量・ゼロロード
😰課題・問題
- ✗ブラウザゲームの読み込み速度とパフォーマンスの両立
- ✗スマホの小画面でのゲーム操作性確保
- ✗フレームワークの重さがゲーム体験を損なう
💡解決策
- ✓バニラJS + HTML5で超軽量実装、ゼロロード
- ✓タッチ操作に最適化したUIレイアウト
- ✓Canvas APIで滑らかなアニメーションを実現
🎯成果・結果
🏆
ゼロロード時間で即プレイ可能なゲーム体験
🏆
2つのゲームを1つのプラットフォームに統合
🏆
AI対戦でいつでも対戦相手がいる環境を提供