JavaScript 練習 - 骰子遊戲

Demo

JavaScript 練習 - Rolling Dice Game - Demo

1. Introduction 介紹

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

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

功能

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

<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" />

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");
}

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

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。

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

lastDice = dice;

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

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

使用 ternary operator 及 toggle 切換玩家

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";
}

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

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

預設勝利分數是 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;
}

重新開始遊戲

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