# jQuery應用 - 撲克牌發牌
## poker.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.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- 引用自已定義的CSS -->
<link rel="stylesheet" href="./css/template.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 © 2020 前端程式設計 by kChen
</footer>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" 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;
}
```
## math.js
```javascript=
/**
* 自已設計的數學函式庫
* 作者：kChen
* 版本：0.1
*/
/**
* 產生一個從 start 到 end 的整數亂數
* @param {number} start 亂數的啟始數字
* @param {number} end 亂數的結束數字
* @returns {number} 一個從 start 到 end 的整數亂數
*/
var RandomInt = (start, end) => {
// 計算放大的倍數
let n = end - start + 1
// 放大
r = Math.random() * n
// 無條件捨去
r = Math.floor(r)
// 位移到 start
r = r + start
return r
}
```
## poker.js
* 產生一張牌
```javascript=
$(() => {
$('#main').on('click', () => {
// 隨機產生一個1到52的數字
let r = RandomInt(1, 52)
// 產生 img 的 jQuery 物件在變數 $img
$img = $('<img>').attr('src', './poker/pic' + r + '.png')
// 產生 div 的 jQuery 物件在變數 $div
$div = $('<div>').addClass('col').addClass('poker')
// 將 $img 插入到 $div 內
$div.append($img)
// 將 $div 插入到網頁 id=data 的html element 裡面
$('#data').append($div)
})
})
```
* 發五張不同的牌
```javascript=
var newPoker = (r) => {
// 產生 img 的 jQuery 物件在變數 $img
$img = $('<img>').attr('src', './poker/pic' + (r + 1) + '.png')
// 產生 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 = RandomInt(0, 51)
let temp = poker[r]
poker[r] = poker[0]
poker[0] = temp
}
// 發牌
for (let i = 0; i < 5; i++) {
newPoker(poker[i])
}
})
})
```
* 發五張牌蓋起來的撲克牌，當滑鼠點到後，才翻牌
```javascript=
// 產生撲克牌在網頁上
var newPoker = (r) => {
// 產生 img 的 jQuery 物件在變數 $img
let $img = $('<img>').attr('src', './poker/back.png')
$img.attr('data-poker', r)
$img.attr('data-back', true)
// 當img被按到的時候
$img.on('click', (event) => {
let $poker = $(event.target)
// 判斷目前牌是蓋著還是翻開
if ($poker.attr('data-back') == 'true') {
// 目前牌是蓋著，要執行翻牌動作
let r = $poker.attr('data-poker')
r = Number(r)
$poker.attr('src', './poker/pic' + (r + 1) + '.png')
$poker.attr('data-back', false)
} else {
// 目前牌是打開的，要執行蓋牌的動作
$poker.attr('src', './poker/back.png')
$poker.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 = RandomInt(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-2`
Sign in with Wallet
Connect another wallet