[JavaScript]トランプゲーム(戦争)を作る-基本編-

JavaScriptにてトランプゲームの戦争を作成したいと思います。

トランプゲームの戦争を知らない方もいると思いますので、簡単にルール説明をします。

ルール説明

① AからKまでの13枚をシャッフルし裏向きのまま重ねて山札を作る。
② 掛け声とともに山札の上から1枚めくり表向きにして場に出す。
③ 最も強いトランプを出した人が場にあるトランプをすべてとる。

【補足】
　・A→K→Q→J→10→…→3→2の順に強い。
　・マークは関係ない。

ルール説明を見ると分かるかと思いますが、完全に運任せのゲームとなります。
ルールも簡単なため、子供から大人まで楽しめるゲームかと思います。

ただ、上記のルールで作成しても運ゲームとなりすぐに飽きると思いますので
今回は自身の山札を公開しシャッフル機能も追加してみました。
これで少しは戦術的な要素もプラスすることができるのではないでしょうか。

構造はシンプルでHTMLとJavaScriptで動作します。
実装処理は配列作成やシャッフル処理、比較処理などを利用しており、
JavaScriptの習い始めに適した内容かと思います。

処理の流れ

① プレイヤーの山札を作成する
【Shuffleボタンを押下時】
② プレイヤーの山札（配列）をシャッフルする
【warボタンを押下時】
② 結果用の配列を初期化する
③ CPUの山札を作成する
④ 配列の格納数だけfor文を回し勝ち負け判定
⑤ 結果用の配列に格納する
⑥ 各勝利数をカウントアップする
⑦ 結果を表示する

各処理内容については、ソース内にコメントを追記しております。

トランプゲーム(戦争)のソースコード

<button id="shuffle" onClick="all_shuffle()">shuffle</button>
<button id="war" onClick="war()">war</button>
<p>Player:<span id="p_card"></span></p>
<p>CPU:<span id="c_card"></span></p>
<p>結果：<span id="result"></span></p>

// 配列シャッフル用
const shuffle = ([...array]) => {
  for (let i = array.length - 1; i >= 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

// 各種初期値作成
const array = [13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
let p_array = [];
let p_win = 0;
let c_array = [];
let c_win = 0;
let result = [];

// 初回実行
all_shuffle();

function all_shuffle(){
  // プレイヤーの手札を作成し表示
  p_array = shuffle(array);
  document.getElementById("p_card").innerHTML = p_array;
  // CPUの手札表示を初期化
  document.getElementById("c_card").innerHTML = "";
}

function war(){
  // 結果配列を初期化
  result = [];

  // CPUの手札を作成し表示
  c_array = shuffle(array);
  document.getElementById("c_card").innerHTML = c_array;

  for (let i = 0; i < array.length; i++) {
    // 1判定
    if (p_array[i] == 1 && c_array[i] != 1) {
      result.push("o");
      p_win++;
    } else if (p_array[i] != 1 && c_array[i] == 1) {
      result.push("x");
      c_win++;
    } else {
      if (p_array[i] < c_array[i]) {
        result.push("o");
        p_win++;
      } else if (p_array[i] > c_array[i]) {
        result.push("x");
        c_win++;
      } else {
        result.push("-");
      }
    }
  }
  document.getElementById("result").innerHTML = result;
  if (p_win > c_win) {
    document.getElementById("result").innerHTML += "<br>プレイヤーの勝ち!!";  
  } else if (p_win < c_win) {
    document.getElementById("result").innerHTML += "<br>プレイヤーの負け...";
  } else {
    document.getElementById("result").innerHTML += "<br>引き分け";
  }
}