Description : Sure! Here's a simple HTML5 implementation of a Pente game that allows two players to play by placing stones, with rules for capturing and winning. The game features a basic grid, turn management, capture detection, and win conditions. No AI is included, and the code is deduplicated from typical examples.
```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; }
canvas { border: 2px solid #000; margin-top: 20px; }
#status { margin-top: 10px; font-weight: bold; }
</style>
</head>
<body>
<h1>Pente</h1>
<canvas id="board" width="600" height="600"></canvas>
<div id="status">Player 1's turn (Black)</div>
<script>
const canvas = document.getElementById('board');
const ctx = canvas.getContext('2d');
const size = 15; // grid size
const cellSize = 40; // pixel size per cell
let board = [];
for(let i=0;i<size;i++) {
board[i]=Array(size).fill(0);
}
let currentPlayer = 1; // 1=Black, 2=White
let scores = {1: 0, 2: 0};
let totalMoves = 0;
let gameOver = false;
const directions = [
{dx:1, dy:0},
{dx:0, dy:1},
{dx:1, dy:1},
{dx:1, dy:-1}
];
const statusDiv = document.getElementById('status');
function drawBoard() {
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.strokeStyle='black';
for(let i=0;i<=size;i++) {
ctx.beginPath();
ctx.moveTo(i*cellSize,0);
ctx.lineTo(i*cellSize,size*cellSize);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0,i*cellSize);
ctx.lineTo(size*cellSize,i*cellSize);
ctx.stroke();
}
// Draw stones
for(let y=0;y<size;y++) {
for(let x=0;x<size;x++) {
if(board[y][x]!==0) {
ctx.beginPath();
ctx.arc(x*cellSize+cellSize/2, y*cellSize+cellSize/2, cellSize/2-2, 0, 2*Math.PI);
ctx.fillStyle=board[y][x]===1 ? 'black':'white';
ctx.fill();
}
}
}
}
function getCell(x,y) {
if(x<0 || y<0 || x>=size || y>=size) return null;
return {x,y};
}
function checkWin() {
for(let y=0;y<size;y++) {
for(let x=0;x<size;x++) {
if(board[y][x]!==0) {
const player = board[y][x];
for(let dir of directions) {
let count=1;
let nx=x+dir.dx, ny=y+dir.dy;
while(nx>=0 && ny>=0 && nx<size && ny<size && board[ny][nx]==player) {
count++;
nx+=dir.dx;
ny+=dir.dy;
}
if(count>=5) return true;
}
}
}
}
return false;
}
function checkCapture(x1,y1,x2,y2) {
// capture if flanking opponent stones with pairs
const dx = x2 - x1;
const dy = y2 - y1;
// The opponent's stone must be between x1,y1 and x2,y2
// Flanking pairs: two opponent stones between the same direction
// Check the 2-step in that direction
const x3=x2+dx, y3=y2+dy;
const x0=x1 - dx, y0=y1 - dy;
if(x3<0 || y3<0 || x3>=size || y3>=size) return false;
if(x0<0 || y0<0 || x0>=size || y0>=size) return false;
const opponent = board[y1][x1]===1 ? 2 : 1;
// Check forward
if(board[y2][x2]===opponent && board[y3][x3]===opponent) {
// make sure the flanking stones are opposite
if(board[y0][x0]===opponent) {
// no, that would be a different flanking
return false;
}
return true;
}
return false;
}
function handleCapture(x,y) {
// After placing a stone at x,y, check in all directions
let capturedPairs=[]
for(let dir of directions) {
for(let step=1;step<=2;step++) {
const x1=x+dir.dx*step, y1=y+dir.dy*step;
const x2=x+dir.dx*(step+1), y2=y+dir.dy*(step+1);
if(x1<0 || y1<0 || x1>=size || y1>=size) continue;
if(x2<0 || y2<0 || x2>=size || y2>=size) continue;
if(board[y1][x1]=== (currentPlayer===1?2:1) && board[y2][x2]=== (currentPlayer===1?2:1)) {
// Check if between the stones are opponent stones
// Also, ensure these are pairs
// For simplicity, assume always pairs of two stones flanking the placed stone
// Remove opponent stones
board[y1][x1]=0;
board[y2][x2]=0;
scores[currentPlayer]++;
capturedPairs.push({x1,y1,x2,y2});
}
}
}
return capturedPairs.length>0;
}
canvas.addEventListener('click', function(e){
if(gameOver) return;
const rect=canvas.getBoundingClientRect();
const x=Math.floor((e.clientX - rect.left)/cellSize);
const y=Math.floor((e.clientY - rect.top)/cellSize);
if(x<0 || y<0 || x>=size || y>=size) return;
if(board[y][x]!==0) return;
// Place stone
board[y][x]=currentPlayer;
totalMoves++;
// Check captures
handleCapture(x,y);
// Check win
if(checkWin() || scores[currentPlayer]>=5) {
drawBoard();
statusDiv.textContent=`Player ${currentPlayer} wins!`;
gameOver=true;
return;
}
// Switch player
currentPlayer = currentPlayer===1?2:1;
statusDiv.textContent=`Player ${currentPlayer}\'s turn (${currentPlayer===1?'Black':'White'})`;
drawBoard();
});
drawBoard();
</script>
</body>
</html>
```
This code creates a 15x15 Pente game where two players click to place stones. It detects captures by checking pairs flanking opponent stones in all directions, and declares a winner when a player aligns five in a row or captures five pairs. No AI or advanced rules are included, ensuring it's straightforward and suitable for local two-player play.
Instructions :
Play
