> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pente HTML5 Game</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
#game-board {
display: grid;
margin: 20px auto;
border: 2px solid #333;
background: #f0f0f0;
}
.cell {
width: 40px;
height: 40px;
border: 1px solid #999;
box-sizing: border-box;
cursor: pointer;
}
.player1 {
background-color: black;
}
.player2 {
background-color: white;
}
#status {
margin-top: 10px;
}
button {
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Pente Board Game</h1>
<div id="game-board"></div>
<div id="status"></div>
<button id="restart">Restart Game</button>
<script>
const size = 19;
const board = [];
let currentPlayer = 1; // 1 or 2
let blackCaptures = 0;
let whiteCaptures = 0;
let gameActive = true;
const boardContainer = document.getElementById('game-board');
const statusDiv = document.getElementById('status');
function init() {
// Create board array
for (let i=0; i<size; i++) {
board[i]=[];
for (let j=0; j<size; j++) {
board[i][j]=0;
}
}
// Build DOM grid
boardContainer.innerHTML='';
boardContainer.style.gridTemplateRows=`repeat(${size},40px)`;
boardContainer.style.gridTemplateColumns=`repeat(${size},40px)`;
for (let i=0; i<size; i++) {
for (let j=0; j<size; j++) {
const cell = document.createElement('div');
cell.className='cell';
cell.dataset.row=i;
cell.dataset.col=j;
cell.addEventListener('click', handleMove);
boardContainer.appendChild(cell);
}
}
currentPlayer=1;
blackCaptures=0;
whiteCaptures=0;
gameActive=true;
updateStatus();
}
function handleMove(e) {
if (!gameActive) return;
const row=+e.target.dataset.row;
const col=+e.target.dataset.col;
if (board[row][col]!==0) return;
// Place stone
board[row][col]=currentPlayer;
e.target.className='cell '+(currentPlayer===1?'player1':'player2');
// Check captures
checkCaptures(row, col);
// Check win conditions
if (checkWin(row, col)) {
updateStatus(`Player ${currentPlayer} wins by alignment!`);
gameActive=false;
return;
}
if (currentPlayer===1 && blackCaptures>=5) {
updateStatus('Player 1 wins by captures!');
gameActive=false;
return;
}
if (currentPlayer===2 && whiteCaptures>=5) {
updateStatus('Player 2 wins by captures!');
gameActive=false;
return;
}
// Switch players
currentPlayer=3-currentPlayer;
updateStatus();
}
function checkWin(row, col) {
const directions=[[1,0],[0,1],[1,1],[1,-1]];
for (let [dx,dy] of directions) {
let count=1;
// forward
count+=countLine(row, col, dx, dy);
// backward
count+=countLine(row, col, -dx, -dy);
if (count>=5) return true;
}
return false;
}
function countLine(row, col, dx, dy) {
let count=0;
for (let i=1; i<5; i++) {
const r=row+dx*i;
const c=col+dy*i;
if (r<0 || r>=size || c<0 || c>=size) break;
if (board[r][c]===currentPlayer) count++;
else break;
}
return count;
}
function checkCaptures(row, col) {
const opponent = 3 - currentPlayer;
const directions=[[1,0],[0,1],[1,1],[1,-1]];
for (let [dx,dy] of directions) {
// Check pattern: current placed stone, then a pair of opponent stones, then player's stone
// E.g. for right: check cells at (row+dx, col+dy),(row+2*dx, col+2*dy), (row+3*dx, col+3*dy)
let r1=row+dx; let c1=col+dy;
let r2=row+2*dx; let c2=col+2*dy;
let r3=row+3*dx; let c3=col+3*dy;
if (r1<0 || r1>=size || c1<0 || c1>=size) continue;
if (r2<0 || r2>=size || c2<0 || c2>=size) continue;
if (r3<0 || r3>=size || c3<0 || c3>=size) continue;
if (board[r1][c1]===opponent && board[r2][c2]===opponent && board[r3][c3]===currentPlayer) {
// Capture the opponent's pair
board[r1][c1]=0;
board[r2][c2]=0;
// Remove stones visually
removeStone(r1,c1);
removeStone(r2,c2);
// Increment capture count
if (currentPlayer===1) {
blackCaptures++;
} else {
whiteCaptures++;
}
}
// Check the other direction as well (opposite)
// for symmetry
const rNeg1=row - dx; const cNeg1=col - dy;
const rNeg2=row - 2*dx; const cNeg2=col - 2*dy;
const rNeg3=row - 3*dx; const cNeg3=col - 3*dy;
if (rNeg1<0 || rNeg1>=size || cNeg1<0 || cNeg1>=size) continue;
if (rNeg2<0 || rNeg2>=size || cNeg2<0 || cNeg2>=size) continue;
if (rNeg3<0 || rNeg3>=size || cNeg3<0 || cNeg3>=size) continue;
if (board[rNeg1][cNeg1]===opponent && board[rNeg2][cNeg2]===opponent && board[rNeg3][cNeg3]===currentPlayer) {
// Capture
board[rNeg1][cNeg1]=0;
board[rNeg2][cNeg2]=0;
removeStone(rNeg1,cNeg1);
removeStone(rNeg2,cNeg2);
if (currentPlayer===1) {
blackCaptures++;
} else {
whiteCaptures++;
}
}
}
}
function removeStone(r,c) {
const index = r*size + c;
const cellDiv = boardContainer.children[index];
cellDiv.className='cell';
}
function updateStatus(message) {
if (message) {
statusDiv.textContent=message;
} else {
statusDiv.textContent=`Player ${currentPlayer}'s turn. Black captures: ${blackCaptures}, White captures: ${whiteCaptures}`;
}
}
document.getElementById('restart').addEventListener('click', init);
init();
</script>
</body>
</html>