How Lucky Are You?

https://ngtrangtee.github.io/JavaScript%20DOM/buoi-9/index.html

IMG File

HTML Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
        <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
        <link type="text/css" rel="stylesheet" href="./css/style.css">
        
        <title>Roll Point</title>
    </head>

    <body>
        <div class="wrapper clearfix">
            <!-- Người chơi 1 -->
            <div class="player-0-panel active">
                <div class="player-name" id="name-0">Player 1</div>
                <div class="player-score" id="score-0">0</div>
                <div class="player-current-box">
                    <div class="player-current-label">Điểm</div>
                    <div class="player-current-score" id="current-0">0</div>
                </div>
            </div>
            
            <!-- Người chơi 2 -->
            <div class="player-1-panel winner">
                <div class="player-name" id="name-1">Winner!</div>
                <div class="player-score" id="score-1">0</div>
                <div class="player-current-box">
                    <div class="player-current-label">Điểm</div>
                    <div class="player-current-score" id="current-1">0</div>
                </div>
            </div>
            
            <!-- Các nút điều khiển game -->
            <button class="btn-new"><i class="ion-ios-plus-outline"></i>Game mới</button>
            <button class="btn-roll"><i class="ion-ios-loop"></i>Lắc xúc xắc</button>
            <button class="btn-hold"><i class="ion-ios-download-outline"></i>Lưu điểm</button>
            
            <!-- Nhập mức điểm -->
            <input type="text" placeholder="Mức điểm" class="final-score">
            
            <!-- Hiển thị xúc xắc -->
            <img src="./img/dice-1.png" alt="Dice" class="dice" id="dice-1">
            <img src="./img/dice-5.png" alt="Dice" class="dice" id="dice-2">
        </div>
    
        <script src="./js/main-part3.js"></script>
    </body>
</html>

CSS Code

.final-score {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 520px;
    color: #555;
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    padding: 10px;
    width: 160px;
    text-transform: uppercase;
}

.final-score:focus {
    outline: none;
}

#dice-1 {
    top: 120px;
}

#dice-2 {
    top: 250px;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

body {
    background-image: url(https://images.unsplash.com/photo-1568832359672-e36cf5d74f54?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
    background-size: cover;
    background-position: center center;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    position: relative;
    height: 100vh;
    color: #555;
}

body::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #696969;
    opacity: .5;
}

.wrapper {
    width: 1000px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.player-0-panel,
.player-1-panel {
    width: 50%;
    float: left;
    height: 600px;
    padding: 100px;
}



/**********************************************
*** PLAYERS
**********************************************/

.player-name {
    font-size: 40px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 100;
    margin-top: 20px;
    margin-bottom: 10px;
    position: relative;
}

.player-score {
    text-align: center;
    font-size: 80px;
    font-weight: 100;
    color: #EB4D4D;
    margin-bottom: 130px;
}

.active {
    background-color: #f7f7f7;
}

.active .player-name {
    font-weight: 300;
}

.active .player-name::after {
    content: "\2022";
    font-size: 47px;
    position: absolute;
    color: #EB4D4D;
    top: -7px;
    right: 10px;
}

.player-current-box {
    background-color: #EB4D4D;
    color: #fff;
    width: 40%;
    margin: 0 auto;
    padding: 12px;
    text-align: center;
}

.player-current-label {
    text-transform: uppercase;
    margin-bottom: 10px;
    font-size: 12px;
    color: #222;
}

.player-current-score {
    font-size: 30px;
}

button {
    position: absolute;
    width: 200px;
    left: 50%;
    transform: translateX(-50%);
    color: #555;
    background: none;
    border: none;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: 300;
    transition: background-color 0.3s, color 0.3s;
}

button:hover {
    font-weight: 600;
}

button:hover i {
    margin-right: 20px;
}

button:focus {
    outline: none;
}

i {
    color: #EB4D4D;
    display: inline-block;
    margin-right: 15px;
    font-size: 32px;
    line-height: 1;
    vertical-align: text-top;
    margin-top: -4px;
    transition: margin 0.3s;
}

.btn-new {
    top: 45px;
}

.btn-roll {
    top: 403px;
}

.btn-hold {
    top: 467px;
}

.dice {
    position: absolute;
    left: 50%;
    top: 178px;
    transform: translateX(-50%);
    height: 100px;
    box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.10);
}

.winner {
    background-color: #f7f7f7;
}

.winner .player-name {
    font-weight: 300;
    color: #EB4D4D;
}

JS Code

// - Part-5 : Lưu trữ điểm người chơi và kiểm tra người thắng cuộc
//     - Update số lượng điểm của người chơi hiện tại (điểm tích trữ qua các lần chơi trước + điểm của lần chơi hiện tại)
//     - Nếu điểm của người chơi >= giá trị kết thúc game : 
//         - Sửa tên người chơi đó thành "Winner"
//         - Add class "winnner" cho người chơi đó
//         - Ẩn 2 con súc sắc
//     - Nếu điểm của người chơi < giá trị kết thúc game => đổi lượt chơi

//---------------------- PART 1 //---------------------
// Truy cập vào 
const dice1 = document.querySelector("#dice-1");
const dice2 = document.querySelector("#dice-2");

const btnRoll = document.querySelector('.btn-roll')
const player1Score = document.querySelector("#score-0");
const player2Score = document.querySelector("#score-1");

const btnHold = document.querySelector(".btn-hold");

const btnNewGame = document.querySelector(".btn-new");

