配列内入った画像を重複がないようランダムに表示させたい

Question

前提・実現したいこと

javascriptでポーカーゲームを作っています。
クリックをしたら親と子にカードが配られて、
配られたカードから勝敗を判断して、勝ち・負け・引き分けの結果が出力されます。

・やりたいこと
ランダムで親と子にカード画像を表示させることは出来たのですが、
親と子のカードが重複して表示されてしまいます。
下記のコードを生かして、親と子に配られるカードを重複させないようにしたいです。

該当のソースコード

//クリックしたら発火
function start(){

  //トランプを入れる配列
  var club = [];
  var diamond = [];
  var heart = [];
  var spead = [];
  var suit;

　//出力場所
  var p_obj = [];
  var c_obj = [];

	
  for(var j = 0; j < 5; j++){
	  p_obj[j] = document.getElementById("p_hand" + (j + 1));
  
  for(var l = 0; l < 5; l++){
	  c_obj[l] = document.getElementById("c_hand" + (l + 1));
	  
  for(var i = 0; i < 13; i++){
        club[i] = ("img/c" + (i + 1) + ".png");
        diamond[i] = ("img/d" + (i + 1) + ".png");
        heart[i] = ("img/h" + (i + 1) + ".png");
        spead[i] = ("img/s" + (i + 1) + ".png");  
  }
	  
	  
	  suit = club.concat(diamond,heart,spead);
	 

	  var e = Math.floor(Math.random() * suit.length);


	  p_obj[j].src = suit[e];
	  c_obj[l].src = suit[e];
	  
	  
  }
  }
}

Answer 1

• カードは連番のid：52個で管理してください
• シャッフルします
• 頭から5枚を自分、そこから5枚を相手のような処理がよいでしょう

sample

var card=Array(52).fill(null).map((x,y)=>[y,Math.random()]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]);
var me=card.slice(0,5);
var you=card.slice(5,10);
console.log([card,me,you]);

画像url作成

<script>
var card=Array(52).fill(null).map((x,y)=>[y,Math.random()]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]);
var me=card.slice(0,5);
var you=card.slice(5,10);
function getImage(num){
  var path="img/";
  var ext=".png";
  var suit=["c","d","h","s"];
  var num1=parseInt(num/13);
  var num2=num%13+1;
  return path+suit[num1]+num2+ext;
}
var me_card=me.map(x=>getImage(x));
console.log([me,me_card]);
var you_card=you.map(x=>getImage(x));
console.log([you,you_card]);
</script>

Comments

[退会済みユーザー]

ありがとうございます！重複せずにconsole.logに表示が出来ました！
その代わりに画像がエラーになってしまってしまいました…。
お手数をおかけして申し訳ないのですが上記の方法を用いて画像を表示する方法はありますか？

Answer 2

このプログラムを生かすなら、
ランダムで選択後に、既に使われているか都度判定するしかない、でしょうか。

私なら山札用の配列を作り [s01,s02,s03.....s13,h01,h02,....c12,c13,J]等
その配列をシャッフルして[c03,h13,d05,c04,.....]等
後は配列の頭から順番に読んでいく方法にします。

Comments

[torisan]

もう書かれてた……。
ようはyambejpさんと同じ手法です。