---
# System prepended metadata

title: jQuery應用 - 撲克牌發牌 (2)
tags: [前端程式設計, 108-1]

---

# jQuery應用 - 撲克牌發牌 (2)

發五張牌蓋起來的撲克牌，當滑鼠點到後，才翻牌

## poker2.html

```htmlmixed=
<!doctype html>
<html lang="zh-TW">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- 引用自已定義的CSS -->
    <link rel="stylesheet" href="./css/temp.css">
    <link rel="stylesheet" href="./css/poker.css">
    <title>撲克牌發牌</title>
</head>

<body>

    <div class="container">

        <!-- 標題 -->
        <div class="row">
            <div class="col">
                <div class="jumbotron">
                    <h1 class="display-4">撲克牌發牌</h1>
                </div>
            </div>
        </div>

        <!-- 表單 -->
        <div class="row">
            <div class="col">
                <form>
                    <div class="form-group row">
                        <div class="col-sm-10">
                            <button id="main" type="button" class="btn btn-primary">發牌</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- 產生 撲克牌 的區塊-->
        <div class="row" id="data">
        </div>

        <div class="row">
            <div class="col">
                <footer>
                    copyright &copy; 2019 前端程式設計
                </footer>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <!-- 引用自己寫的 js -->
    <script src="./js/math.js"></script>
    <script src="./js/poker.js"></script>
</body>

</html>
```

## poker.css

```css=
#data {
    margin-bottom: 50px;
    margin-top: 20px;
}

.poker {
    text-align: center;
}
```

## poker2.js

```javascript=
// 產生撲克牌在網頁上
var newPoker = (r) => {
    // 產生 img 的 jQuery 物件在變數 $img
    var $img = $('<img>').attr('src', './poker/back.png')
    $img.attr('data-poker', r)
    $img.attr('data-back', true)

    // 當img被按到的時候
    $img.on('click', (event) => {
        let $obj = $(event.target)

        // 判斷目前牌是蓋著還是翻開
        if ($obj.attr('data-back') == 'true') {
            // 目前牌是蓋著，要執行翻牌動作
            let r = $obj.attr('data-poker')
            r = Number(r)
            $obj.attr('src', './poker/pic' + (r + 1) + '.png')
            $obj.attr('data-back', false)
        } else {
            // 目前牌是打開的，要執行蓋牌的動作
            $obj.attr('src', './poker/back.png')
            $obj.attr('data-back', true)
        }
    })

    // 產生 div 的 jQuery 物件在變數 $div
    $div = $('<div>').addClass('col').addClass('poker')

    // 將 $img 插入到 $div 內
    $div.append($img)

    // 將 $div 插入到網頁 id=data 的html element 裡面
    $('#data').append($div)
}

$(() => {
    $('#main').on('click', () => {

        // 洗空桌面
        $('#data').empty();

        // 產生新撲克牌
        var poker = []
        for (let i = 0; i < 52; i++) {
            poker.push(i)
        }

        // 洗牌
        for (let i = 0; i < 100; i++) {
            // 隨機抽第 r 張，和第一張交換
            let r = rand(0, 51)
            let temp = poker[r]
            poker[r] = poker[0]
            poker[0] = temp
        }

        // 發牌
        for (let i = 0; i < 5; i++) {
            newPoker(poker[i])
        }
    })
})
```

###### tags: `前端程式設計` `108-1`