alpha-go

Running

App Files Files Community

kolaslab commited on Dec 14, 2024

Commit

736a552

verified ·

1 Parent(s): 32a8ea3

Update index.html

Browse files

Files changed (1) hide show

index.html +198 -51

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Go Game</title>
     <style>
         * {
             margin: 0;
@@ -255,6 +255,7 @@
                 this.lastMove = null;
                 this.gameMode = 'pvp';
                 this.difficulty = 'easy';
                 this.initialize();
             }
@@ -262,14 +263,14 @@
                 const boardElement = document.getElementById('board');
                 boardElement.innerHTML = '';
-                for(let i = 0; i < this.size; i++) {
-                    for(let j = 0; j < this.size; j++) {
                         const intersection = document.createElement('div');
                         intersection.className = 'intersection';
                         intersection.dataset.row = i;
                         intersection.dataset.col = j;
-                        if(this.isStarPoint(i, j)) {
                             intersection.classList.add('star-point');
                         }
@@ -293,45 +294,50 @@
             isStarPoint(row, col) {
                 const starPoints = [
-                    [3,3], [3,9], [3,15],
-                    [9,3], [9,9], [9,15],
-                    [15,3], [15,9], [15,15]
                 ];
                 return starPoints.some(point => point[0] === row && point[1] === col);
             }
             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);
-                    if(this.gameMode === 'ai' && this.currentPlayer === 'white') {
-                        setTimeout(() => this.makeAIMove(), 500);
                     }
                 }
             }
             isValidMove(row, col) {
-                if(this.board[row][col] !== null) return false;
                 this.board[row][col] = this.currentPlayer;
                 const captures = this.checkCaptures(row, col);
                 const suicide = this.isSuicideMove(row, col);
                 this.board[row][col] = null;
                 return !suicide || captures.length > 0;
             }
             placeStone(row, col) {
                 this.board[row][col] = this.currentPlayer;
                 this.renderStone(row, col);
                 const captures = this.checkCaptures(row, col);
                 this.removeCaptures(captures);
                 this.lastMove = [row, col];
                 this.currentPlayer = this.currentPlayer === 'black' ? 'white' : 'black';
                 this.updateDisplay();
@@ -343,25 +349,26 @@
                 stone.className = `stone ${this.currentPlayer}`;
                 intersection.appendChild(stone);
             }
             checkCaptures(row, col) {
                 const captures = [];
                 const opponent = this.currentPlayer === 'black' ? 'white' : 'black';
                 const neighbors = this.getNeighbors(row, col);
-                for(const [nRow, nCol] of neighbors) {
-                    if(this.board[nRow][nCol] === opponent) {
                         const group = this.getGroup(nRow, nCol);
-                        if(this.isGroupCaptured(group)) {
                             captures.push(...group);
                         }
                     }
                 }
                 return captures;
             }
             removeCaptures(captures) {
-                for(const [row, col] of captures) {
                     this.board[row][col] = null;
                     const intersection = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
                     intersection.innerHTML = '';
@@ -374,32 +381,32 @@
                 const group = [];
                 const visited = new Set();
                 const stack = [[row, col]];
-                while(stack.length > 0) {
                     const [r, c] = stack.pop();
                     const key = `${r},${c}`;
-                    if(!visited.has(key)) {
                         visited.add(key);
                         group.push([r, c]);
                         const neighbors = this.getNeighbors(r, c);
-                        for(const [nr, nc] of neighbors) {
-                            if(this.board[nr][nc] === color) {
                                 stack.push([nr, nc]);
                             }
                         }
                     }
                 }
                 return group;
             }
             isGroupCaptured(group) {
-                for(const [row, col] of group) {
                     const neighbors = this.getNeighbors(row, col);
-                    for(const [nRow, nCol] of neighbors) {
-                        if(this.board[nRow][nCol] === null) return false;
                     }
                 }
                 return true;
@@ -407,18 +414,18 @@
             getNeighbors(row, col) {
                 const neighbors = [];
-                const directions = [[-1,0], [1,0], [0,-1], [0,1]];
-                for(const [dRow, dCol] of directions) {
                     const newRow = row + dRow;
                     const newCol = col + dCol;
-                    if(newRow >= 0 && newRow < this.size &&
-                       newCol >= 0 && newCol < this.size) {
                         neighbors.push([newRow, newCol]);
                     }
                 }
                 return neighbors;
             }
@@ -428,11 +435,16 @@
             }
             pass() {
                 this.currentPlayer = this.currentPlayer === 'black' ? 'white' : 'black';
                 this.updateDisplay();
-                if(this.gameMode === 'ai' && this.currentPlayer === 'white') {
-                    setTimeout(() => this.makeAIMove(), 500);
                 }
             }
@@ -441,18 +453,19 @@
                 this.currentPlayer = 'black';
                 this.captures = { black: 0, white: 0 };
                 this.lastMove = null;
                 this.initialize();
             }
             updateDisplay() {
-                document.getElementById('currentPlayer').textContent =
                     this.currentPlayer.charAt(0).toUpperCase() + this.currentPlayer.slice(1);
                 document.getElementById('blackCaptures').textContent = this.captures.black;
                 document.getElementById('whiteCaptures').textContent = this.captures.white;
             }
             makeAIMove() {
-                if(this.difficulty === 'easy') {
                     this.makeRandomMove();
                 } else {
                     this.makeStrategicMove();
@@ -461,15 +474,15 @@
             makeRandomMove() {
                 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 {
@@ -478,11 +491,145 @@
             }
             makeStrategicMove() {
                 this.makeRandomMove();
             }
         }
         const game = new GoGame();
     </script>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Go Game with Strategic AI</title>
     <style>
         * {
             margin: 0;
                 this.lastMove = null;
                 this.gameMode = 'pvp';
                 this.difficulty = 'easy';
+                this.isProcessing = false; // NEW: 작업 중 여부 플래그
                 this.initialize();
             }
                 const boardElement = document.getElementById('board');
                 boardElement.innerHTML = '';
+                for (let i = 0; i < this.size; i++) {
+                    for (let j = 0; j < this.size; j++) {
                         const intersection = document.createElement('div');
                         intersection.className = 'intersection';
                         intersection.dataset.row = i;
                         intersection.dataset.col = j;
+                        if (this.isStarPoint(i, j)) {
                             intersection.classList.add('star-point');
                         }
             isStarPoint(row, col) {
                 const starPoints = [
+                    [3, 3], [3, 9], [3, 15],
+                    [9, 3], [9, 9], [9, 15],
+                    [15, 3], [15, 9], [15, 15]
                 ];
                 return starPoints.some(point => point[0] === row && point[1] === col);
             }
             handleMove(e) {
+                if (this.isProcessing) return; // NEW: 클릭 방지
                 const row = parseInt(e.target.dataset.row);
                 const col = parseInt(e.target.dataset.col);
+                if (this.isValidMove(row, col)) {
                     this.placeStone(row, col);
+                    if (this.gameMode === 'ai' && this.currentPlayer === 'white') {
+                        this.isProcessing = true; // AI 작업 시작
+                        setTimeout(() => {
+                            this.makeAIMove();
+                            this.isProcessing = false; // AI 작업 완료
+                        }, 500);
                     }
                 }
             }
             isValidMove(row, col) {
+                if (this.board[row][col] !== null) return false;
                 this.board[row][col] = this.currentPlayer;
                 const captures = this.checkCaptures(row, col);
                 const suicide = this.isSuicideMove(row, col);
                 this.board[row][col] = null;
                 return !suicide || captures.length > 0;
             }
             placeStone(row, col) {
                 this.board[row][col] = this.currentPlayer;
                 this.renderStone(row, col);
                 const captures = this.checkCaptures(row, col);
                 this.removeCaptures(captures);
                 this.lastMove = [row, col];
                 this.currentPlayer = this.currentPlayer === 'black' ? 'white' : 'black';
                 this.updateDisplay();
                 stone.className = `stone ${this.currentPlayer}`;
                 intersection.appendChild(stone);
             }
             checkCaptures(row, col) {
                 const captures = [];
                 const opponent = this.currentPlayer === 'black' ? 'white' : 'black';
                 const neighbors = this.getNeighbors(row, col);
+                for (const [nRow, nCol] of neighbors) {
+                    if (this.board[nRow][nCol] === opponent) {
                         const group = this.getGroup(nRow, nCol);
+                        if (this.isGroupCaptured(group)) {
                             captures.push(...group);
                         }
                     }
                 }
                 return captures;
             }
             removeCaptures(captures) {
+                for (const [row, col] of captures) {
                     this.board[row][col] = null;
                     const intersection = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
                     intersection.innerHTML = '';
                 const group = [];
                 const visited = new Set();
                 const stack = [[row, col]];
+                while (stack.length > 0) {
                     const [r, c] = stack.pop();
                     const key = `${r},${c}`;
+                    if (!visited.has(key)) {
                         visited.add(key);
                         group.push([r, c]);
                         const neighbors = this.getNeighbors(r, c);
+                        for (const [nr, nc] of neighbors) {
+                            if (this.board[nr][nc] === color) {
                                 stack.push([nr, nc]);
                             }
                         }
                     }
                 }
                 return group;
             }
             isGroupCaptured(group) {
+                for (const [row, col] of group) {
                     const neighbors = this.getNeighbors(row, col);
+                    for (const [nRow, nCol] of neighbors) {
+                        if (this.board[nRow][nCol] === null) return false;
                     }
                 }
                 return true;
             getNeighbors(row, col) {
                 const neighbors = [];
+                const directions = [[-1, 0], [1, 0], [0, -1], [0, 1]];
+                for (const [dRow, dCol] of directions) {
                     const newRow = row + dRow;
                     const newCol = col + dCol;
+                    if (newRow >= 0 && newRow < this.size &&
+                        newCol >= 0 && newCol < this.size) {
                         neighbors.push([newRow, newCol]);
                     }
                 }
                 return neighbors;
             }
             }
             pass() {
+                if (this.isProcessing) return; // NEW: 클릭 방지
                 this.currentPlayer = this.currentPlayer === 'black' ? 'white' : 'black';
                 this.updateDisplay();
+                if (this.gameMode === 'ai' && this.currentPlayer === 'white') {
+                    this.isProcessing = true; // AI 작업 시작
+                    setTimeout(() => {
+                        this.makeAIMove();
+                        this.isProcessing = false; // AI 작업 완료
+                    }, 500);
                 }
             }
                 this.currentPlayer = 'black';
                 this.captures = { black: 0, white: 0 };
                 this.lastMove = null;
+                this.isProcessing = false; // 초기화 시 작업 상태 해제
                 this.initialize();
             }
             updateDisplay() {
+                document.getElementById('currentPlayer').textContent =
                     this.currentPlayer.charAt(0).toUpperCase() + this.currentPlayer.slice(1);
                 document.getElementById('blackCaptures').textContent = this.captures.black;
                 document.getElementById('whiteCaptures').textContent = this.captures.white;
             }
             makeAIMove() {
+                if (this.difficulty === 'easy') {
                     this.makeRandomMove();
                 } else {
                     this.makeStrategicMove();
             makeRandomMove() {
                 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 {
             }
             makeStrategicMove() {
+                const opponent = this.currentPlayer === 'black' ? 'white' : 'black';
+                const captureMoves = this.findCaptureMoves(opponent);
+                if (captureMoves.length > 0) {
+                    const [row, col] = captureMoves[0];
+                    this.placeStone(row, col);
+                    return;
+                }
+                const territoryMove = this.findTerritoryMove();
+                if (territoryMove) {
+                    const [row, col] = territoryMove;
+                    this.placeStone(row, col);
+                    return;
+                }
+                const connectionMove = this.findConnectionMove();
+                if (connectionMove) {
+                    const [row, col] = connectionMove;
+                    this.placeStone(row, col);
+                    return;
+                }
+                const separationMove = this.findSeparationMove(opponent);
+                if (separationMove) {
+                    const [row, col] = separationMove;
+                    this.placeStone(row, col);
+                    return;
+                }
+                const eyeMove = this.findEyeMakingMove();
+                if (eyeMove) {
+                    const [row, col] = eyeMove;
+                    this.placeStone(row, col);
+                    return;
+                }
                 this.makeRandomMove();
             }
+            findCaptureMoves(opponent) {
+                const captureMoves = [];
+                for (let row = 0; row < this.size; row++) {
+                    for (let col = 0; col < this.size; col++) {
+                        if (this.board[row][col] === opponent) {
+                            const group = this.getGroup(row, col);
+                            if (this.isGroupCaptured(group)) {
+                                const liberties = this.getLiberties(group);
+                                captureMoves.push(...liberties);
+                            }
+                        }
+                    }
+                }
+                return captureMoves.filter(([r, c]) => this.isValidMove(r, c));
+            }
+            findTerritoryMove() {
+                const importantPoints = [
+                    [9, 9],
+                    [3, 3], [3, 15], [15, 3], [15, 15],
+                    [9, 3], [9, 15], [3, 9], [15, 9]
+                ];
+                for (const [row, col] of importantPoints) {
+                    if (this.isValidMove(row, col)) {
+                        return [row, col];
+                    }
+                }
+                return null;
+            }
+            findConnectionMove() {
+                for (let row = 0; row < this.size; row++) {
+                    for (let col = 0; col < this.size; col++) {
+                        if (this.isValidMove(row, col)) {
+                            const neighbors = this.getNeighbors(row, col);
+                            for (const [nRow, nCol] of neighbors) {
+                                if (this.board[nRow][nCol] === this.currentPlayer) {
+                                    return [row, col];
+                                }
+                            }
+                        }
+                    }
+                }
+                return null;
+            }
+            findSeparationMove(opponent) {
+                for (let row = 0; row < this.size; row++) {
+                    for (let col = 0; col < this.size; col++) {
+                        if (this.isValidMove(row, col)) {
+                            const neighbors = this.getNeighbors(row, col);
+                            const opponentNeighbors = neighbors.filter(([nRow, nCol]) => this.board[nRow][nCol] === opponent);
+                            if (opponentNeighbors.length >= 2) {
+                                return [row, col];
+                            }
+                        }
+                    }
+                }
+                return null;
+            }
+            findEyeMakingMove() {
+                for (let row = 0; row < this.size; row++) {
+                    for (let col = 0; col < this.size; col++) {
+                        if (this.isValidMove(row, col)) {
+                            const group = this.getGroup(row, col);
+                            const liberties = this.getLiberties(group);
+                            if (liberties.length >= 2) {
+                                return [row, col];
+                            }
+                        }
+                    }
+                }
+                return null;
+            }
+            getLiberties(group) {
+                const liberties = new Set();
+                for (const [row, col] of group) {
+                    const neighbors = this.getNeighbors(row, col);
+                    for (const [nRow, nCol] of neighbors) {
+                        if (this.board[nRow][nCol] === null) {
+                            liberties.add(`${nRow},${nCol}`);
+                        }
+                    }
+                }
+                return Array.from(liberties).map((key) => key.split(',').map(Number));
+            }
         }
         const game = new GoGame();
     </script>
 </body>
+</html>