A simple Gomoku game where the player competes against an AI. The player uses black stones, while the AI uses white stones.
Prompt
create a Gomoku game that player play with AI (PC). player is black, AI is white.
HTML
<div id="game-board"></div><div id="game-info">Player (Black) vs AI (White)</div>
CSS
#game-board { display: grid; grid-template-columns: repeat(15, 40px); grid-gap: 1px; width: fit-content; margin: 20px auto; border: 2px solid #000; } #game-board div { width: 40px; height: 40px; background-color: #f3f3f3; display: flex; justify-content: center; align-items: center; font-size: 24px; cursor: pointer; } #game-board div.taken { cursor: default; background-color: #e6e6e6; } #game-info { text-align: center; margin: 10px; font-size: 18px; }JS
(function() { const gameBoard = document.getElementById('game-board'); const size = 15; let board = Array(size).fill(null).map(() => Array(size).fill('')); let currentPlayer = 'B'; // Player is 'B', AI is 'W' const checkWin = () => { // Basic check for five in a row, column or diagonal const directions = [[1, 0], [0, 1], [1, 1], [1, -1]]; for (let x = 0; x < size; x++) { for (let y = 0; y < size; y++) { if (board[x][y] !== '') { const current = board[x][y]; for (const [dx, dy] of directions) { let count = 1; while (count < 5 && x + count * dx >= 0 && x + count * dx < size && y + count * dy >= 0 && y + count * dy < size && board[x + count * dx][y + count * dy] === current) { count++; } if (count === 5) { return current; } } } } } return null; }; const aiMove = () => { let moved = false; while (!moved) { const x = Math.floor(Math.random() * size); const y = Math.floor(Math.random() * size); if (board[x][y] === '') { board[x][y] = 'W'; renderBoard(); moved = true; } } }; const renderBoard = () => { gameBoard.innerHTML = ''; for (let i = 0; i < size; i++) { for (let j = 0; j < size; j++) { const cell = document.createElement('div'); cell.textContent = board[i][j] === 'B' ? '⚫' : board[i][j] === 'W' ? '⚪' : ''; cell.className = board[i][j] !== '' ? 'taken' : ''; cell.addEventListener('click', () => { if (currentPlayer === 'B' && board[i][j] === '') { board[i][j] = 'B'; renderBoard(); const winner = checkWin(); if (winner) { alert(`${winner === 'B' ? 'Player' : 'AI'} wins!`); gameBoard.innerHTML = ''; return; } currentPlayer = 'W'; aiMove(); const aiWinner = checkWin(); if (aiWinner) { alert(`${aiWinner === 'B' ? 'Player' : 'AI'} wins!`); gameBoard.innerHTML = ''; return; } currentPlayer = 'B'; } }); gameBoard.appendChild(cell); } } }; renderBoard(); })();Comments (0)
Log in to comment.
Working...