Description
Certainly! Here is a simplified HTML5 implementation of a Pente-like game that allows two players to take turns, place stones, and track wins based on connecting five stones or capturing opponent pairs. It does not include AI, handles move deduplication, and adheres to your description.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pente Game</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; margin-top: 20px; }
table { border-collapse: collapse; margin: auto; }
td { width: 40px; height: 40px; border: 1px solid #333; cursor: pointer; }
.black { background-color: black; border-radius: 50%; }
.white { background-color: white; border-radius: 50%; }
#status { margin-top: 20px; }
</style>
</head>
<body>
<h2>Pente Board Game</h2>
<table id="board"></table>
<div id="status">
<p>Current Player: <span id="player">Black</span></p>
<p>Black captures: <span id="blackCaptures">0</span></p>
<p>White captures: <span id="whiteCaptures">0</span></p>
</div>
<script>
const size = 19;
let board = [];
let currentPlayer = 'black'; // 'black' or 'white'
let blackCaptures = 0;
let whiteCaptures = 0;
const maxCaptures = 5;
// Initialize the board array
for (let i = 0; i < size; i++) {
board[i] = [];
for (let j = 0; j < size; j++) {
board[i][j] = null;
}
}
// Create the HTML table
const table = document.getElementById('board');
for (let i = 0; i < size; i++) {
const row = document.createElement('tr');
for (let j = 0; j < size; j++) {
const cell = document.createElement('td');
cell.dataset.row = i;
cell.dataset.col = j;
cell.addEventListener('click', handleMove);
row.appendChild(cell);
}
table.appendChild(row);
}
function handleMove(e) {
const row = parseInt(e.target.dataset.row);
const col = parseInt(e.target.dataset.col);
if (board[row][col]) return; // Already occupied
// Place the stone
board[row][col] = currentPlayer;
e.target.className = currentPlayer;
// Deduplicate moves: prevent placing on occupied
// (Already checked)
// Check for captures
checkCaptures(row, col);
// Check for 5 in a row
if (checkWin(row, col)) {
alert(currentPlayer.charAt(0).toUpperCase() + currentPlayer.slice(1) + ' wins by alignment!');
resetGame();
return;
}
// Check for capture-based victory
if (currentPlayer === 'black' && blackCaptures >= 5) {
alert('Black wins by captures!');
resetGame();
return;
}
if (currentPlayer === 'white' && whiteCaptures >= 5) {
alert('White wins by captures!');
resetGame();
return;
}
// Switch player
currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
document.getElementById('player').textContent = currentPlayer.charAt(0).toUpperCase() + currentPlayer.slice(1);
document.getElementById('blackCaptures').textContent = blackCaptures;
document.getElementById('whiteCaptures').textContent = whiteCaptures;
}
function checkCaptures(row, col) {
const directions = [
{ dr: -1, dc: 0 }, // Up
{ dr: 1, dc: 0 }, // Down
{ dr: 0, dc: -1 }, // Left
{ dr: 0, dc: 1 }, // Right
{ dr: -1, dc: -1 },// Diagonal Up-Left
{ dr: -1, dc: 1 }, // Diagonal Up-Right
{ dr: 1, dc: -1 }, // Diagonal Down-Left
{ dr: 1, dc: 1 } // Diagonal Down-Right
];
const opponent = currentPlayer === 'black' ? 'white' : 'black';
for (const {dr, dc} of directions) {
// Check for pairs flanking an opponent's pair
const r1 = row + dr;
const c1 = col + dc;
const r2 = row + 2*dr;
const c2 = col + 2*dc;
const r3 = row + 3*dr;
const c3 = col + 3*dc;
// look two in direction: opponent's stones
if (isValid(r1, c1) && isValid(r2, c2) && isValid(r3, c3)) {
if (board[r1][c1] === opponent && board[r2][c2] === opponent && board[r3][c3] === currentPlayer) {
// Capture the pair at r1,c1 and r2,c2
captureStones([{r: r1, c: c1}, {r: r2, c: c2}]);
}
}
// Check other flank: opponent's stones at r-3,c-3 and r-2,c-2, flanked by current player's at r-1,c-1
const r_neg1 = row - dr;
const c_neg1 = col - dc;
const r_neg2 = row - 2*dr;
const c_neg2 = col - 2*dc;
const r_neg3 = row - 3*dr;
const c_neg3 = col - 3*dc;
if (isValid(r_neg1, c_neg1) && isValid(r_neg2, c_neg2) && isValid(r_neg3, c_neg3)) {
if (board[r_neg1][c_neg1] === opponent && board[r_neg2][c_neg2] === opponent && board[r_neg3][c_neg3] === currentPlayer) {
// Capture the pair at r_neg1,c_neg1 and r_neg2,c_neg2
captureStones([{r: r_neg1, c: c_neg1}, {r: r_neg2, c: c_neg2}]);
}
}
}
}
function captureStones(caps) {
caps.forEach(pos => {
const cell = document.querySelector(`td[data-row='${pos.r}'][data-col='${pos.c}']`);
if (board[pos.r][pos.c]) {
if (board[pos.r][pos.c] === 'black') {
blackCaptures++;
document.getElementById('blackCaptures').textContent = blackCaptures;
} else {
whiteCaptures++;
document.getElementById('whiteCaptures').textContent = whiteCaptures;
}
board[pos.r][pos.c] = null;
cell.className = '';
}
});
}
function checkWin(row, col) {
const lastColor = currentPlayer;
// Check all directions for 5 in a row
return checkDirection(row, col, 1, 0, lastColor) + checkDirection(row, col, -1, 0, lastColor) > 4 ||
checkDirection(row, col, 0, 1, lastColor) + checkDirection(row, col, 0, -1, lastColor) > 4 ||
checkDirection(row, col, 1, 1, lastColor) + checkDirection(row, col, -1, -1, lastColor) > 4 ||
checkDirection(row, col, 1, -1, lastColor) + checkDirection(row, col, -1, 1, lastColor) > 4;
}
function checkDirection(r, c, dr, dc, color) {
let count = 0;
for (let i = 1; i < 5; i++) {
const nr = r + dr*i;
const nc = c + dc*i;
if (!isValid(nr, nc) || board[nr][nc] !== color) break;
count++;
}
return count;
}
function isValid(r, c) {
return r >= 0 && r < size && c >= 0 && c < size;
}
function resetGame() {
// Clear board
for (let i = 0; i < size; i++) {
for (let j=0; j<size; j++) {
board[i][j] = null;
const cell = document.querySelector(`td[data-row='${i}'][data-col='${j}']`);
cell.className = '';
}
}
blackCaptures = 0;
whiteCaptures = 0;
document.getElementById('blackCaptures').textContent = blackCaptures;
document.getElementById('whiteCaptures').textContent = whiteCaptures;
currentPlayer = 'black';
document.getElementById('player').textContent = 'Black';
}
</script>
</body>
</html>
```
This code creates a playable Pente-like game with the core mechanics: alternating turns, placing stones, capturing pairs, and winning conditions by connecting five stones or captures. It prevents overwriting occupied cells (deduplication) and has no AI traces, matching your requirements.
