1-6までの数字を4枚出したいです。

dotinstallを参考にカードゲームを作ろうとしてます。

1-6までの数字を4枚出したいです。

JavaScriptを
card = cards.splice(Math.floor(Math.random() * cards.length), 1)[0];
から
card = cards.splice(Math.floor(Math.random() * 6), 1)[0];
にしてみましたが、0-3枚まで表示されるだけでした。

ソースは、以下です。

html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Soroeru Game</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
    <div id="stage">
      <!-- <div class="card-container">
        <div class="card">
          <div class="card-front">1</div>
          <div class="card-back">?</div>
        </div>
      </div> -->
    </div>
  </div>
  <script src="js/main.js"></script>
</body>
</html>

JavaScript

(function() {
  // function getRandomInt(max) {
  //   return Math.floor(Math.random() * Math.floor(max));
  // }

  // console.log(getRandomInt(3));
// expected output: 0, 1 or 2

  'use strict';

  var pairs = 2;//2*2=4 で4枚生成
  var cards = [];//カード用の空の配列を用意

  function init() {//初期設定?
    var i;//ループカウンタ?
    var card;
    for (i = 1; i <= pairs; i++) {//ペアの枚数分ループを回す?
      cards.push(createCard(i));
      cards.push(createCard(i));
      // document.getElementById('stage').appendChild(createCard(i));
      // document.getElementById('stage').appendChild(createCard(i));
    }
    while (cards.length) {//良くわからないのがここ
      card = cards.splice(Math.floor(Math.random() * cards.length), 1)[0];//// TODO: spliceを調べる。
      //Array.prototype.splice() - JavaScript | MDN
      //https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
      //"返値
      //取り除かれた要素を含む配列です。"
      document.getElementById('stage').appendChild(card);
    }
  }

  function createCard(num) {
    var container;
    var card;
    var inner;
    inner = '<div class="card-front">' + num + '</div><div class="card-back">?</div>';
    card = document.createElement('div');
    card.innerHTML = inner;
    card.className = 'card';
    card.addEventListener('click', function() {
      card.className = 'card open';
    });
    container = document.createElement('div');
    container.className = 'card-container';
    container.appendChild(card);
    return container;
  }

  init();
})();

css

body {
  background: #3498db;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
}

.container {
  width: 240px;
  margin: 20px auto;
}

#stage {
  display: flex;
  flex-wrap: wrap;
}

.card-container {
  perspective: 100px;
  width: 50px;
  height: 70px;
  margin: 5px;
}

.card {
  cursor: pointer;
  width: 100%;
  height: 100%;
  transition: 0.8s;
  position: relative;
  transform-style: preserve-3d;
}

.card-front,
.card-back {
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 70px;
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
}

.card-back {
  background: #f1c40f;
  color: #fff;
}

.card-front {
  background: #fff;
  color: #f1c40f;
  transform: rotateY(180deg);
}

.card.open {
  transform: rotateY(180deg);
}

参考

#09 カードの数字をランダムにしよう | JavaScriptで神経衰弱を作ろう - プログラミングならドットインストール

行動規範の内容に同意します

回答1件

こんにちは

ご質問の要件としては、

1以上6以下の自然数が書かれたカードが6枚ある。１枚のカードには一つの数字しか書かれておらず、かつ、6枚のうちのどの２つにも同じ数は書かれていない。そのような6枚のカードから４枚をランダムに取り出し、一列に並べた順列を作りたい。

ということと解釈しました。以下、この解釈にもとづく回答です。（解釈が間違っていたら、コメントからお知らせください）

ある配列の要素をランダムに入れ換えることを、シャッフル（shuffle)するといいますが、シャッフルを使って、以下の手順(1)〜(4)によって、ランダムに選ばれた４枚を配列として得ることができます。

(1) 与えられた配列をシャッフルする関数（あるいはメソッド）shuffle()を作っておく。

(2) 要素として、1から6までを含む配列 [1, 2, 3, 4, 5, 6] を作る。

(3) 上記(2) で作った配列に、(1)で作った shuffle() を適用して、シャッフルされた配列を作る。
????これによって例えば、[5, 2, 1, 3, 6, 4] のような配列が得られる。

(4) 上記(3) で得られた配列の先頭４個による配列を作る。

以下、上記の手順 (1) 〜 (4) を実装していきます。

まず (1) のシャッフルする関数なりメソッドですが、既出の質問でもいくつか投稿されているテーマです。

上記も参考にしつつ、シャッフルのアルゴリズムとしてよく使われるのは、フィッシャー–イェーツのシャッフルなので、これを具体的なコードにしたものを探すと、記事でも動画でもたくさんあります。その中で、この回答では以下の動画

youtube: Fisher-Yates Shuffle Modern Algorithm JavaScript Programming Tutorial

で説明されている、Arrayのメソッドとしてshuffleを実装するコードを拝借することにします。（この動画を選んだのは、動画前半の、カードを使ったアルゴリズムの実演が分かりやすいからです）

javascript
1// ???? https://youtu.be/tLxBwSL3lPQ?t=540
2Array.prototype.shuffle = function() {
3  var i = this.length, j, temp;
4  while(--i > 0) {
5    j = Math.floor(Math.random() * (i+1));
6    temp = this[j];
7    this[j] = this[i];
8    this[i] = temp;
9  }
10  return this;
11}

次の、

(2) 要素として、1から6までを含む配列を作る。

は、const NUMBERS_SIZE = 6; としておいて、以下で得られます。

javascript
1[...Array(NUMBERS_SIZE)].map((_e, i) => i+1)　　// => [1, 2, 3, 4, 5, 6]

次に、

(3) 上記 (2) で作った配列に、(1)で作った shuffle() を適用して、シャッフルされた配列を作る。

(4) 上記 (3) で得られた配列の先頭４個による配列を作る。

についてですが、 (1)のshuffle()を、Arrayを返すArrayのメソッドとして作ったので、(3)と(4)含む全体をメソッドチェーンとして、以下のように書けます。

javascript
1const NUMBERS_SIZE = 6;
2const SAMPLING_SIZE = 4;
3
4const result = [...Array(NUMBERS_SIZE)]
5                 .map((_e, i) => i+1)
6                 .shuffle()
7                 .slice(0, SAMPLING_SIZE);
8
9console.log(result);  // => e.g. [3, 4, 1, 5]

動作確認用サンプル： codepen.io/jun68ykt/pen/bGpmPGO

補足

配列やオブジェクトの操作で便利なライブラリ、lodash の _.sampleSize を使うと、以下のように、シャッフルする関数やメソッドを用意する必要がなく、手みじかに書けます。

javascript
1const NUMBERS_SIZE = 6;
2const SAMPLING_SIZE = 4;
3
4const result = _.sampleSize(
5                 [...Array(NUMBERS_SIZE)].map((_e, i) => i+1),
6                 SAMPLING_SIZE
7               );
8
9console.log(result);  // => e.g. [3, 4, 1, 5]