Webサービスを1週間で作ろう ~2日目~

2020/09/08

Webサービスを作ろう 2日目です。
昨日(Webサービスを1週間で作ろう ~1日目~)アイデアを決めたので,早速ゲームの実装に入ります。

とりあえず動く形に持っていこうということで,HTMLとJSだけでゲームの大枠のロジックを実装しました。

恥ずかしいけどソースを晒していくスタイル。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <script type="text/javascript" src="./js/app.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="display_turn"></div>
    <div id="display_count"></div>
    <input id="btn_first_player" type="button" value="カウントをへらす"/>
    <input id="btn_pass" type="button" value="パスする" disabled="disabled"/>
    <input id="btn_second_player" type="button" value="カウントをへらす" disabled="disabled"/>
    <div id="result"></div>
  </body>
</html>

/**
 * DOM構築後に実行する関数の呼び出し
 * DOMと関数の紐付けをする
 */
window.onload = function() {

  // カウントダウンしていく初期値
  let target_value =30;
  // 初期値を表示させる
  let count_display = document.getElementById('display_count');
  count_display.innerHTML = target_value;

  // プレイヤー情報
  let first_player = {
    name: "プレイヤー1",
    count: 0,
  }
  let second_player = {
    name: "プレイヤー2",
    count: 0,
  }

  // 誰のターンか
  let turn = {
    current: first_player
  }

  // HTML要素の取得 & 表示
  let display_turn = document.getElementById('display_turn');
  display_turn.innerHTML = turn.current.name + "の番です";
  let pass_btn = document.getElementById('btn_pass');
  let first_player_btn = document.getElementById('btn_first_player');
  let second_player_btn = document.getElementById('btn_second_player');
  let result = document.getElementById('result');

  // パスボタンを押した時
  pass_btn.onclick = function() {
    turnSwitch(turn.current);
  }

  // プレイヤー1のカウントダウンボタンを押した時
  first_player_btn.onclick = function(){
    threeCount(first_player);
    countDown();
    gameOver();
  }
  // プレイヤー2のカウントダウンボタンを押した時
  second_player_btn.onclick = function(){
    threeCount(second_player);
    countDown();
    gameOver();
  }

  // カウントを減らしていくメソッド
  function countDown() {
    if (target_value === 0) {
      return;
    }
    target_value--;
    count_display.innerHTML = target_value;
  }

  // ゲーム終了を判断するメソッド
  function gameOver() {
    if (target_value === 0) {
      console.log("GAME OVER");
      let message = turn.current.name;
      result.innerHTML = message + "の負けです。";
    }
  }

  // 3回押したらターン交代するメソッド
  function threeCount(player) {
    pass_btn.disabled = false;
    player.count++;
    if (player.count === 3){
      turnSwitch(player);
      player.count = 0;
    }
  }

  // ターン交代するメソッド
  function turnSwitch(currentPlayer) {
    switch (currentPlayer) {
      case first_player:
        turn.current = second_player;
        first_player_btn.disabled = true;
        second_player_btn.disabled = false;
        break;
      case second_player:
        turn.current = first_player;
        first_player_btn.disabled = false;
        second_player_btn.disabled = true;
        break;
    }
    currentPlayer.count = 0;
    pass_btn.disabled = true;
    display_turn.innerHTML = turn.current.name + "の番です";
  }
}

カウントダウンボタン押したときの挙動は共通化できそうですね。
つよつよの方,こういう書き方できるよというのあったら教えて下さい。
Pure JSで書くの久々すぎて全然わかんなくてググりまくりでしたw

まとめ

ひとまずっぽい感じのロジックは完成したので,細かいところ詰めるのと見た目をいい感じにしていきたいです。
短いですけど実際にソースいじってるとブログ書けないですね…
しばらくはこんな感じで動いているところとソースがメインになりそうです。

それではまた明日。

まとめ

関連記事