html+css+js实现五子棋游戏

枫叶&情缘

已于 2023-09-14 14:57:08 修改

阅读量806

点赞数

分类专栏：前端 JavaScript css 文章标签： javascript html css

于 2023-09-14 14:57:00 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45791806/article/details/132876856

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋游戏</title>
    <style>
        /* 游戏样式 */
        .board {
     
            display: grid;
            grid-template-columns: repeat(15, 40px);
            grid-template-rows: repeat(15, 40px);
            gap: 1px;
            background-color: #f0d9b5;
        }

        .cell {
     
            width: 40px;
            height: 40px;
            background-color: #fff;
            border: 1px solid #000;
            cursor: pointer;
        }

        .cell:hover {
     
            background-color: #ccc;
        }

        /* 按钮样式 */
        #reset-button {
     
            display: block;
            margin-top: 10px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }

        /* 添加样式以表示玩家的棋子 */
        .player-one {
     
            background-color: #000;
            border-radius: 50%;