查看“︁微件:五子棋”︁的源代码

<includeonly>
<style>
.gomoku-wrap {
    text-align: center;
    margin: 15px 0;
}
.gomoku-board {
    display: inline-block;
    background: #DEB887;
    padding: 5px;
    border-radius: 8px;
}
.gomoku-row {
    display: flex;
}
.gomoku-cell {
    width: 32px;
    height: 32px;
    background: #DEB887;
    position: relative;
    cursor: pointer;
}
.gomoku-cell::before,
.gomoku-cell::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: none;
}
.gomoku-cell.black::after {
    display: block;
    width: 26px;
    height: 26px;
    background: #000;
}
.gomoku-cell.white::after {
    display: block;
    width: 26px;
    height: 26px;
    background: #fff;
    border: 1px solid #999;
}
.gomoku-cell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px dashed rgba(0,0,0,0.1);
    display: block;
}
.gomoku-cell:hover {
    background: #e8c89e;
}
.gomoku-info {
    margin: 10px 0;
    font-size: 14px;
}
.gomoku-reset {
    padding: 6px 16px;
    background: #888;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}
</style>

<div class="gomoku-wrap">
    <div class="gomoku-info" id="gomoku-info">⚫ 黑方走棋</div>
    <div class="gomoku-board" id="gomoku-board"></div>
    <br>
    <button class="gomoku-reset" id="gomoku-reset">新游戏</button>
</div>

<script>
(function() {
    var SIZE = 15;
    var board = [];
    var currentPlayer = 'black'; // black or white
    var gameOver = false;

    function initBoard() {
        board = [];
        for (var r = 0; r < SIZE; r++) {
            board[r] = [];
            for (var c = 0; c < SIZE; c++) {
                board[r][c] = null;
            }
        }
        currentPlayer = 'black';
        gameOver = false;
        updateInfo();
    }

    function render() {
        var $board = $('#gomoku-board');
        $board.empty();
        for (var r = 0; r < SIZE; r++) {
            var $row = $('<div class="gomoku-row"></div>');
            for (var c = 0; c < SIZE; c++) {
                var $cell = $('<div class="gomoku-cell" data-r="' + r + '" data-c="' + c + '"></div>');
                if (board[r][c] === 'black') $cell.addClass('black');
                if (board[r][c] === 'white') $cell.addClass('white');
                $row.append($cell);
            }
            $board.append($row);
        }
    }

    function checkWin(row, col, player) {
        var dirs = [[0,1],[1,0],[1,1],[1,-1]];
        for (var d = 0; d < dirs.length; d++) {
            var dr = dirs[d][0], dc = dirs[d][1];
            var count = 1;
            for (var i = 1; i < 5; i++) {
                var r = row + dr * i, c = col + dc * i;
                if (r >= 0 && r < SIZE && c >= 0 && c < SIZE && board[r][c] === player) count++;
                else break;
            }
            for (var i = 1; i < 5; i++) {
                var r = row - dr * i, c = col - dc * i;
                if (r >= 0 && r < SIZE && c >= 0 && c < SIZE && board[r][c] === player) count++;
                else break;
            }
            if (count >= 5) return true;
        }
        return false;
    }

    function updateInfo() {
        var $info = $('#gomoku-info');
        if (gameOver) {
            var winner = currentPlayer === 'black' ? '⚪ 白方' : '⚫ 黑方';
            $info.text('🏆 ' + winner + '获胜！');
        } else {
            $info.text(currentPlayer === 'black' ? '⚫ 黑方走棋' : '⚪ 白方走棋');
        }
    }

    $('#gomoku-board').on('click', '.gomoku-cell', function() {
        if (gameOver) return;
        var r = parseInt($(this).data('r'));
        var c = parseInt($(this).data('c'));
        if (board[r][c]) return;

        board[r][c] = currentPlayer;
        render();

        if (checkWin(r, c, currentPlayer)) {
            gameOver = true;
            updateInfo();
            return;
        }

        currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
        updateInfo();
    });

    $('#gomoku-reset').click(function() {
        initBoard();
        render();
    });

    initBoard();
    render();
})();
</script>
</includeonly>