let activePlayer; //// định nghĩa người chơi nào đang được chơi (0-player 1 || 1-player2)
let currentScore //điểm lượt chơi hiện tại

let scores;

let isPlaying //Xem người chơi có tiếp tục được chơi Game hay không
  //true -> được chơi
  //false -> dừng chơi

function init() {
  activePlayer = 0; //cho người chơi 1 chơi trước
  currentScore = 0;
  isPlaying = true;

  scores = {
    0: 0, //đại diện cho người chơi: điểm tích lũy
    1: 0 //đại diện cho người chơi: điểm tích lũy
  }

  // Reset tên
  document.querySelector("#name-0").innerText = "Player 1";
  document.querySelector("#name-1").innerText = "Player 2";

  // Reset điểm
  document.querySelector("#score-0").innerText = 0;
  document.querySelector("#score-1").innerText = 0;

  document.querySelector("#current-0").innerText = 0;
  document.querySelector("#current-1").innerText = 0;

  // Ẩn xúc xắc
  dice1.style.display = "none";
  dice2.style.display = "none";

  // Xóa hết class active và winner
  document
    .querySelector(".player-0-panel")
    .classList.remove("active", "winner");
  document
    .querySelector(".player-1-panel")
    .classList.remove("active", "winner");

  // Thêm class active cho active player
  document
    .querySelector(`.player-${activePlayer}-panel`)
    .classList.add("active");
  
  // set lại nút thành false
      // btnRoll.disabled = false;
      // btnHold.disabled = false;
}

// hiển thị ảnh block, set cái số cho ảnh đó để hiển thị
btnRoll.addEventListener('click', function () {
  if (isPlaying) {
    // Random 2 số num1, num2 từ 1 đến 6
    let num1 = Math.floor(Math.random() * 6) + 1;
    let num2 = Math.floor(Math.random() * 6) + 1;

    // Thay đổi src của ảnh theo num 1 và 2
    dice1.src = `./img/dice-${num1}.png`;
    dice2.src = `./img/dice-${num2}.png`;

    // Hiển thị ảnh lên
    dice1.style.display = "block";
    dice2.style.display = "block";

    // Cập nhật điểm
    // Trường hợp cả 2 số vừa random có giá trị != 1. Lúc này sẽ cộng dồn các giá trị thành điểm của lượt chơi hiện tại của người chơi đó
    // Trường hợp 1 trong hai số = 1, reset điểm bằng 0, đổi người chơi
    if (num1 != 1 && num2 != 1) {
      currentScore += num1 + num2;
      document.querySelector(
        `#current-${activePlayer}`
      ).innerText = currentScore;
    } else {
      nextPlayer(); //đổi người chơi
    }
  }
})

function nextPlayer() {
  // đổi người chơi
  if (activePlayer == 0) {
    activePlayer = 1
  } else {
    activePlayer = 0
  }
    // hoặc viết theo toán tử 3 ngôi: activePlayer = activePlayer == 0 ? 1 : 0
  // Ẩn 2 con xúc sắc
  // dice1.style.display = "none";
  // dice2.style.display = "none";
  
  // Chuyển classActive cho người tiếp theo - Class toggle: nếu có thì thêm vào, không có thì bỏ đi
  document.querySelector('.player-0-panel').classList.toggle('active')
  document.querySelector('.player-1-panel').classList.toggle('active')

  // reset điểm về 0
  currentScore = 0
  document.querySelector(`#current-0`).innerText = 0;
  document.querySelector(`#current-1`).innerText = 0;
}
  

// -------------------PART 5------------------------
// Lưu trữ điểm người chơi và kiểm tra người thắng cuộc
  // ấn vào nút lưu điểm, lấy giá trị điểm hiện tại cộng với giá trị điểm tích lũy
  // so sánh với giá trị mức điểm, nếu lớn hơn hoặc bằng thông báo người thắng cuộc
  // Nếu nhỏ hơn, gọi function nextplayer
btnHold.addEventListener('click', function () {
  if (isPlaying) {
    // cập nhật điểm dựa vào biến activePlayer
    scores[activePlayer] += currentScore;
    document.querySelector(`#score-${activePlayer}`).innerText =
      scores[activePlayer];

    // kiểm tra điểm với điểm mục tiêu
    // Nếu không nhập điểm thì mặc định là 100
    let finalScore = Number(document.querySelector(".final-score").value);

    if (finalScore == 0) {
      finalScore = 50;
    }
    // So sánh với điểm mục tiêu
    // Nếu >= thì tuyên bố người thắng cuộc
    if (scores[activePlayer] >= finalScore) {
      // Người chơi thắng cuộc
      document.querySelector(`#name-${activePlayer}`).innerText = "Winner!";

      // Thêm class Winner
      document
        .querySelector(`.player-${activePlayer}-panel`)
        .classList.add("winner");

      // Ẩn xúc sắc đi
      dice1.style.display = "none";
      dice2.style.dice1 = "none";

      // Khi kết thúc game, không cho ấn vào nút lắc và lưu nữa
      // btnRoll.disabled = true;
      // btnHold.disabled = true;
      isPlaying = false;

      // Còn lại thì đổi người chơi
    } else {
      // đổi người chơi - gọi function nextPlayer ra
      nextPlayer();
    }
  }
});

// Ấn vào nút game mới sẽ gọi ra init function 
btnNewGame.addEventListener('click', function () {
  init();
  console.log('hi')
})

window.onload = init();

Let’s connect!


Trang (Tee) Thao Nguyen