# 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 © 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`
Sign in with Wallet
Connect another wallet