JavaScript 練習 - 骰子遊戲

Demo

JavaScript 練習 - Rolling Dice Game - Demo

1. Introduction 介紹

這是 Udemy 上的課程的一個小遊戲,操作 click 事件,並搭配判斷式切換玩家,以及新增 class,實現擲骰子遊戲。

  • 以判斷式當擲出 1,則切換玩家,並且此輪不累積分數
  • 當連續擲出 2 個 6 的時候,判定兩方誰目前累積的所有分數歸零
  • 可儲存該輪暫存分數到總分裡
  • 需判定誰達到勝利標準
  • 可由玩家輸入自行決定最後的勝利標準

功能

宣告儲存累積總分、每一輪獲得的分數、該輪玩家、啟動遊戲的變數,並且在載入畫面的時候,就呼叫一個初始化的函數,裡面會將累積總分、每一輪獲得的分數、遊戲啟動狀態、骰子是否顯示、預設玩家…都恢復到初始值。這樣的寫法,可促進程式碼的簡潔度,只要在需要的時候,如展開新遊戲的時候,在該函式內再度呼叫初始化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="player-0-panel active">
<div class="player-name" id="name-0">Player 1</div>
<div class="player-score" id="score-0">43</div>
<div class="player-current-box">
<div class="player-current-label">Current</div>
<div class="player-current-score" id="current-0">11</div>
</div>
</div>
<div class="player-1-panel">
<div class="player-name" id="name-1">Player 2</div>
<div class="player-score" id="score-1">72</div>
<div class="player-current-box">
<div class="player-current-label">Current</div>
<div class="player-current-score" id="current-1">0</div>
</div>
</div>
<button class="btn-new"><i class="ion-ios-plus-outline"></i>New game</button>
<button class="btn-roll"><i class="ion-ios-loop"></i>Roll dice</button>
<button class="btn-hold"><i class="ion-ios-download-outline"></i>Hold</button>

<img src="./dice-5.png" alt=" dice" class="dice" id="dice-1" />

<input type="text" placeholder="Final score" class="final-score" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var scores, roundScore, activePlayer, gamePlaying;
init();

function init() {
scores = [0, 0];
roundScore = 0;
activePlayer = 0;
gamePlaying = true;
document.querySelector(".dice").style.display = "none";
document.getElementById("score-0").textContent = "0";
document.getElementById("score-1").textContent = "0";
document.getElementById("current-0").textContent = "0";
document.getElementById("current-1").textContent = "0";
document.getElementById("name-0").textContent = "Player 1";
document.getElementById("name-1").textContent = "Player 2";
document.querySelector(".player-0-panel").classList.remove("winner");
document.querySelector(".player-1-panel").classList.remove("winner");
document.querySelector(".player-0-panel").classList.remove("active");
document.querySelector(".player-1-panel").classList.remove("active");
document.querySelector(".player-0-panel").classList.add("active");
}

遊戲的進行,主要都是由 ifelse ifelse 來判斷。觸發 click 事件後,先判定遊戲啟動,再產生隨機數字,並且將產生的隨機數字儲存在宣告在判斷式當中的變數裡面,依據儲存的數字,調用要顯示在畫面上的骰子圖案。

1
2
3
4
5
6
7
8
document.querySelector(".btn-roll").addEventListener("click", function() {
if (gamePlaying) {
var dice = Math.floor(Math.random() * 6) + 1;
var diceDOM = document.querySelector(".dice");
diceDOM.style.display = "block";
diceDOM.src = "dice-" + dice + ".png";
}
});

這裡加入兩個遊戲規則:第一個規則、如果連續擲出 2 個 6,則目前累積的總分,以及該輪的暫存分數都歸 0。所以要設定儲存前一個骰子的變數。lastDice

1
2
3
4
5
6
7
if (dice === 6 && lastDice === 6) {
scores[activePlayer] = 0;
document.querySelector("#score-" + activePlayer).textContent = "0";
nextPlayer();
}

lastDice = dice;

第二個規則、如果擲出 1,該輪暫存分數不能計分,會直接跳到下一個玩家。

1
2
3
4
5
6
else if (dice !== 1) {
roundScore += dice;
document.querySelector('#current-' + activePlayer).textContent = roundScore;
}else {
nextPlayer();
}

使用 ternary operator 及 toggle 切換玩家

1
2
3
4
5
6
7
8
9
10
function nextPlayer() {
activePlayer === 0 ? (activePlayer = 1) : (activePlayer = 0);
roundScore = 0;
document.getElementById("current-0").textContent = "0";
document.getElementById("current-1").textContent = "0";

document.querySelector(".player-0-panel").classList.toggle("active");
document.querySelector(".player-1-panel").classList.toggle("active");
document.querySelector(".dice").style.display = "none";
}

玩家可擲無限多次骰子後,再選擇把分數儲存到總分裡面

1
2
3
4
5
6
7
document.querySelector(".btn-hold").addEventListener("click", function() {
if (gamePlaying) {
scores[activePlayer] += roundScore;
document.querySelector("#score-" + activePlayer).textContent =
scores[activePlayer];
}
});

預設勝利分數是 20 分,也可以由玩家自行決定勝利總分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var input = document.querySelector(".final-score").value;
var winningScore;

if (input) {
winningScore = input;
} else {
winningScore = 20;
}

if (scores[activePlayer] >= winningScore) {
document.querySelector("#name-" + activePlayer).textContent = "Winner!";
document.querySelector(".dice").style.display = "none";
document
.querySelector(".player-" + activePlayer + "-panel")
.classList.add("winner");
document
.querySelector(".player-" + activePlayer + "-panel")
.classList.remove("active");
gamePlaying = false;
}

重新開始遊戲

1
document.querySelector(".btn-new").addEventListener("click", init);

Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2019 CYC'S BLOG All Rights Reserved.

UV : | PV :