Feat: Add Super Mario Bros. clone game

README.md

@@ -11,16 +11,31 @@ Python で作成した美しい視覚効果とアニメーションのコレク
 - **💻 マトリックス風エフェクト**: 日本語文字が緑色で画面を流れる
 - **💥 爆発アニメーション**: 殡階的に拡大する爆発エフェクト
 
-## 実行方法 🚀
+## 実行方法 (Python) 🚀
 
 ```bash
 python3 hello.py
 ```
 
+## スーパーマリオ風ゲーム (Web) 🍄
+
+`public` フォルダ内にあるWebベースのスーパーマリオ風ゲームも楽しめます。
+
+### 遊び方
+
+1. `public/mario.html` をWebブラウザで開いてください。
+2. 以下の操作でプレイできます：
+   - **矢印キー (←/→)**: 移動
+   - **スペースキー / ↑**: ジャンプ
+   - **Rキー**: リスタート
+
+---
+
 ## 必要な環境 📋
 
 - Python 3.x
 - ターミナル/コマンドプロンプト (カラー表示対応)
+- Webブラウザ (Chrome, Firefox, Safariなど)
 
 ## デモ 🎥
 
@@ -35,14 +50,13 @@ python3 hello.py
 
 ## 技術詳細 🔧
 
-- **カラーエフェクト**: ANSI エスケープコードを使用
-- **アニメーション**: time.sleep() による時間制御
-- **文字セット**: 日本語ひらがな + 数字の組み合わせ
+- **Python エフェクト**: ANSI エスケープコード、time.sleep()
+- **Web ゲーム**: HTML5 Canvas, JavaScript (No external libraries)
 
 ## 作成者 👨‍💻
 
 Claude と協力して作成された視覚効果プロジェクト
 
 ---
 
-*美しいターミナルアートをお楽しみください！* ✨
+*美しいターミナルアートとゲームをお楽しみください！* ✨

public/css/mario.css

@@ -0,0 +1,34 @@
+body {
+    margin: 0;
+    padding: 0;
+    background-color: #333;
+    color: #fff;
+    font-family: 'Press Start 2P', cursive;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+}
+
+#game-container {
+    text-align: center;
+}
+
+h1 {
+    margin-bottom: 20px;
+    color: #ff0000;
+    text-shadow: 2px 2px #000;
+}
+
+canvas {
+    border: 4px solid #fff;
+    background-color: #5c94fc; /* 空の色 */
+    box-shadow: 0 0 20px rgba(0,0,0,0.5);
+    image-rendering: pixelated; /* ピクセルアート用 */
+}
+
+#instructions {
+    margin-top: 15px;
+    font-size: 12px;
+    color: #ccc;
+}