Spaces:

Raven7
/

GPTdsa

Running

App Files Files Community

GPTdsa / index.html

Raven7

Update index.html

d3bc0ee verified over 1 year ago

raw

history blame contribute delete

6.89 kB

	<!DOCTYPE html>
	<html>
	<head>
	<title>Go Game</title>
	<style>
	/* Styles for the Go game board and interface */
	.board {
	display: grid;
	grid-template-columns: repeat(19, 30px);
	grid-template-rows: repeat(19, 30px);
	gap: 1px;
	background-color: #dcb35c;
	border: 2px solid #000;
	width: fit-content;
	margin: 20px auto;
	}

	.intersection {
	width: 30px;
	height: 30px;
	position: relative;
	cursor: pointer;
	}

	/* Draw the grid intersections (lines) */
	.intersection::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 1px;
	background: #000;
	z-index: 1;
	}

	.intersection::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	width: 1px;
	background: #000;
	z-index: 1;
	}

	/* Style the star points on the board */
	.star-point::before {
	content: '';
	position: absolute;
	width: 6px;
	height: 6px;
	background: #000;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	}

	/* Stone rendering styles */
	.stone {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	position: absolute;
	top: 1px;
	left: 1px;
	z-index: 3;
	transition: 0.2s ease;
	}

	.black {
	background: #000;
	box-shadow: inset -2px -2px 8px rgba(255,255,255,0.2);
	}

	.white {
	background: #fff;
	box-shadow: inset -2px -2px 8px rgba(0,0,0,0.2);
	}

	/* General styles for game controls and interface */
	.controls {
	text-align: center;
	margin: 20px;
	}

	button {
	padding: 8px 16px;
	margin: 0 5px;
	font-size: 16px;
	border: none;
	border-radius: 4px;
	background: #4CAF50;
	color: white;
	cursor: pointer;
	transition: 0.3s;
	}

	button:hover {
	background: #45a049;
	}

	.game-info {
	text-align: center;
	margin: 20px;
	font-size: 18px;
	}

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

	<div class="game-info">
	<div>Current Player: <span id="currentPlayer">Black</span></div>
	</div>

	<div id="board" class="board">
	<!-- Board is dynamically created with JS -->
	</div>

	<script>
	class GoGame {
	constructor() {
	this.size = 19; // Size of the Go board
	this.board = Array(this.size).fill().map(() => Array(this.size).fill(null)); // Game state
	this.currentPlayer = 'black'; // Current player
	this.initialize();
	}

	// Initialize the game and the board
	initialize() {
	const boardElement = document.getElementById('board');
	boardElement.innerHTML = '';

	// Generate intersections
	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());
	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);

	console.log(`Clicked row: ${row}, col: ${col}`); // Debugging: Check click
	if (this.isValidMove(row, col)) {
	this.placeStone(row, col);
	}
	}

	isValidMove(row, col) {
	if (this.board[row][col] !== null) {
	console.log("Spot is already occupied");
	return false;
	}
	return true;
	}

	placeStone(row, col) {
	this.board[row][col] = this.currentPlayer; // Update the board state
	this.renderStone(row, col);
	this.switchPlayer();
	this.updateDisplay();
	}

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

	switchPlayer() {
	this.currentPlayer = this.currentPlayer === 'black' ? 'white' : 'black';
	}

	pass() {
	this.switchPlayer();
	this.updateDisplay();
	}

	reset() {
	this.board = Array(this.size).fill().map(() => Array(this.size).fill(null));
	const boardElement = document.getElementById('board');
	boardElement.innerHTML = '';
	this.initialize();
	}

	updateDisplay() {
	document.getElementById('currentPlayer').textContent =
	this.currentPlayer.charAt(0).toUpperCase() + this.currentPlayer.slice(1);
	}
	}

	new GoGame();
	</script>
	</body>
	</html>