Spaces:

Raven7
/

HuggingGo1

Running

App Files Files Community

HuggingGo1 / index.html

Raven7

Update index.html

c57c264 verified about 1 year ago

raw

history blame contribute delete

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

	// AI 차례일 때는 플레이어가 돌을 놓을 수 없음
	if (this.gameMode === 'ai' && this.currentPlayer === 'white') {
	return;
	}

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

	// AI 차례일 때 자동으로 돌 놓기
	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() {
	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)) {
	const score = this.evaluateMove(i, j);
	if (score > bestScore) {
	bestScore = score;
	bestMove = [i, j];
	}
	}
	}
	}

	// 최적의 위치에 돌 놓기
	if (bestMove) {
	this.placeStone(bestMove[0], bestMove[1]);
	} else {
	this.pass();
	}
	}

	// 위치 평가를 위한 메소드 추가
	evaluateMove(row, col) {
	let score = 0;

	// 1. 주변 돌 평가
	const neighbors = this.getNeighbors(row, col);
	for (const [nRow, nCol] of neighbors) {
	if (this.board[nRow][nCol] === 'white') score += 10;
	else if (this.board[nRow][nCol] === 'black') score += 5;
	}

	// 2. 포위 가능성 평가
	this.board[row][col] = 'white';
	const captures = this.checkCaptures(row, col);
	this.board[row][col] = null;
	score += captures.length * 30;

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

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

	// 5. 가장자리 회피
	if (row === 0 \|\| row === 18 \|\| col === 0 \|\| col === 18) {
	score -= 5;
	}

	return score;
	}

	// 스타포인트 근처인지 확인하는 메소드 추가
	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
	);
	}
	}

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