Spaces:
Running
Running
Titles : 围棋 (wéiqí) or 바둑 (baduk) or 囲棋 (baduk) or Go , 2-D Gameboard, only white or black tokens, options: 2 human players or 1 human player and computer, choice: level former, medium, advances, genius - Initial Deployment
79ad99e verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Go Game (围棋/바둑/囲碁)</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'board-dark': '#b58863', | |
| 'board-light': '#f0d9b5', | |
| 'stone-black': '#2b2b2b', | |
| 'stone-white': '#f9f9f9', | |
| 'player-black': '#333333', | |
| 'player-white': '#f0f0f0' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .board-cell { | |
| aspect-ratio: 1; | |
| transition: all 0.3s ease; | |
| } | |
| .board-cell:hover { | |
| transform: scale(1.05); | |
| } | |
| .stone { | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .stone-black { | |
| background: radial-gradient(circle at 30% 30%, #555, #000); | |
| } | |
| .stone-white { | |
| background: radial-gradient(circle at 30% 30%, #fff, #ccc); | |
| border: 1px solid #999; | |
| } | |
| .last-move { | |
| box-shadow: 0 0 8px 2px gold; | |
| } | |
| .game-info { | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| } | |
| .difficulty-btn { | |
| transition: all 0.2s ease; | |
| } | |
| .difficulty-btn:hover { | |
| transform: translateY(-2px); | |
| } | |
| .difficulty-btn.active { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 8px rgba(0,0,0,0.2); | |
| } | |
| .player-indicator { | |
| transition: all 0.3s ease; | |
| } | |
| .player-indicator.active { | |
| transform: scale(1.1); | |
| box-shadow: 0 0 8px rgba(0,0,0,0.3); | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .pulse-animation { | |
| animation: pulse 1.5s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-amber-50 to-amber-100 min-h-screen p-4 md:p-8"> | |
| <div class="max-w-6xl mx-auto"> | |
| <!-- Header --> | |
| <header class="text-center mb-6 md:mb-8"> | |
| <h1 class="text-3xl md:text-5xl font-bold text-amber-900 mb-2">Go Game</h1> | |
| <div class="flex flex-wrap justify-center gap-2 text-sm md:text-base"> | |
| <span class="bg-amber-200 px-3 py-1 rounded-full">围棋 (wéiqí)</span> | |
| <span class="bg-amber-200 px-3 py-1 rounded-full">바둑 (baduk)</span> | |
| <span class="bg-amber-200 px-3 py-1 rounded-full">囲碁 (igo)</span> | |
| <span class="bg-amber-200 px-3 py-1 rounded-full">Go</span> | |
| </div> | |
| </header> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8"> | |
| <!-- Game Board --> | |
| <div class="lg:col-span-2 bg-amber-800 rounded-2xl p-4 md:p-6 shadow-xl"> | |
| <div class="bg-board-light rounded-lg p-4 md:p-6 shadow-inner"> | |
| <div id="game-board" class="grid grid-cols-19 gap-0 w-full aspect-square max-w-2xl mx-auto"> | |
| <!-- Board will be generated by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Controls --> | |
| <div class="space-y-6 md:space-y-8"> | |
| <!-- Player Selection --> | |
| <div class="bg-white rounded-2xl p-5 shadow-lg game-info"> | |
| <h2 class="text-xl font-bold text-amber-900 mb-4 text-center">Players</h2> | |
| <div class="flex justify-center space-x-4 mb-4"> | |
| <div class="player-indicator flex flex-col items-center p-3 rounded-lg bg-amber-100"> | |
| <div class="w-8 h-8 rounded-full bg-black mb-2"></div> | |
| <span class="font-medium">Player 1</span> | |
| </div> | |
| <div class="player-indicator flex flex-col items-center p-3 rounded-lg bg-amber-100"> | |
| <div class="w-8 h-8 rounded-full bg-white border border-gray-300 mb-2"></div> | |
| <span class="font-medium">Player 2</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-center"> | |
| <button id="toggle-players" class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-lg transition"> | |
| <i class="fas fa-user-friends mr-2"></i>2 Players | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Difficulty Selection --> | |
| <div class="bg-white rounded-2xl p-5 shadow-lg game-info"> | |
| <h2 class="text-xl font-bold text-amber-900 mb-4 text-center">Difficulty</h2> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="difficulty-btn bg-amber-200 hover:bg-amber-300 text-amber-800 py-3 rounded-lg font-medium transition"> | |
| <i class="fas fa-leaf mr-2"></i>Beginner | |
| </button> | |
| <button class="difficulty-btn bg-amber-300 hover:bg-amber-400 text-amber-900 py-3 rounded-lg font-medium transition"> | |
| <i class="fas fa-graduation-cap mr-2"></i>Intermediate | |
| </button> | |
| <button class="difficulty-btn bg-amber-400 hover:bg-amber-500 text-amber-900 py-3 rounded-lg font-medium transition"> | |
| <i class="fas fa-chart-line mr-2"></i>Advanced | |
| </button> | |
| <button class="difficulty-btn bg-amber-500 hover:bg-amber-600 text-white py-3 rounded-lg font-medium transition"> | |
| <i class="fas fa-crown mr-2"></i>Genius | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Game Controls --> | |
| <div class="bg-white rounded-2xl p-5 shadow-lg game-info"> | |
| <h2 class="text-xl font-bold text-amber-900 mb-4 text-center">Game Controls</h2> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button id="new-game" class="bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg font-medium transition"> | |
| <i class="fas fa-plus mr-2"></i>New Game | |
| </button> | |
| <button id="pass-turn" class="bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium transition"> | |
| <i class="fas fa-step-forward mr-2"></i>Pass | |
| </button> | |
| <button id="undo" class="bg-amber-600 hover:bg-amber-700 text-white py-3 rounded-lg font-medium transition"> | |
| <i class="fas fa-undo mr-2"></i>Undo | |
| </button> | |
| <button id="reset" class="bg-red-600 hover:bg-red-700 text-white py-3 rounded-lg font-medium transition"> | |
| <i class="fas fa-redo mr-2"></i>Reset | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Game Status --> | |
| <div class="bg-white rounded-2xl p-5 shadow-lg game-info"> | |
| <h2 class="text-xl font-bold text-amber-900 mb-4 text-center">Game Status</h2> | |
| <div class="text-center"> | |
| <div class="flex justify-center items-center mb-3"> | |
| <div class="w-4 h-4 rounded-full bg-black mr-2"></div> | |
| <span class="font-medium">Black: 181</span> | |
| </div> | |
| <div class="flex justify-center items-center mb-3"> | |
| <div class="w-4 h-4 rounded-full bg-white border border-gray-300 mr-2"></div> | |
| <span class="font-medium">White: 180</span> | |
| </div> | |
| <div class="mt-4 p-3 bg-amber-100 rounded-lg"> | |
| <p class="text-amber-800 font-medium">Current Player: <span class="text-amber-900">Black</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Instructions --> | |
| <div class="mt-8 bg-white rounded-2xl p-5 shadow-lg"> | |
| <h2 class="text-xl font-bold text-amber-900 mb-3">How to Play Go</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="p-3 bg-amber-50 rounded-lg"> | |
| <div class="text-amber-700 font-bold mb-1">Objective</div> | |
| <p class="text-sm">Surround more territory than your opponent by placing stones on the intersections.</p> | |
| </div> | |
| <div class="p-3 bg-amber-50 rounded-lg"> | |
| <div class="text-amber-700 font-bold mb-1">Gameplay</div> | |
| <p class="text-sm">Players take turns placing stones. Black goes first. Stones are placed on intersections.</p> | |
| </div> | |
| <div class="p-3 bg-amber-50 rounded-lg"> | |
| <div class="text-amber-700 font-bold mb-1">Capturing</div> | |
| <p class="text-sm">Stones with no liberties (empty adjacent points) are captured and removed from the board.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Game board setup | |
| const board = document.getElementById('game-board'); | |
| const boardSize = 19; | |
| // Create the game board | |
| for (let i = 0; i < boardSize; i++) { | |
| for (let j = 0; j < boardSize; j++) { | |
| const cell = document.createElement('div'); | |
| cell.classList.add('board-cell', 'relative'); | |
| cell.dataset.row = i; | |
| cell.dataset.col = j; | |
| // Add star points for 19x19 board | |
| if ((i === 3 || i === 9 || i === 15) && (j === 3 || j === 9 || j === 15)) { | |
| const star = document.createElement('div'); | |
| star.classList.add('absolute', 'w-2', 'h-2', 'bg-gray-700', 'rounded-full', 'top-1/2', 'left-1/2', 'transform', '-translate-x-1/2', '-translate-y-1/2'); | |
| cell.appendChild(star); | |
| } | |
| board.appendChild(cell); | |
| } | |
| } | |
| // Add event listeners for board cells | |
| document.querySelectorAll('.board-cell').forEach(cell => { | |
| cell.addEventListener('click', () => { | |
| // Add stone placement logic here | |
| const row = cell.dataset.row; | |
| const col = cell.dataset.col; | |
| console.log(`Clicked on cell (${row}, ${col})`); | |
| // For demo purposes, add a black stone | |
| if (!cell.querySelector('.stone')) { | |
| const stone = document.createElement('div'); | |
| stone.classList.add('stone', 'stone-black', 'w-4/5', 'h-4/5', 'rounded-full', 'absolute', 'top-1/2', 'left-1/2', 'transform', '-translate-x-1/2', '-translate-y-1/2'); | |
| cell.appendChild(stone); | |
| } | |
| }); | |
| }); | |
| // Player toggle button | |
| const togglePlayersBtn = document.getElementById('toggle-players'); | |
| togglePlayersBtn.addEventListener('click', () => { | |
| if (togglePlayersBtn.innerHTML.includes('2 Players')) { | |
| togglePlayersBtn.innerHTML = '<i class="fas fa-user mr-2"></i>1 Player vs AI'; | |
| } else { | |
| togglePlayersBtn.innerHTML = '<i class="fas fa-user-friends mr-2"></i>2 Players'; | |
| } | |
| }); | |
| // Difficulty buttons | |
| document.querySelectorAll('.difficulty-btn').forEach((btn, index) => { | |
| btn.addEventListener('click', () => { | |
| document.querySelectorAll('.difficulty-btn').forEach(b => b.classList.remove('active')); | |
| btn.classList.add('active'); | |
| }); | |
| }); | |
| // Game control buttons | |
| document.getElementById('new-game').addEventListener('click', () => { | |
| alert('New game started!'); | |
| }); | |
| document.getElementById('pass-turn').addEventListener('click', () => { | |
| alert('Turn passed!'); | |
| }); | |
| document.getElementById('undo').addEventListener('click', () => { | |
| alert('Last move undone!'); | |
| }); | |
| document.getElementById('reset').addEventListener('click', () => { | |
| alert('Game reset!'); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=BaumesterSte/gaming-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |