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.