Update index.html

index.html

@@ -10,7 +10,6 @@
             padding: 0;
             box-sizing: border-box;
         }
-
         body {
             display: flex;
             flex-direction: column;
@@ -20,14 +19,12 @@
             font-family: Arial, sans-serif;
             padding: 20px;
         }
-
         .game-container {
             background: #DEB887;
             padding: 20px;
             border-radius: 10px;
             box-shadow: 0 0 20px rgba(0,0,0,0.1);
         }
-
         .board {
             display: grid;
             grid-template-columns: repeat(19, 30px);
@@ -37,14 +34,12 @@
             border: 2px solid #000;
             position: relative;
         }
-
         .intersection {
             width: 30px;
             height: 30px;
             position: relative;
             cursor: pointer;
         }
-
         .intersection::before {
             content: '';
             position: absolute;
@@ -54,7 +49,6 @@
             height: 1px;
             background: #000;
         }
-
         .intersection::after {
             content: '';
             position: absolute;
@@ -64,7 +58,6 @@
             width: 1px;
             background: #000;
         }
-
         .stone {
             position: absolute;
             width: 26px;
@@ -75,23 +68,19 @@
             z-index: 1;
             transition: all 0.2s ease;
         }
-
         .black {
             background: #000;
             box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
         }
-
         .white {
             background: #fff;
             box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
         }
-
         .controls {
             margin-top: 20px;
             display: flex;
             gap: 10px;
         }
-
         button {
             padding: 10px 20px;
             font-size: 16px;
@@ -102,22 +91,18 @@
             color: white;
             transition: background 0.3s;
         }
-
         button:hover {
             background: #45a049;
         }
-
         .score {
             margin-top: 20px;
             font-size: 18px;
             display: flex;
             gap: 20px;
         }
-
         .mode-select {
             margin-bottom: 20px;
         }
-
         select {
             padding: 8px;
             font-size: 16px;
@@ -129,7 +114,9 @@
     <div class="mode-select">
         <select id="gameMode">
             <option value="pvp">Player vs Player</option>
-            <option value="ai">Player vs AI</option>
+            <option value="ai-easy">Player vs AI (Easy)</option>
+            <option value="ai-middle">Player vs AI (Middle)</option>
+            <option value="ai-hard">Player vs AI (Hard)</option>
         </select>
     </div>
 
@@ -156,12 +143,12 @@
                 this.lastMove = null;
                 this.passes = 0;
                 this.gameMode = 'pvp';
+                this.aiDifficulty = 'easy';
                 this.score = { black: 0, white: 0 };
                 this.capturedStones = { black: 0, white: 0 };
                 
                 this.initialize();
             }
-
             initialize() {
                 const boardElement = document.getElementById('board');
                 boardElement.innerHTML = '';
@@ -176,19 +163,18 @@
                         boardElement.appendChild(intersection);
                     }
                 }
-
                 document.getElementById('passBtn').addEventListener('click', () => this.pass());
                 document.getElementById('resetBtn').addEventListener('click', () => this.reset());
                 document.getElementById('gameMode').addEventListener('change', (e) => {
-                    this.gameMode = e.target.value;
+                    const mode = e.target.value;
+                    this.gameMode = mode.startsWith('ai') ? 'ai' : 'pvp';
+                    this.aiDifficulty = mode.split('-')[1] || 'easy';
                     this.reset();
                 });
             }
-
             handleMove(e) {
                 const row = parseInt(e.target.dataset.row);
                 const col = parseInt(e.target.dataset.col);
-
                 if(this.isValidMove(row, col)) {
                     this.placeStone(row, col);
                     
@@ -197,21 +183,17 @@
                     }
                 }
             }
-
             isValidMove(row, col) {
                 if(this.board[row][col] !== null) return false;
                 
-                // Place stone temporarily to check if it would be immediately captured
                 this.board[row][col] = this.currentPlayer;
                 const group = this.getGroup(row, col);
                 const liberties = this.countLiberties(group);
                 
-                // Revert the temporary stone
                 this.board[row][col] = null;
                 
                 return liberties > 0;
             }
-
             placeStone(row, col) {
                 if(this.board[row][col] === null) {
                     this.board[row][col] = this.currentPlayer;
@@ -222,14 +204,12 @@
                     this.updateScore();
                 }
             }
-
             renderStone(row, col) {
                 const intersection = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
                 const stone = document.createElement('div');
                 stone.className = `stone ${this.currentPlayer}`;
                 intersection.appendChild(stone);
             }
