Spaces:

miya3333
/

ColorLinkPuzzle

Running

App Files Files Community

miya commited on 16 days ago

Commit

ca3ea91

1 Parent(s): e35d41d

modify Readme.md index.html

Browse files

Files changed (3) hide show

README.md +121 -9
index.html +468 -19
style.css +0 -28

README.md CHANGED Viewed

@@ -1,12 +1,124 @@
 ---
-title: ColorLinkPuzzle
-emoji: 💻
-colorFrom: blue
-colorTo: indigo
-sdk: static
-pinned: false
-license: mit
-short_description: An automatically playable puzzle game developed using vibrat
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

+# カラーリンクパズル (AI 自動プレイ版)
+**Live Demo**: （HTML ファイルをブラウザで開くだけでプレイできます）
+---
+## 📖 ゲーム概要
+### ゲーム紹介
+「カラーリンクパズル」は、同じ色のタイルを **4 つ以上** 直線（横・縦・斜め）で連結させて消すマッチングパズルです。
+- **6×6** のグリッドに 6 色のタイルがランダム配置されます。
+- タイル同士は隣接（上下左右）でスワップでき、マッチが成立すれば自動で消えてスコアが加算、上から新しいタイルが降ってきます。
+- **AI 自動プレイ機能** で、AI が自動で最適なスワップを探し、連鎖させながらプレイできます。
+### 操作方法
+| 操作 | 説明 |
+|------|------|
+| **タイルのドラッグ** | タイルをクリック（またはタッチ）してドラッグし、隣接タイルと入れ替えてスワップ |
+| **スワップ** | 隣接した 2 タイルの位置が入れ替われば、即座にマッチ判定が実行されます |
+| **新規ゲーム** | 「新規ゲーム」ボタンでランダムに新しい盤面を生成 |
+| **自動プレイ** | 「自動プレイ」ボタンで AI が自動でスワップを行います（再クリックで停止） |
+| **速度スライダー** | AI のプレイ速度（ミリ秒）を調整（デフォルト 600ms） |
+| **テーマ切替** | 「暗いモード」 / 「明るいモード」切替（ローカルストレージに保存） |
+### プレイの流れ
+1. **新規ゲーム** ボタンで開始。
+2. タイルをドラッグして隣接タイルとスワップ。
+3. 同色のタイル列が **4 個以上** できると自動で消失し、得点（5pt/タイル）が加算。
+4. 連鎖が起きた場合は自動で再判定・消去が続く。
+5. すべてのタイルが消えるか、ゲームオーバー（マッチが作れない）になるまで続ける。
+6. **自動プレイ** を有効にすれば、AI が連続で最適なスワップを実行し、スコアを稼ぎます。
+---
+## 🚀 今後の改良点（アイデア）
+| # | 改良項目 | 説明 |
+|---|----------|------|
+| 1 | **レベル・ステージ** | 難易度別にタイル数・色数を変える、目標スコアや手数制限のステージを追加 |
+| 2 | **スコアボード** | ハイスコア保存（ローカル）やリーダーボードを実装 |
+| 3 | **エフェクト** | 消えるときのパーティクル、連鎖時のエフェクト強化 |
+| 4 | **モバイル最適化** | タップ＆スワイプでのスワップ操作、画面サイズに合わせた responsive デザイン |
+| 5 | **AI アルゴリズム** | ミニマックス・評価関数を導入した本格的な AI、手数やスコア最適化 |
+| 6 | **サウンド** | UI 操作音や消失エフェクト音を追加 |
+| 7 | **マルチプレイヤー** | 同時対戦または協力モード |
+| 8 | **設定画面** | 色やテーマ、難易度のカスタマイズ設定 |
+---
+## 💻 使用技術
+| カテゴリ | 技術・ライブラリ |
+|----------|----------------|
+| **HTML** | `<canvas>` ではなく **HTML/CSS** で構築したシンプルな UI |
+| **CSS** | カスタムプロパティ（変数）でテーマ・サイズ調整。`@keyframes` による消去アニメーション |
+| **JavaScript (ES6)** | ゲームロジック、AI 自動プレイ、DOM 操作、ローカルストレージ |
+| **CSS Grid** | 6×6 の棋盤（ `grid-template-columns` で動的にサイズ調整） |
+| **ローカルストレージ** | テーマ設定の保存 |
+| **GitHub / HuggingFace** | ソースコード管理、README の公開先として HuggingFace Spaces にアップロード想定 |
+**外部ライブラリは使用していません**（全て純粋な HTML/CSS/JS だけです）。
+---
+## 📄 ライセンス
+**MIT License**
+```
+Copyright (c) 2025 <開発者>
+Permission is hereby granted, free of charge, to any person obtaining a
+copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction,
+including without limitation the rights to use, copy, modify,
+merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the
+following conditions:
+…（省略）…
+```
 ---
