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

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

アプリの内容紹介

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

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

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

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

初期セットアップ「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>

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

HTML初期セットアップ時：

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

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

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

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

点数を追加する：

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

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

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

勝利条件：

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

let winningScore = 3;

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

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

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

ゲームの終了条件：

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

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

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

点数の追加、勝利条件、終了条件を追加：

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

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

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

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

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>

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

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

selectボタンで設定した値を選択したら、
勝つための勝利条件の値がその設定した値に変化する。
ゲームの途中で、selectボタンで数字の変更をした場合、
途中の点数表記はリセットされるようにする。

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

const winningScoreSelect = document.querySelector('#winningScore');

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

selectButtonの取得
changeイベントの使用

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

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

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

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

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

reset関数：　
function reset() {
〜
}

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

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

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

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

目次：