Pig game project

JavaScriptでpig gameプロジェクトを作成しています.
真面目に習った和弦を見ながら復習しましょう
まずこのように要素を選択しました

const score0El = document.querySelector('#score--0');
const score1El = document.getElementById('score--1');
const current0El = document.getElementById('current--0');
const current1El = document.getElementById('current--1');

const diceEl = document.querySelector('.dice');
const btnNew = document.querySelector('.btn--new');
const btnRoll = document.querySelector('.btn--roll');
const btnHold = document.querySelector('.btn--hold');

それぞれ変数(variable)に格納
その後、私は他の場所で使いやすくなった.

score0El.textContent = 0;
score1El.textContent = 0;
diceEl.classList.add('hidden');

まずスコアテキスト部分を0に設定します.
サイコロのイメージを隠した部分.
css部分でもこのように設定するのを忘れないでください!

.hidden {
  display: none;
}

次に、完全なコードを見てみましょう.
それぞれの部分を再理解しましょう

btnRoll.addEventListener('click', function () {
  //1.Generate a random dice roll
  const dice = Math.trunc(Math.random() * 6) + 1;

  //2.Display dice
  diceEl.classList.remove('hidden');
  diceEl.src = `dice-${dice}.png`;
  console.log(dice);

  //3.Check for rolled 1: if true
  if (dice !== 1) {
    //Add dice to current score
    //   currentScore = currentScore + dice;
    currentScore += dice;
    current0El.textContent = currentScore; //CHANGE LATER
  } else {
    // switch to next player
  }
});

イベントリスナーをスクロールサイコロボタンに追加します.
サイコロの数字を設定する方法は前回習ったのと同じです.

const dice = Math.trunc(Math.random() * 6) + 1;

これで1から6まで出てきます
そして2番でサイコロを見せてもらい、
そして数字に基づいて保存されたサイコロ画像.
変更しました.どうしよう.このように

  diceEl.classList.remove('hidden');
  diceEl.src = `dice-${dice}.png`;

さっきサイコロのイメージを消して彼を再現させた.
そしてtemplate literalです.
持つイメージ名はdice-1pngはそうなので
バカ海口はさっき設置された.

const dice = Math.trunc(Math.random() * 6) + 1;

この子は数字の変化の部分なので、${}はこのように彼をかばっています!
数字によって画像を変えるのは不思議です><
やっぱり勉強は結果を見ることができて面白かった
次の部分.

if (dice !== 1) {
    //Add dice to current score
    currentScore += dice;
    current0El.textContent = currentScore; //CHANGE LATER
  } else {
    // switch to next player
  }

私たちが決めたルールでサイコロが1なら
次のプレイヤーに切り替えるためです.
サイコロが1じゃなかったら
点数に入れる
まずcurrentScoreを0に設定します.

let currentScore = 0;

このまま.しかし、これは関数を設定するしかありません.
そうでない場合、関数が実行されるたびにスコアが0になるという予期しない状況
起こり得るからだ.そしてfunctionの下に
currentscoreサイコロの数字をつけたのはcurrentstore
currentScore = currentScore + dice;
これは簡単に表現できます

currentScore += dice;

あなたはこのような方法で表現することに慣れなければならない.
まだ知らない
そして

current0El.textContent = currentScore;

点数テキスト部分をcurrentScoreに変更!