【JavaScript】隨機選取一張撲克牌
這個範例主要是示範如何用隨機數取值，隨機存取一張撲克牌。
之後延伸應用可以隨機抽5張牌、13張牌，或者做一個覆蓋在桌面的16張牌(二二配對、隨機放在16個二維的格子上，使用者隨機翻牌，若連續翻到2張花色一樣的，得分…)。
這個範例也能應用到籤詩的選取，例如梅花心易，
下載一組撲克牌圖片：http://acbl.mybigcommerce.com/52-playing-cards/
解開放在images目錄下
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
display: flex;
flex-direction: column;
align-items: center;
}
img {
width: 300px;
}
.button{
border-radius: 20px;
outline: none;
margin: 10px auto;
font-size: 40px;
}
</style>
</head>
<body>
<div id="card">
<img src="imagesblue_back.png">
</div>
<button class="font button" onclick="selectCard();">取卡</button>
<script>
function selectCard(){
var cards1 = ["", "A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
var card_n1 = cards1 [getRandom(1,14)];
var cards2 = ["D", "H", "S", "C"];
var card_n2 = getRandom(0,4);
var card = card_n1 + cards2[card_n2];
console.log( card );
var card_div = document.getElementById("card");
card_div.innerHTML = `<img src='images/${card}.png' alt='Playing Card'>`;
}
function getRandom(min, max) { // min <= x < max, x是整數亂數
return Math.floor(Math.random() * (max - min) ) + min;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
display: flex;
flex-direction: column;
align-items: center;
}
img {
width: 300px;
}
.button{
border-radius: 20px;
outline: none;
margin: 10px auto;
font-size: 40px;
}
</style>
</head>
<body>
<div id="card">
<img src="imagesblue_back.png">
</div>
<button class="font button" onclick="selectCard();">取卡</button>
<script>
function selectCard(){
var cards1 = ["", "A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
var card_n1 = cards1 [getRandom(1,14)];
var cards2 = ["D", "H", "S", "C"];
var card_n2 = getRandom(0,4);
var card = card_n1 + cards2[card_n2];
console.log( card );
var card_div = document.getElementById("card");
card_div.innerHTML = `<img src='images/${card}.png' alt='Playing Card'>`;
}
function getRandom(min, max) { // min <= x < max, x是整數亂數
return Math.floor(Math.random() * (max - min) ) + min;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
display: flex;
flex-direction: column;
align-items: center;
}
img {
width: 300px;
}
.button{
border-radius: 20px;
outline: none;
margin: 10px auto;
font-size: 40px;
}
</style>
</head>
<body>
<div id="card">
<img src="imagesblue_back.png">
</div>
<button class="font button" onclick="selectCard();">取卡</button>
<script>
function selectCard(){
var cards1 = ["", "A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
var card_n1 = cards1 [getRandom(1,14)];
var cards2 = ["D", "H", "S", "C"];
var card_n2 = getRandom(0,4);
var card = card_n1 + cards2[card_n2];
console.log( card );
var card_div = document.getElementById("card");
card_div.innerHTML = `<img src='images/${card}.png' alt='Playing Card'>`;
}
function getRandom(min, max) { // min <= x < max, x是整數亂數
return Math.floor(Math.random() * (max - min) ) + min;
}
</script>
</body>
</html>
以上程式取亂數是基於從下載資源下載下來的撲克牌檔名安排：AD、2D~10D、JD、QD、KD 方塊A~K，前面的是A~K，後面是花色 ：D 方塊、H紅心、S黑桃、C梅花
鏟子(Spade)、紅心(Heart)、鑽石(Diamond)、三葉草(Club)、Jack(侍從)、Queen(王后)、King(國王)、Ace(第一)