-
             getGroup(row, col) {
                 const color = this.board[row][col];
                 const group = new Set();
@@ -253,7 +233,6 @@
                 
                 return group;
             }
-
             countLiberties(group) {
                 const liberties = new Set();
                 
@@ -270,7 +249,6 @@
                 
                 return liberties.size;
             }
-
             getNeighbors(row, col) {
                 const neighbors = [];
                 const directions = [[-1,0], [1,0], [0,-1], [0,1]];
@@ -286,7 +264,62 @@
                 
                 return neighbors;
             }
-
+            evaluatePosition(row, col) {
+                let score = 0;
+                
+                // 보드 중앙에 가까울수록 높은 점수
+                const centerDistance = Math.abs(row - 9) + Math.abs(col - 9);
+                score += (18 - centerDistance) * 2;
+                // 주변 돌의 상태 평가
+                const neighbors = this.getNeighbors(row, col);
+                let friendlyStones = 0;
+                let enemyStones = 0;
+                let liberties = 0;
+                for (const [nr, nc] of neighbors) {
+                    if (this.board[nr][nc] === this.currentPlayer) friendlyStones++;
+                    else if (this.board[nr][nc] === null) liberties++;
+                    else enemyStones++;
+                }
+                score += friendlyStones * 10;
+                score += liberties * 5;
+                score += enemyStones * 3;
+                return score;
+            }
+            makeAIMove() {
+                const validMoves = [];
+                const scoredMoves = [];
+                for (let i = 0; i < this.size; i++) {
+                    for (let j = 0; j < this.size; j++) {
+                        if (this.isValidMove(i, j)) {
+                            const score = this.evaluatePosition(i, j);
+                            scoredMoves.push({ row: i, col: j, score: score });
+                            validMoves.push([i, j]);
+                        }
+                    }
+                }
+                if (validMoves.length === 0) {
+                    this.pass();
+                    return;
+                }
+                let selectedMove;
+                switch (this.aiDifficulty) {
+                    case 'easy':
+                        selectedMove = validMoves[Math.floor(Math.random() * validMoves.length)];
+                        break;
+                    case 'middle':
+                        scoredMoves.sort((a, b) => b.score - a.score);
+                        const middlePool = scoredMoves.slice(0, Math.floor(scoredMoves.length / 2));
+                        const middleChoice = middlePool[Math.floor(Math.random() * middlePool.length)];
+                        selectedMove = [middleChoice.row, middleChoice.col];
+                        break;
+                    case 'hard':
+                        scoredMoves.sort((a, b) => b.score - a.score);
+                        const bestMove = scoredMoves[0];
+                        selectedMove = [bestMove.row, bestMove.col];
+                        break;
+                }
+                this.placeStone(selectedMove[0], selectedMove[1]);
+            }
             captures() {
                 for(let i = 0; i < this.size; i++) {
                     for(let j = 0; j < this.size; j++) {
@@ -306,25 +339,6 @@
                     }
                 }
             }
-
-            makeAIMove() {
-                const validMoves = [];
-                for(let i = 0; i < this.size; i++) {
-                    for(let j = 0; j < this.size; j++) {
-                        if(this.isValidMove(i, j)) {
-                            validMoves.push([i, j]);
-                        }
-                    }
-                }
-
-                if(validMoves.length > 0) {
-                    const [row, col] = validMoves[Math.floor(Math.random() * validMoves.length)];
-                    this.placeStone(row, col);
-                } else {
-                    this.pass();
-                }
-            }
-
             pass() {
                 this.passes++;
                 if(this.passes === 2) {
@@ -336,7 +350,6 @@
                     setTimeout(() => this.makeAIMove(), 500);
                 }
             }
-
             reset() {
                 this.board = Array(this.size).fill().map(() => Array(this.size).fill(null));
                 this.currentPlayer = 'black';
@@ -347,7 +360,6 @@
                 intersections.forEach(intersection => intersection.innerHTML = '');
                 this.updateScore();
             }
-
             updateScore() {
                 document.getElementById('blackScore').textContent = 
                     this.score.black + this.capturedStones.black;
@@ -355,8 +367,7 @@
                     this.score.white + this.capturedStones.white;
             }
         }
-
         const game = new GoGame();
     </script>
 </body>
-</html><script async data-explicit-opt-in="true" data-cookie-opt-in="true" src="https://vercel.live/_next-live/feedback/feedback.js"></script>
+</html>