JavaScript 中的硬幣翻轉模擬器
-
在 JavaScript 中使用
Math.random()模擬硬幣翻轉 - 使用 HTML 和 JavaScript 建立硬幣翻轉模擬器
- 使用 HTML 和 JavaScript 為 X 次建立硬幣翻轉模擬器
- 使用 CSS 動畫、HTML 和 JavaScript 建立硬幣翻轉模擬器
本教程將演示如何使用 JavaScript 和 HTML 製作硬幣翻轉模擬器。還包括基於 CSS 的視覺硬幣翻轉。
在 JavaScript 中使用 Math.random() 模擬硬幣翻轉
內建的 Math.random() 方法可以在 JavaScript 中模擬擲硬幣。它會生成一個介於 0 和 0.99999999 之間的隨機數，因此你可以使用生成的數字來確定它會產生正面還是反面。
翻轉的斷點在 0.50，如下圖：
let number = Math.random();
if (number < 0.5) {
console.log('HEAD');
} else {
console.log('TAIL');
}
當值在 0 和 0.49999999999999999 之間時，結果將是一個尾巴。
使用 HTML 和 JavaScript 建立硬幣翻轉模擬器
你可以使用上面的程式碼製作一個硬幣翻轉模擬器，使用 HTML 按鈕觸發 JavaScript 程式碼並在 div 元素中顯示結果。
首先，在你的 HTML 元素中，建立一個按鈕和一個具有 id 屬性的 div：
<body>
<button id="flp" type="button">Flip the coin</button>
<div id="rslt"></div>
</body>
之後，向按鈕元素新增一個 script 標籤，併為其附加一個事件偵聽器以偵聽點選事件。當按鈕被按下時，JavaScript 將呼叫 fpClick() 函式，如下所示：
<body>
<button id="flp" type="button">Flip the coin</button>
<div id="rslt"></div>
<script>
let button = document.getElementById("flp");
function fpClick() {
}
button.addEventListener("click", fpClick);
</script>
</body>
使用 Math.random() 方法，fpClick() 函式將執行程式碼以模擬擲硬幣。HTML 正文中 div 元素的內容將被設定為結果：
<body>
<button id="flp" type="button">Flip the coin</button>
<div id="rslt"></div>
<script>
let button = document.getElementById("flp");
let result = document.getElementById("rslt");
function fpClick(event) {
let num = Math.random();
if (num < 0.5) {
result.innerHTML = "You got Head";
} else {
result.innerHTML = "You got Tail";
}
}
button.addEventListener("click", fpClick);
</script>
</body>
你可以在此處觀看演示。
你還可以製作一個模擬器，它會根據使用者的輸入翻轉多達 x 次。在下一節中，我們將討論如何做到這一點。
使用 HTML 和 JavaScript 為 X 次建立硬幣翻轉模擬器
你需要建立一個 HTML 輸入元素來接受使用者的輸入，以便根據使用者的需要多次翻轉硬幣：
<body>
<div>
<label for="qt">How many times to fli?</label>
<input type="number" id="qt" min="1" value="1" />
</div>
<button id="flp" type="button">Flip the coin</button>
<div id="rslt"></div>
</body>
然後，更新 fpClick() 函式以獲取輸入標籤的值並使用 for 語句迴圈擲硬幣程式碼。
翻轉的結果必須包含在一個 <p> 標記中並儲存在一個變數中（在下面的示例中命名為 score）。收集完模擬器的所有結果後，將其指定為 div 元素的內容。
檢視 fpClick() 函式的以下程式碼：
let button = document.getElementById('flp');
let result = document.getElementById('rslt');
function fpClick(event) {
let qty = document.getElementById('qt').value;
let score = '';
for (let i = 0; i < qty; i++) {
let num = Math.random();
if (num < 0.5) {
score += '<p>You got Head</p>';
} else {
score += '<p>You got Tail</p>';
}
}
result.innerHTML = score;
}
button.addEventListener('click', fpClick);
你現在將獲得與你在輸入元素中鍵入的數字一樣多的結果。
點選這裡檢視演示。
使用 CSS 動畫、HTML 和 JavaScript 建立硬幣翻轉模擬器
要使用 CSS 製作硬幣翻轉模擬器，你需要使用該語言設定樣式和動畫的三個 div 元素。
首先，在新的 HTML 正文標記中編寫以下程式碼：
<body>
<h1>Click on the coin below to flip</h1>
<div id="coin_side">
<div class="side_head"></div>
<div class="side_tail"></div>
</div>
</body>
三個 div 元件代表瀏覽器中的硬幣，父 div 硬幣用作硬幣頭部和尾部的容器。
接下來，編寫以下 CSS 程式碼來設定硬幣的樣式：
h1 {
text-align: center;
}
#coin {
position: relative;
margin: 0 auto;
width: 100px;
height: 100px;
cursor: pointer;
}
.side {
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
backface-visibility: hidden;
}
.head {
background-color: green;
z-index: 10;
}
.tail {
background-color: blue;
transform: rotateX(-180deg);
}
#coin 樣式將你的視覺硬幣放置在 HTML 頁面的中心，並使其寬和高為 100 畫素。游標也會變成一個指標，表示可以點選。
通過將所有邊的邊框半徑設定為 50%，.side 樣式會將代表硬幣邊的兩個 div 元件變成一個圓形。backface-visibility 屬性被隱藏以防止在旋轉時背面可見。
硬幣的每一面都由頭部和尾部樣式著色。頭部的顏色為黃色，而尾部的顏色為紅色。
head 類的 z-index 屬性設定為 10 以將其置於 tail 類之上。tail 類的 transform: rotateX() 屬性將是 -180deg 以與旋轉動畫對齊。
現在讓我們使用@keyframes 製作 CSS 動畫，因為 div 元素已被設計為視覺硬幣。
@keyframes resultHead {
from {
transform: rotateX(0);
}
to {
transform: rotateX(1800deg);
}
}
@keyframes resultTail {
from {
transform: rotateX(0);
}
to {
transform: rotateX(1980deg);
}
}
該規則將確定動畫的初始條件。上面的程式碼將變換屬性設定為 rotate(0)，確保翻轉總是從可見的頭部開始。
如果翻轉的結果是正面，硬幣將翻轉 1800 度。因為一次翻轉是 360 度，產生了五個翻轉動畫。
當翻轉結果是尾巴時，硬幣會旋轉五次，然後旋轉 180 度以顯示尾巴的一面。這就是為什麼尾部類的 rotateX 值設定為 -180 度的原因。
如果指定了 CSS 動畫規則，你可以使用動畫屬性從 CSS 類中呼叫它們：
.flipHead {
animation: resultHead 2s ease-out forwards;
}
.flipTail {
animation: resultTail 2s ease-out forwards;
}
至此，我們完成了模擬器的 CSS 程式碼。處理翻轉的指令碼是唯一剩下的東西。
將事件監聽器新增到 div id='coin_side' 並從中呼叫 fpClick() 函式以在單擊時翻轉硬幣。fpClick() 函式和之前一樣，將使用 Math.random() 方法來獲取翻轉結果。
將設定硬幣 div 的 className 屬性，而不是將結果傳送到 HTML 元素：
let coin = document.getElementById('coin_side');
coin.addEventListener('click', fpClick);
function fpClick() {
var flipResult = Math.random();
if (flipResult < 0.5) {
coin.className = 'flipHead';
} else {
coin.className = 'flipTail';
}
}
硬幣翻轉模擬器現在可以使用了。
參見演示。
Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.
LinkedIn