Spaces:

Raven7
/

HuggingGo1

Running

App Files Files Community

HuggingGo1 / index.html

Raven7

Update index.html

c2ce6ca verified over 1 year ago

raw

history blame

20.8 kB

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Go Game</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: 'Segoe UI', system-ui, sans-serif;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	}

	.game-container {
	max-width: 800px;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	padding: 30px;
	}

	.board {
	display: grid;
	grid-template-columns: repeat(19, 30px);
	grid-template-rows: repeat(19, 30px);
	gap: 1px;
	background: #dcb35c;
	border: 2px solid #2c3e50;
	border-radius: 4px;
	margin: 20px auto;
	padding: 10px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
	}

	.intersection {
	width: 30px;
	height: 30px;
	position: relative;
	cursor: pointer;
	transition: background 0.2s;
	}

	.intersection:hover::before {
	content: '';
	position: absolute;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.1);
	top: 1px;
	left: 1px;
	z-index: 2;
	}

	.intersection::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 1px;
	background: rgba(0, 0, 0, 0.7);
	z-index: 1;
	}

	.intersection::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	width: 1px;
	background: rgba(0, 0, 0, 0.7);
	z-index: 1;
	}

	.star-point::after {
	content: '';
	position: absolute;
	width: 8px;
	height: 8px;
	background: #2c3e50;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	}

	.stone {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	position: absolute;
	top: 1px;
	left: 1px;
	z-index: 3;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	animation: placeStone 0.3s ease-out;
	}

	@keyframes placeStone {
	from {
	transform: scale(1.2);
	opacity: 0;
	}
	to {
	transform: scale(1);
	opacity: 1;
	}
	}

	.black {
	background: radial-gradient(circle at 35% 35%, #4a4a4a 0%, #000000 100%);
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
	}

	.white {
	background: radial-gradient(circle at 35% 35%, #ffffff 0%, #e0e0e0 100%);
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
	}

	.controls {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin: 20px 0;
	}

	button {
	padding: 10px 20px;
	font-size: 16px;
	border: none;
	border-radius: 8px;
	background: #3498db;
	color: white;
	cursor: pointer;
	transition: all 0.3s;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	button:hover {
	background: #2980b9;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}

	select {
	padding: 8px 16px;
	font-size: 16px;
	border: 1px solid #ddd;
	border-radius: 8px;
	background: white;
	cursor: pointer;
	transition: all 0.3s;
	}

	select:hover {
	border-color: #3498db;
	}

	.game-info {
	text-align: center;
	margin: 20px 0;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	}

	.game-info div {
	margin: 10px 0;
	font-size: 18px;
	color: #2c3e50;
	}

	#currentPlayer {
	font-weight: bold;
	color: #3498db;
	}

	.mode-select {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin-bottom: 20px;
	}

	@media (max-width: 768px) {
	.game-container {
	padding: 15px;
	}

	.board {
	transform: scale(0.8);
	transform-origin: center;
	}

	.controls {
	flex-direction: column;
	align-items: center;
	}

	button {
	width: 100%;
	max-width: 200px;
	}
	}
	</style>
	</head>
	<body>
	<div class="game-container">
	<div class="mode-select">
	<select id="gameMode">
	<option value="pvp">Player vs Player</option>
	<option value="ai">Player vs AI</option>
	</select>
	<select id="difficulty">
	<option value="easy">Easy</option>
	<option value="hard">Hard</option>
	</select>
	</div>

	<div id="board" class="board"></div>

	<div class="game-info">
	<div>Current Player: <span id="currentPlayer">Black</span></div>
	<div>Black Captures: <span id="blackCaptures">0</span></div>
	<div>White Captures: <span id="whiteCaptures">0</span></div>
	</div>

	<div class="controls">
	<button id="passBtn">Pass</button>
	<button id="resetBtn">Reset</button>
	</div>
	</div>

	<script>
	class GoGame {
	constructor() {
	this.size = 19;
	this.board = Array(this.size).fill().map(() => Array(this.size).fill(null));
	this.currentPlayer = 'black';
	this.captures = { black: 0, white: 0 };
	this.lastMove = null;
	this.gameMode = 'pvp';
	this.difficulty = 'easy';
	this.initialize();
	}

	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');
	}

	intersection.addEventListener('click', (e) => this.handleMove(e));
	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;
	this.reset();
	});
	document.getElementById('difficulty').addEventListener('change', (e) => {
	this.difficulty = e.target.value;
	});

	this.updateDisplay();
	}

	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.gameMode === 'ai' && this.currentPlayer === 'white') {
	return; // AI 차례에는 플레이어가 돌을 놓을 수 없음
	}

	if (this.isValidMove(row, col)) {
	this.placeStone(row, col);

	if (this.gameMode === 'ai' && this.currentPlayer === 'white') {
	setTimeout(() => {
	if (this.difficulty === 'easy') {
	this.makeRandomMove();
	} else {
	this.makeStrategicMove();
	}
	}, 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) {
	if (this.board[row][col] !== null) return;

	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();

	// AI 차례 자동 진행
	if (this.gameMode === 'ai' && this.currentPlayer === 'white') {
	setTimeout(() => {
	if (this.difficulty === 'easy') {
	this.makeRandomMove();
	} else {
	this.makeStrategicMove();
	}
	}, 500);
	}
	}

	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);
	}
	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 = '';
	this.captures[this.currentPlayer]++;
	}
	}

	getGroup(row, col) {
	const color = this.board[row][col];
	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;
	}

	isSuicideMove(row, col) {
	const group = this.getGroup(row, col);
	return this.isGroupCaptured(group);
	}

	pass() {
	this.currentPlayer = this.currentPlayer === 'black' ? 'white' : 'black';
	this.updateDisplay();

	if (this.gameMode === 'ai' && this.currentPlayer === 'white') {
	setTimeout(() => {
	if (this.difficulty === 'easy') {
	this.makeRandomMove();
	} else {
	this.makeStrategicMove();
	}
	}, 500);
	}
	}
	}

	reset() {
	this.board = Array(this.size).fill().map(() => Array(this.size).fill(null));
	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();
	}
	}

	// GoGame 클래스 내의 makeStrategicMove 메소드를 다음과 같이 수정
	makeStrategicMove() {
	// 현재 보드 상태 평가
	const boardScore = this.evaluateBoard();

	// 가능한 모든 수의 점수를 계산
	let bestScore = -Infinity;
	let bestMove = null;

	for(let i = 0; i < this.size; i++) {
	for(let j = 0; j < this.size; j++) {
	if(this.isValidMove(i, j)) {
	// 가상으로 돌을 놓아보고 점수 계산
	this.board[i][j] = 'white';
	const score = this.calculateMoveScore(i, j, boardScore);
	this.board[i][j] = null;

	if(score > bestScore) {
	bestScore = score;
	bestMove = [i, j];
	}
	}
	}
	}

	if(bestMove) {
	this.placeStone(bestMove[0], bestMove[1]);
	} else {
	this.pass();
	}
	}

	evaluateBoard() {
	const evaluation = {
	territory: this.evaluateTerritory(),
	influence: this.evaluateInfluence(),
	connections: this.evaluateConnections(),
	captures: this.captures
	};
	return evaluation;
	}

	calculateMoveScore(row, col, boardScore) {
	let score = 0;

	// 1. 영토 점수
	score += this.calculateTerritoryScore(row, col) * 2;

	// 2. 연결성 점수
	score += this.calculateConnectionScore(row, col) * 1.5;

	// 3. 공격/방어 점수
	score += this.calculateTacticalScore(row, col);

	// 4. 위험 회피 점수
	score += this.calculateSafetyScore(row, col);

	// 5. 전략적 위치 점수
	score += this.calculateStrategicScore(row, col);

	return score;
	}

	calculateTerritoryScore(row, col) {
	let score = 0;
	const radius = 3;

	for(let i = Math.max(0, row-radius); i <= Math.min(this.size-1, row+radius); i++) {
	for(let j = Math.max(0, col-radius); j <= Math.min(this.size-1, col+radius); j++) {
	const distance = Math.abs(row-i) + Math.abs(col-j);
	if(distance <= radius) {
	if(this.board[i][j] === null) score += (radius - distance + 1);
	else if(this.board[i][j] === 'white') score += 2;
	else score -= 1;
	}
	}
	}
	return score;
	}

	calculateConnectionScore(row, col) {
	let score = 0;
	const neighbors = this.getNeighbors(row, col);

	for(const [nRow, nCol] of neighbors) {
	if(this.board[nRow][nCol] === 'white') {
	score += 10;
	// 두 돌이 연결되면 더 높은 점수
	if(this.areConnected(row, col, nRow, nCol)) score += 5;
	}
	}
	return score;
	}

	calculateTacticalScore(row, col) {
	let score = 0;
	const neighbors = this.getNeighbors(row, col);

	// 상대 돌 공격 기회 확인
	for(const [nRow, nCol] of neighbors) {
	if(this.board[nRow][nCol] === 'black') {
	const group = this.getGroup(nRow, nCol);
	const liberties = this.countLiberties(group);
	if(liberties <= 2) score += (20 - liberties * 5);
	}
	}

	return score;
	}

	calculateSafetyScore(row, col) {
	let score = 0;
	const group = [[row, col]];
	const liberties = this.countLiberties(group);

	score += liberties * 5;

	// 눈 형성 가능성 체크
	if(this.canFormEye(row, col)) score += 15;

	return score;
	}

	calculateStrategicScore(row, col) {
	let score = 0;

	// 중앙 지역 선호
	const centerDistance = Math.abs(row - 9) + Math.abs(col - 9);
	score += Math.max(0, 10 - centerDistance);

	// 변에 붙지 않도록
	if(row === 0 \|\| row === 18 \|\| col === 0 \|\| col === 18) score -= 5;

	// 스타포인트 근처 선호
	if(this.isNearStarPoint(row, col)) score += 3;

	return score;
	}

	countLiberties(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 liberties.size;
	}

	canFormEye(row, col) {
	const neighbors = this.getNeighbors(row, col);
	let whiteCount = 0;
	let emptyCount = 0;

	for(const [nRow, nCol] of neighbors) {
	if(this.board[nRow][nCol] === 'white') whiteCount++;
	else if(this.board[nRow][nCol] === null) emptyCount++;
	}

	return whiteCount >= 2 && emptyCount >= 1;
	}

	isNearStarPoint(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 =>
	Math.abs(point[0] - row) <= 1 &&
	Math.abs(point[1] - col) <= 1
	);
	}

	areConnected(row1, col1, row2, col2) {
	const diagonal = Math.abs(row1 - row2) === 1 && Math.abs(col1 - col2) === 1;
	if(!diagonal) return true;

	// 대각선 방향 연결 확인
	const mid1 = this.board[row1][col2];
	const mid2 = this.board[row2][col1];

	return mid1 === null \|\| mid2 === null;
	}
	}

	const game = new GoGame();
	</script>
	</body>
	</html>