<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 黑白棋</ title>
< style>
body {
display : flex;
flex-direction : column;
align-items : center;
justify-content : center;
height : 100vh;
margin : 0;
}
.status-bar {
margin-bottom : 10px;
font-size : 20px;
font-weight : bold;
}
.board {
display : grid;
grid-template-columns : repeat ( 8, 50px) ;
grid-gap : 1px;
width : 400px;
}
.cell {
width : 50px;
height : 50px;
background-color : #0A0;
position : relative;
border : 1px solid #000;
cursor : pointer;
}
.disk {
width : 100%;
height : 100%;
border-radius : 50%;
position : absolute;
top : 0;
left : 0;
}
.black {
background-color : #000;
}
.white {
background-color : #FFF;
}
</ style>
</ head>
< body>
< div class = " status-bar" id = " statusBar" > 当前轮到:黑方</ div>
< div id = " board" class = " board" > </ div>
< script>
const boardSize = 8 ;
let board = Array. from ( { length : boardSize} , ( ) => Array ( boardSize) . fill ( null ) ) ;
let currentPlayer = 'black' ;
function initializeBoard ( ) {
const boardElement = document. getElementById ( 'board' ) ;
for ( let i = 0 ; i < boardSize; i++ ) {
for ( let j = 0 ; j < boardSize; j++ ) {
const cell = document. createElement ( 'div' ) ;
cell. className = 'cell' ;
cell. dataset. row = i;
cell. dataset. col = j;
cell. addEventListener ( 'click' , cellClickHandler) ;
boardElement. appendChild ( cell) ;
}
}
placeDisk ( 3 , 3 , 'white' ) ;
placeDisk ( 4 , 4 , 'white' ) ;
placeDisk ( 3 , 4 , 'black' ) ;
placeDisk ( 4 , 3 , 'black' ) ;
drawBoard ( ) ;
}
function drawBoard ( ) {
const boardElement = document. getElementById ( 'board' ) ;
boardElement. innerHTML = '' ;
for ( let i = 0 ; i < boardSize; i++ ) {
for ( let j = 0 ; j < boardSize; j++ ) {
const cell = document. createElement ( 'div' ) ;
cell. className = 'cell' ;
cell. dataset. row = i;
cell. dataset. col = j;
cell. addEventListener ( 'click' , cellClickHandler) ;
if ( board[ i] [ j] ) {
const disk = document. createElement ( 'div' ) ;
disk. className = ` disk ${ board[ i] [ j] } ` ;
cell. appendChild ( disk) ;
}
boardElement. appendChild ( cell) ;
}
}
}
function cellClickHandler ( event ) {
const row = parseInt ( event. target. dataset. row, 10 ) ;
const col = parseInt ( event. target. dataset. col, 10 ) ;
makeMove ( row, col) ;
}
function makeMove ( x, y ) {
if ( board[ x] [ y] !== null ) return ;
const directions = [
[ - 1 , - 1 ] , [ - 1 , 0 ] , [ - 1 , 1 ] ,
[ 0 , - 1 ] , [ 0 , 1 ] ,
[ 1 , - 1 ] , [ 1 , 0 ] , [ 1 , 1 ]
] ;
let tilesToFlip = [ ] ;
for ( let [ dx, dy] of directions) {
let nx = x + dx;
let ny = y + dy;
let line = [ ] ;
while ( nx >= 0 && nx < boardSize && ny >= 0 && ny < boardSize) {
if ( board[ nx] [ ny] === oppositeColor ( currentPlayer) ) {
line. push ( [ nx, ny] ) ;
nx += dx;
ny += dy;
} else if ( board[ nx] [ ny] === currentPlayer) {
tilesToFlip = tilesToFlip. concat ( line) ;
break ;
} else {
line = [ ] ;
break ;
}
}
}
if ( tilesToFlip. length > 0 ) {
board[ x] [ y] = currentPlayer;
for ( let [ tx, ty] of tilesToFlip) {
board[ tx] [ ty] = currentPlayer;
}
currentPlayer = oppositeColor ( currentPlayer) ;
drawBoard ( ) ;
updateStatusBar ( ) ;
}
}
function placeDisk ( x, y, color ) {
board[ x] [ y] = color;
}
function oppositeColor ( color ) {
return color === 'black' ? 'white' : 'black' ;
}
function updateStatusBar ( ) {
const statusBarElement = document. getElementById ( 'statusBar' ) ;
statusBarElement. textContent = ` 当前轮到: ${ currentPlayer === 'black' ? '黑方' : '白方' } ` ;
}
initializeBoard ( ) ;
</ script>
</ body>
</ html>