【HTML网页】五子棋小游戏（包含网页源代码）

下面是制作的五子棋小游戏。你可以点击棋盘落子开始游戏，黑棋先行。当一方在横、竖或斜方向形成五子连线时，游戏结束并显示胜利者。

<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋游戏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#8B5A2B',
                        secondary: '#D2B48C',
                        board: '#DEB887',
                        black: '#000000',
                        white: '#FFFFFF',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

1. 现代美观的 UI 设计：采用木纹棋盘风格，棋子有阴影和渐变效果，界面层次分明。
2. 完整的游戏功能：
   • 黑白双方轮流落子
   • 自动判断胜负和平局
   • 实时显示游戏状态和时间
   • 支持悔棋功能
3. 流畅的动画效果：
   • 落子时有平滑过渡
   • 胜利模态框有淡入效果
   • 鼠标悬停时有棋子预览
4. 响应式设计：适配不同屏幕尺寸，在手机和桌面设备上都能良好显示。
5. 游戏规则说明：包含简单的规则介绍，方便新手理解。