javascript トランプを作成する

作成日 2022.08.24
javascript
javascript

javascriptで、トランプを作成するサンプルコードを記述してます。

1. 環境
2. トランプを作成する
3. サンプルコード

環境

OS windows11 home
ブラウザ chrome 104.0.5112.101

Javascript サンプル集はこちら

トランプを作成する

トランプに使用されるマークと数字を、まずは配列で用意して、それをオブジェクトとしてマージするとトランプを作成することができます。

const mark = ["♠", "♦", "♣", "♥"];

const num = [ "A",  "2",  "3",  "4",  "5",  "6",  "7",  "8",  "9",  "10",  "J",  "Q",  "K",];

let result = [];

// トランプを作成
for (let i = 0; i < mark.length; i++) {
    for (let j = 0; j < num.length; j++) {
        let card = { num: num[j], mark: mark[i] };
        result.push(card);
    }
}

console.log(result)

実行結果

シャッフルして、指定した枚数を配ることも可能です。ここでは5枚配ってます。

const mark = ["♠", "♦", "♣", "♥"];

const num = [ "A",  "2",  "3",  "4",  "5",  "6",  "7",  "8",  "9",  "10",  "J",  "Q",  "K",];

let result = [];

// トランプを作成
for (let i = 0; i < mark.length; i++) {
    for (let j = 0; j < num.length; j++) {
        let card = { num: num[j], mark: mark[i] };
        result.push(card);
    }
}

// シャッフル
for (let i = result.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * i);
    let temp = result[i];
    result[i] = result[j];
    result[j] = temp;
}

// 5枚取得
for (let i = 0; i < 5; i++) {
    console.log(`${result[i].mark}${result[i].num}`)
}

実行結果

サンプルコード

以下は、実行ボタンをクリックすると、シャッフルしてカードを5枚表示するサンプルコードとなります。

※cssには「Material Design for Bootstrap」を使用してます。関数はアロー関数を使用してます。

アロー関数の使い方

document.getElementByIdの省略して記述する

${}(テンプレートリテラル)の使い方

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container text-center w-50" style="margin-top:200px">

    <h2><span id="result" class="badge bg-warning">実行結果</span></h2>

    <div class="row mx-auto">
      <div class="col">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title" id="one"></h5>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title" id="two"></h5>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title" id="three"></h5>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title" id="four"></h5>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title" id="five"></h5>
          </div>
        </div>
      </div>
    </div>

    <button id="btn" class="btn btn-dark btn-rounded mt-1">実行</button>

  </div>

  <script>

    const mark = ["♠", "♦", "♣", "♥"];

    const num = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K",];

    let result = [];

    // トランプを作成
    for (let i = 0; i < mark.length; i++) {
      for (let j = 0; j < num.length; j++) {
        let card = { num: num[j], mark: mark[i] };
        result.push(card);
      }
    }

    btn.onclick = () => {

      // シャッフル
      for (let i = result.length - 1; i > 0; i--) {
        let j = Math.floor(Math.random() * i);
        let temp = result[i];
        result[i] = result[j];
        result[j] = temp;
      }

      // 5枚取得
      one.textContent = `${result[0].mark}${result[0].num}`
      two.textContent = `${result[1].mark}${result[1].num}`
      three.textContent = `${result[2].mark}${result[2].num}`
      four.textContent = `${result[3].mark}${result[3].num}`
      five.textContent = `${result[4].mark}${result[4].num}`

    }

  </script>
</body>

</html>

取得されていることが確認できます。