Array / Slice function

JavaScript
1

Im trying to make a working site, where i pull 5 cards out of a deck. If the card is already in the deck, it shouldnt be able to pick it again. There’s also one card, the joker, which shouldnt be pickable. What happens now, i preview it and i pick 5 cards but its like this:
X
X,X
X,X,X
X,X,X,X
X,X,X,X,X
Also i want a button on it, to pull 5 new cards, but they shouldnt be the same cards i pulled before. First i have to pull all 52 cards, until it says there are no cards left.

Problems: My function isnt working, and even though i made this, the joker can still be drawn from the deck. Can someone have a look?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Kaartenverdeler</title>
</head>
		
	
<body>
	<button onclick="pullCards()"> Trek kaarten </button>
	<p id="result"></p>

	<script>
		var cardDeck = ['H1','H2','H3','H4','H5','H6','H7','H8','H9','H10','H11','H12','H13','R1','R2','R3','R4','R5','R6','R7','R8','R9','R10','R11','R12','R13','J','K1','K2','K3','K4','K5','K6','K7','K8','K9','K10','K11','K12','K13','J','S1','S2','S3','S4','S5','S6','S7','S8','S9','S10','S11','S12','S13'];
		var drawnCards = [];

		for(i=1;i<=5;i++){ //In orde
	var randomCards = Math.floor(Math.random()* cardDeck.length); // In orde
	while(drawnCards.includes(cardDeck[randomCards] || cardDeck[randomCards] == "J")){ 
	var randomCards = Math.floor(Math.random()* cardDeck.length);
	}
	drawnCards.push(cardDeck[randomCards]);		 

	result += "<div>"+drawnCards+"</div> ";

	
	document.getElementById('result').innerHTML = result; 

	
	function pullCards(){
		var lastFiveCards = drawnCards.slice(-5);
		var randomCards = Math.floor(Math.random()* cardDeck.length);
		document.getElementById('result').innerHTML = result;
	}


	
	</script>
</body>
</html>
2

Please tell us what the results are that you are getting.

2 Likes
3

All i get as a respond is the Button i made, but it doesnt work.

4

In your post #1, you are missing a ‘}’ character before the
function pullCards()

Also, if you want to not display the Jokers, why put them in the original array?

Alternative logic suggestion:

  1. Randomly shuffle the original array (or copy and shuffle).
  2. Pick the first 5 cards from the shuffled array (repeat until cards are gone)
5

Alternative to consider.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> HTML5 page </title>
</head>
<body>
<button onclick="init()">Randomize</button>
<div id="orig"></div>
<button onclick="doIt()">Deal-5</button>
<pre id="debug"></pre>

<script type="text/javascript">
	var cardDeck = ['H1','H2','H3','H4','H5','H6','H7','H8','H9','H10','H11','H12','H13',
                        'R1','R2','R3','R4','R5','R6','R7','R8','R9','R10','R11','R12','R13', // 'J',
                        'K1','K2','K3','K4','K5','K6','K7','K8','K9','K10','K11','K12','K13', // 'J',
                        'S1','S2','S3','S4','S5','S6','S7','S8','S9','S10','S11','S12','S13'];
	
function shuffle(o) {  // from proArray.js
  for(var j, x, i=o.length; i; j=Math.floor(Math.random() * i), x=o[--i], o[i]=o[j], o[j]=x);  return o; }

Array.prototype.clone=function(){ return this.concat(); } //end clone - Alternative:  aryCopy = [].concat(ary);

function doIt() {
// add logic to test for less than 5 elements to display and re-initialize
 document.getElementById('debug').innerHTML += '<br>'+cards.splice(0,5);
}

function init() {
// show shuffled array
  cards = cardDeck.clone();
  document.getElementById('orig').innerHTML = shuffle(cards).join(' ');
} init();
</script>

</body>
</html>
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.