+## 👤 開発者
+- **MiYa** – [Hugging Face: miya3333](https://huggingface.co/miya3333)
+- **MiYa** – [X (Twitter) : @miya00907380](https://x.com/miya00907380)
+※本リポジトリは **Hugging Face Spaces** にて Web アプリとして公開可能です。`index.html` をそのままアップ���ードすれば、ブラウザ上で動作します。
 ---
+## 🤖 使用LLM
+| 項目 | 内容 |
+|------|------|
+| **LLM** | [gpt-oss-120b](https://console.groq.com/playground?model=openai/gpt-oss-120b) |
+| **Reasoning** | medium |
+| **Max Completion Tokens** | 8192 |
+> 本 README は **gpt-oss-120b**（Groq のオープンソース LLM）を使用して生成されています。
+---
+## 🛠️ ローカルでの実行手順
+1. **リポジトリをクローン** もしくはコードをコピー
+   ```bash
+   git clone https://huggingface.co/spaces/<your-username>/color-link-puzzle
+   ```
+2. 任意のディレクトリで **`index.html`** をブラウザ（Chrome/Firefox/Safari など）で開く
+3. **ボタン** でゲーム開始、操作は上記「操作方法」参照
+**※追加のビルドや依存関係は不要です。**
+---
+### 🎉 Happy Puzzle! 🚀
+---
+*この README は **Hugging Face Spaces** に公開する前提で作成しました。ぜひリポジトリに公開し、他のユーザーとシェアしてください！*

index.html CHANGED Viewed

@@ -1,19 +1,468 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>カラーリンクパズル (AI 自動プレイ版)</title>
+<style>
+  :root {
+    --grid-size:6;                /* 6×6 のグリッド */
+    --tile-size:80px;             /* 1 タイルの横幅・高さ */
+    --transition-duration:0.15s;   /* 移動アニメーション */
+    --remove-duration:0.35s;       /* 消去アニメーションの長さ */
+    /* ---------- Light theme ---------- */
+    --bg-color:#f0f0f0;           /* 背景 */
+    --text-color:#333;            /* 基本テキスト */
+    --tile-bg:#ddd;               /* タイル（未選択）背景 */
+    --tile-text:#fff;            /* タイル文字色 (タイル上の文字は使われていませんが残しておく) */
+  }
+  /* Dark theme override – body に .dark がついた時に適用される */
+  body.dark {
+    --bg-color:#181a1b;            /* 背景（暗め） */
+    --text-color:#e0e0e0;           /* テキスト */
+    --tile-bg:#444;                /* タイル背景 */
+  }
+  body{
+    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
+    background: var(--bg-color);
+    color: var(--text-color);
+    margin:0;padding:0;
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+    justify-content:center;   /* 縦方向センタリング */
+    height:100vh;
+  }
+  h1{margin:20px 0 5px; font-size:2rem; text-align:center;}
+  #controls{
+    margin:10px 0;
+    display:flex;
+    flex-wrap:wrap;
+    justify-content:center;
+    gap:8px;
+  }
+  #score,#moves{margin:0 6px; font-weight:bold;}
+  #board{
+    display:grid;
+    grid-template-columns:repeat(var(--grid-size),var(--tile-size));
+    grid-auto-rows:var(--tile-size);
+    gap:4px;
+    margin:20px;
+    user-select:none;
+  }
+  .tile{
+    width:var(--tile-size);
+    height:var(--tile-size);
+    border-radius:8px;
+    background:var(--tile-bg);
+    display:flex;
+    justify-content:center;
+    align-items:center;
+    font-size:2rem;
+    color: var(--tile-text);
+    cursor:pointer;
+    transition:
+      transform var(--transition-duration) ease;
+    transform:scale(1);
+  }
+  .tile:hover{ transform:scale(1.07); }
+  .empty{background:transparent; cursor:default; }
+  .disabled{pointer-events:none;}
+  /* 消去エフェクト */
+  @keyframes tile-fade-out{
+    0%   { opacity:1;   transform:scale(1);   }
+    100% { opacity:0;   transform:scale(0.2); }
+  }
+  /* アニメーション中に付けるクラス */
+  .tile.removing{
+    animation: tile-fade-out var(--remove-duration) ease-out forwards;
+  }
+  #message{margin-top:1rem; font-size:1.2rem; text-align:center;}
+  /* Media query for better mobile support */
+  @media (max-width:600px){
+    #board{
+      grid-template-columns:repeat(var(--grid-size),1fr); /* Make tiles responsive */
+    }
+    .tile{
+      --tile-size:60px; /* Adjust tile size for smaller screens */
+    }
+  }
+</style>
+</head>
+<body>
+<h1>カラーリンクパズル</h1>
+<div id="controls">
+  <button id="newGameBtn">新規ゲーム</button>
+  <button id="autoPlayBtn">自動プレイ</button>
+    <!-- 速度スライダー -->
+    <label style="margin-left:20px;">
+      速度:
+      <input type="range" id="speedSlider" min="20" max="2000" step="10"
+             value="600" style="vertical-align: middle; width:120px;">
+      <span id="speedValue">600</span> ms
+    </label>
+    <!-- ダーク / ライト 切替ボタン -->
+    <button id="themeBtn">暗いモード</button>
+    <span id="score">スコア: 0</span>
+    <span id="moves">手数: 0</span>
+</div>
+<div id="board"></div>
+<div id="message"></div>
+<script>
+/* -------------------------------------------------
+   Ⅰ. グローバル変数 & 初期設定
+   ------------------------------------------------- */
+const boardEl = document.getElementById('board');
+const boardSize = parseInt(getComputedStyle(document.documentElement)
+                          .getPropertyValue('--grid-size'));
+const colors = ['#e74c3c','#3498db','#f1c40f','#2ecc71',
+               '#9b59b6','#ff9800']; // 6 色
+let board = [];               // 2‑D 格子（色コード）
+let score = 0;
+let moves = 0;
+let isAnimating = false;
+let autoPlayTimer = null;
+// スライダー関連の変数を追加
+const speedSlider = document.getElementById('speedSlider');
+const speedValue = document.getElementById('speedValue');
+let playDelay = parseInt(speedSlider.value);   // 速さ（ms）
+const scoreEl   = document.getElementById('score');
+const movesEl  = document.getElementById('moves');
+const messageEl = document.getElementById('message');
+const newGameBtn = document.getElementById('newGameBtn');
+const autoPlayBtn = document.getElementById('autoPlayBtn');
+const themeBtn = document.getElementById('themeBtn');
+/* -------------------------------------------------
+   テーマ切替
+   ------------------------------------------------- */
+function setTheme(dark) {
+  const body = document.body;
+  if (dark) {
+    body.classList.add('dark');
+    themeBtn.textContent = '明るいモード';
+    localStorage.setItem('theme','dark');
+  } else {
+    body.classList.remove('dark');
+    themeBtn.textContent = '暗いモード';
+    localStorage.setItem('theme','light');
+  }
+}
+function toggleTheme() {
+  const isDark = document.body.classList.contains('dark');
+  setTheme(!isDark);
+}
+themeBtn.addEventListener('click', toggleTheme);
+/* 起動時に前回の設定を復元 */
+(() => {
+  const saved = localStorage.getItem('theme');
+  if (saved === 'dark') setTheme(true);
+})();
+/* -------------------------------------------------
+   スライダーの値変更時処理
+   ------------------------------------------------- */
+speedSlider.addEventListener('input', () => {
+  playDelay = parseInt(speedSlider.value);
+  speedValue.textContent = playDelay;
+  if (autoPlayBtn.dataset.state === 'running') {
+    stopAutoPlay();
+    startAutoPlay();
+  }
+});
+/* -------------------------------------------------
+   Ⅱ. ボード生成・描画
+   ------------------------------------------------- */
+function initBoard() {
+  board = [];
+  for (let r = 0; r < boardSize; r++) {
+    board[r] = [];
+    for (let c = 0; c < boardSize; c++) {
+      board[r][c] = colors[Math.floor(Math.random()*colors.length)];
+    }
+  }
+  renderBoard();
+  score = 0; moves = 0; updateScore();
+  messageEl.textContent = '';
+  isAnimating = false;
+  stopAutoPlay();
+}
+function renderBoard() {
+  boardEl.textContent = '';
+  for (let r = 0; r < boardSize; r++) {
+    for (let c = 0; c < boardSize; c++) {
+      const idx = r * boardSize + c;
+      const div = document.createElement('div');
+      div.className = 'tile';
+      div.dataset.idx = idx;
+      const col = board[r][c];
+      if (col === null) {
+        div.classList.add('empty');
+      } else {
+        div.style.background = col;
+      }
+      boardEl.appendChild(div);
+    }
+  }
+}
+/* -------------------------------------------------
+   Ⅲ. ユーザー操作（ドラッグ + スワップ）
+   ------------------------------------------------- */
+let dragStart = null;
+boardEl.addEventListener('mousedown', e => {
+  if (isAnimating) return;
+  const tile = e.target.closest('.tile');
+  if (!tile) return;
+  const idx = Number(tile.dataset.idx);
+  const [r,c] = indexToRC(idx);
+  if (board[r][c] === null) return;
+  dragStart = {r,c, elem: tile};
+  tile.style.opacity = 0.6;
+});
+boardEl.addEventListener('mouseup', e => {
+  if (!dragStart) return;
+  dragStart.elem.style.opacity = 1;
+  const target = e.target.closest('.tile');
+  if (!target) { dragStart = null; return; }
+  const idx = Number(target.dataset.idx);
+  const [r2,c2] = indexToRC(idx);
+  const {r:r1,c:c1} = dragStart;
+  if (Math.abs(r1-r2)+Math.abs(c1-c2) === 1) {
+    swapTiles(r1,c1,r2,c2);
+    checkAndClearMatches();
+  }
+  dragStart = null;
+});
+/* -------------------------------------------------
+   Ⅳ. スワップ & マッチ判定
+   ------------------------------------------------- */
+function swapTiles(r1,c1,r2,c2){
+  [board[r1][c1], board[r2][c2]] = [board[r2][c2], board[r1][c1]];
+  renderBoard();
+}
+/* 同色ライン（4 以上）検出 */
+function findMatches() {
+  const toClear = new Set();
+  const dirs = [[0,1],[1,0],[1,1],[1,-1]];   // 右・下・右下・左下
+  for (let r = 0; r < boardSize; r++) {
+    for (let c = 0; c < boardSize; c++) {
+      const col = board[r][c];
+      if (!col) continue;
+      for (const [dr,dc] of dirs) {
+        const line = [];
+        let rr = r, cc = c;
+        while (inside(rr,cc) && board[rr][cc] === col) {
+          line.push([rr,cc]);
+          rr += dr; cc += dc;
+        }
+        if (line.length >= 4) {
+          line.forEach(([sr,sc])=>toClear.add(`${sr}_${sc}`));
+        }
+      }
+    }
+  }
+  return Array.from(toClear);
+}
+function inside(r,c){ return r>=0 && c>=0 && r<boardSize && c<boardSize; }
+function rcToIndex(r,c){ return r*boardSize + c; }
+function indexToRC(i){ return [Math.floor(i/boardSize), i%boardSize]; }
+function removeTiles(cells) {
+  cells.forEach(key => {
+    const [r,c] = key.split('_').map(Number);
+    board[r][c] = null;
+  });
+}
+/* 落下と補充 */
+function applyGravityAndFill() {
+  for (let c = 0; c < boardSize; c++) {
+    const column = [];
+    for (let r = boardSize-1; r >= 0; r--) {
+      if (board[r][c] !== null) column.push(board[r][c]);
+    }
+    let r = boardSize-1;
+    for (const col of column) {
+      board[r][c] = col;
+      r--;
+    }
+    while (r >= 0) {
+      board[r][c] = colors[Math.floor(Math.random()*colors.length)];
+      r--;
+    }
+  }
+}
+/* 消去 & チェーン判定 */
+function checkAndClearMatches() {
+  if (isAnimating) return;
+  const matches = findMatches();
+  // 消えるものが無い → 手数だけ増やす
+  if (matches.length === 0) {
+    moves++; updateScore();
+    if (isFinished()) {
+      messageEl.textContent = `クリア！ 手数 ${moves}、スコア ${score}`;
+    }
+    return;
+  }
+  /* ① エフェクト付与 */
+  matches.forEach(key => {
+    const [r,c] = key.split('_').map(Number);
+    const idx = rcToIndex(r,c);
+    const tile = boardEl.querySelector(`.tile[data-idx='${idx}']`);
+    if (tile) tile.classList.add('removing');
+  });
+  /* ② アニメーション後に実際の削除・落下 */
+  isAnimating = true;
+  const ANIM_MS = parseFloat(getComputedStyle(document.documentElement)
+                    .getPropertyValue('--remove-duration')) * 1000;
+  setTimeout(() => {
+    removeTiles(matches);
+    applyGravityAndFill();
+    const added = matches.length * 5;   // 1 個＝5 pt
+    score += added;
+    moves++;   // 1 手としてカウント
+    renderBoard();
+    isAnimating = false;
+    checkAndClearMatches();   // 連鎖
+    updateScore();
+  }, ANIM_MS);
+}
+/* フィールドがすべて空か判定 */
+function isFinished() {
+  for (let r = 0; r < boardSize; r++) {
+    for (let c = 0; c < boardSize; c++) {
+      if (board[r][c] !== null) return false;
+    }
+  }
+  return true;
+}
+/* -------------------------------------------------
+   V. AI 自動プレイロジック
+   ------------------------------------------------- */
+function findSwapThatCreatesMatch() {
+  const clone = () => board.map(row=>[...row]);
+  for (let r = 0; r < boardSize; r++) {
+    for (let c = 0; c < boardSize; c++) {
+      if (!board[r][c]) continue;
+      const dirs = [[0,1],[1,0],[0,-1],[-1,0]];
+      for (const [dr,dc] of dirs) {
+        const nr=r+dr, nc=c+dc;
+        if (!inside(nr,nc) || !board[nr][nc]) continue;
+        const tmp = clone();
+        [tmp[r][c], tmp[nr][nc]] = [tmp[nr][nc], tmp[r][c]];
+        if (hasMatch(tmp)) return {r1:r,c1:c,r2:nr,c2:nc};
+      }
+    }
+  }
+  return null;
+}
+function hasMatch(arr) {
+  const dirs = [[0,1],[1,0],[1,1],[1,-1]];
+  for (let r = 0; r < boardSize; r++) {
+    for (let c = 0; c < boardSize; c++) {
+      const col = arr[r][c];
+      if (!col) continue;
+      for (const [dr,dc] of dirs) {
+        let len = 0, rr=r, cc=c;
+        while (inside(rr,cc) && arr[rr][cc] === col) {
+          len++; rr+=dr; cc+=dc;
+        }
+        if (len >= 4) return true;
+      }
+    }
+  }
+  return false;
+}
+/* AI の 1 手 */
+function aiPlayOneMove() {
+  if (isAnimating || isFinished()) return;
+  const move = findSwapThatCreatesMatch();
+  if (move) {
+    swapTiles(move.r1,move.c1,move.r2,move.c2);
+    checkAndClearMatches();
+  } else {
+    // ランダムに隣接ペアをスワップ（マッチが作れないなら）
+    const r = Math.floor(Math.random()*boardSize);
+    const c = Math.floor(Math.random()*boardSize);
+    const dirs = [[0,1],[1,0],[0,-1],[-1,0]];
+    const cand = dirs.map(([dr,dc])=>[r+dr,c+dc])
+                     .filter(([nr,nc])=>inside(nr,nc) && board[nr][nc]!=null);
+    if (cand.length) {
+      const [nr,nc] = cand[Math.floor(Math.random()*cand.length)];
+      swapTiles(r,c,nr,nc);
+      checkAndClearMatches();
+    } else {
+      moves++; updateScore();
+    }
+  }
+}
+/* 自動プレイの開始 / 停止 */
+function startAutoPlay() {
+  autoPlayBtn.textContent = '停止';
+  autoPlayBtn.dataset.state = 'running';
+  if (autoPlayTimer) clearInterval(autoPlayTimer);
+  autoPlayTimer = setInterval(() => {
+    if (!isFinished()) aiPlayOneMove();
+    else stopAutoPlay();
+  }, playDelay);
+}
+function stopAutoPlay() {
+  if (autoPlayTimer) clearInterval(autoPlayTimer);
+  autoPlayTimer = null;
+  autoPlayBtn.textContent = '自動プレイ';
+  autoPlayBtn.dataset.state = 'stopped';
+}
+/* -------------------------------------------------
+   VI. UI 更新・ボタン処理
+   ------------------------------------------------- */
+function updateScore() {
+  scoreEl.textContent = `スコア: ${score}`;
+  movesEl.textContent = `手数: ${moves}`;
+}
+/* ボタン処理 */
+newGameBtn.addEventListener('click', initBoard);
+autoPlayBtn.addEventListener('click', () => {
+  if (autoPlayBtn.dataset.state === 'running') stopAutoPlay();
+  else startAutoPlay();
+});
+/* 初回起動 */
+initBoard();
+</script>
+</body>
+</html>

style.css DELETED Viewed

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}