デモページ 卓球得点表 ロジックの作成[JavaScript]

デモページとして、今まで学習してきた内容をもとに、
卓球の得点表のようなものを作成していこうと思います。

## 目次：

- [アプリの内容紹介](#アプリの内容紹介)
- [初期セットアップHTMLファイル](#初期セットアップhtmlファイル)
- [ボタンと得点の連携「JavaScripファイル」](#ボタンと得点の連携javascripファイル)
- [リセットボタンの作成「JavaScriptファイル」](#リセットボタンの作成javascriptファイル)
- [何点先取か「勝利の点数」を決めるセレクトボタンの作成](#何点先取か勝利の点数を決めるセレクトボタンの作成)

## アプリの内容紹介

プレイヤーを２人作ります。

そして、何点先取するかの点数を最初に決めます。

それぞれのプレイヤーの点数を増やしていき、最初に決めた点数に達したら、
勝った方のプレイヤーの得点の色が緑色に、負けた方のプレイヤーの得点の色が赤色に変化します。
また、ゲームが終了したら得点のボタンは無効化され、クリックできなくなります。


そして、リセットボタンだけが押せるようになり、リセットボタンをクリックすると、最初からやり直しができるようになります。

## 初期セットアップ「HTMLファイル」

```html
<body>
    <h1><span id="p1Display">0</span> 対 <span id="p2Display">0</span></h1>
    <button id="p1Button">+1 プレイヤー1</button>
    <button id="p2Button">+1 プレイヤー2</button>
    <button id="reset">リセット</button>

    <script src="app.js"></script>
</body>
```

1. h1を作成。 0対0と出力。
1-1. それぞれの0を後で修正しやすくするために、spanで囲む。
1-2. それぞれのspanに対してidを付加する。
2. buttonを3つ作成。
2-1. idをそれぞれに付与。
3. JavaScriptファイルと接続。

HTML初期セットアップ時：
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3679750/e31046a1-301d-566f-453a-029b90cd3f4f.png width = 60%>

## ボタンと得点の連携「JavaScripファイル」

得点の管理についてまとめていこうと思います。



ロジックの内容を考えてみる。

やりたいことは？
⇨
・ボタンが押された時に、得点が更新されるようにしたい。
・得点が更新されるように、今の得点を保持する必要がある。

#### 点数を追加する：

1. p1Buttonとp2Buttonの取得
2. p1Displayとp2Displayの取得
3. 現在の得点を保持する変数を作成「let p1Score = 0;」「let p2Score = 0;」
4. buttonを押した時のイベント処理を記載
4-1. p1Buttonをクリックしたら、p1Scoreを1追加します。「p2も同様」
4-2. 手に入ったp1Scoreの値を、textContentを使用し、h1の左側のspan「p1Display」に追加します。「p2も同様」


```js
const p1Button = document.querySelector('#p1Button');
const p2Button = document.querySelector('#p2Button');
const p1Display = document.querySelector('#p1Display');
const p2Display = document.querySelector('#p2Display');

let p1Score = 0;
let p2Score = 0;

p1Button.addEventListener('click',function() {
    p1Score += 1;
    p1Display.textContent = p1Score;
}) 

p2Button.addEventListener('click',function() {
    p2Score += 1;
    p2Display.textContent = p2Score;
}) 

```

次にやりたいこととしては、
ゲームの勝つための条件を付加する必要があります。

#### 勝利条件：

1. 勝利条件の点数保持のための変数を作成「let winningScore = 3」
2. 勝利条件のためのロジックを作成
2-1. もし、winningScoreに達していなかったら、p1Scoreの値を追加する。「p2も同様」

```js
let winningScore = 3;

if( p1Score !== winningScore ) {
     p1Score += 1;
     p1Display.textContent = p1Score;
}

if( p2Score !== winningScore ) {
     p2Score += 1;
     p2Display.textContent = p2Score;
}
```

次にやりたいこととしては、
ゲームの終了するための条件を付加する必要があります。

#### ゲームの終了条件：

1. ゲームが終わったかどうかを保持する変数「isGameOver」をfalseとして保持する。
2. isGameOverではない間処理を継続するif文を記載。
2-1. if isGameOverがfalseではない時、得点の追加処理を行う。
2-2. if p1ScoreとwinningScoreの値が同一になったらisGameOverをtrueにする。「p2も同様」

```js
if(!isGameOver) {
        p1Score += 1;
        p1Display.textContent = p1Score;
        if(p1Score === winningScore) {
            isGameOver  = true;
        }    
    }

if(!isGameOver) {
        p2Score += 1;
        p2Display.textContent = p2Score;
        if(p2Score === winningScore) {
            isGameOver  = true;
        }    
    }
```
点数の追加、勝利条件、終了条件を追加：
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3679750/7d00dfaf-72f3-a8f0-0858-e847d66f33c2.png width = 60%>



## リセットボタンの作成「JavaScriptファイル」

```js
const resetButton = document.querySelector('#reset');
```

1. resetButtonの取得
2. resetButtonに対して、クリックイベントを付加します。
2-1. 変数isGameOverをfalseに変更します。
2-2. p1Score、p2scoreを0にします。
2-3. p1Display.textContent、p2Display.textContentを0にする。

## 何点先取か「勝利の点数」を決めるセレクトボタンの作成

#### HTML セレクトボタンの作成

```html
<select name="" id="winningScore">
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
    </select>
```

1. select要素の追加
2. selectのidとして、winningScoreを設定
3. optionを追加。valueを3〜11に設定し、それに付合する値も同一とする

:::note info
セレクトボタンのロジックに関して：

1. selectボタンで設定した値を選択したら、
勝つための勝利条件の値がその設定した値に変化する。

 2. ゲームの途中で、selectボタンで数字の変更をした場合、
 途中の点数表記はリセットされるようにする。

:::

#### 1. selectボタンで設定した値を選択したら、勝つための勝利条件の値がその設定した値に変化する「JavaScript」。
```js
const winningScoreSelect = document.querySelector('#winningScore');

winningScoreSelect.addEventListener('change', function() {
    winningScore = parseInt(this.value);
});

```


1. selectButtonの取得
2. changeイベントの使用

 changeイベントは、登録した要素の値が変更されたときにイベントが発火します。
このchangeイベントを使用し、登録された値（thisのvalue）が(change)変化したときの値を保存します。

また、ここで取得する値はstringになってしまうため、
paeseIntでnumber型に変換を行います。

#### 2. ゲームの途中で、selectボタンで数字の変更をした場合、途中の点数表記はリセットされるようにする「JavaScript」。

1. changeイベントが発生した時に、reset関数を実行するようにする

reset関数の中身をそのまま挿入することも可能ですが、コードの可読性を上げるために別の関数として保存しておきます。

reset関数：　
function reset() {
〜
}

作成したreset関数を、resetBunttonのclickイベントに付加します。
同様に、winnningScoreSelectのcahngeイベントにも付加します。

これで、resetボタンが押された時と、セレクトボタンで勝利の点数を再設定したときに
数字がリセットするように変更できました。

```js
winningScoreSelect.addEventListener('change', function() {
    winningScore = parseInt(this.value);
    reset();
});

resetButton.addEventListener('click', reset )

function reset() {
    isGameOver = false;
    p1Score = 0;
    p2Score = 0;
    p1Display.textContent = 0;
    p2Display.textContent = 0;
};
```