JavaScript Example--Teach you how to implement the poker card shuffling function_javascript skills

We usually sort out the randomly drawn cards in order from smallest to largest (I remember when I was a kid, I couldn’t catch two decks of cards). This essay is just to get familiar with this function. Related knowledge such as sorting arrays in js.

Knowledge points used:

1. Create objects in factory mode

2.js array sort() method

Copy code The code is as follows:

var testArr = [1, 3, 4, 2] ;
testArr.sort(function (a,b) {
return a - b;
})
alert(testArr.toString());//1,2,3,4
testArr.sort(function (a, b) {
return b- a;
})
alert(testArr.toString());//4,3,2,1

3.js-Math.radom() random number

Math.random();//0-1 The obtained random number is greater than or equal to 0 and less than 1

4.js Array splice usage

Copy code The code is as follows:

//The first parameter is the starting position of insertion
//The second parameter is the number of elements to be deleted from the starting position
//The third parameter is the element to be inserted from the starting position
//Example
var testArr = [1, 3, 4, 2];
testArr.splice(1, 0, 8);
alert(testArr.toString());//1,8,3,4,2

var testArr1 = [1, 3, 4, 2];
testArr1.splice(1, 1, 8);
alert(testArr1.toString());//1,8,3, 4,2

5.js array shift usage

Copy code The code is as follows:

// Take out the first element in the array and return it, the array Delete the first element
//Example
var testArr = [1, 3, 4, 2];
var k= testArr.shift();
alert(testArr.toString()) ;//3,4,2
alert(k);//1

With these basic knowledge, we can start playing cards. Assume that one person draws the cards. The hole card is random. Every time we draw a card, we must insert it into the cards in our hand to ensure the order. From childhood to adulthood!

Step 1: First we have to write a method to produce playing card objects:

Copy code The code is as follows:

/*Factory mode creates various cards
* number:The number on the card
*type:The suit of the card
*/
var Cards = (function () {
var Card = function (number, type) {
this.number = number;
this.type = type;
}
return function (number, type) {
return new Card(number, type);
}
})()

Step 2: Create playing cards, shuffle and store

Copy code The code is as follows:

var RadomCards = [];//Random card storage array
var MyCards = [];//Storage drawn cards


//Suit 0-Spade 1-Club 2-Diamond 3-Heart 4-Big Ghost 5-Little Ghost
//Numbers 0-13 represent ghosts, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, J ,Q,K;
function CreateCompeleteCard() {
var index = 2;
var arr = [];
for (var i = 0; i <= 13; i ) {
If (i == 0) {
arr[0] = new Cards(i, 4);
arr[1] = new Cards(i, 5);
} else {
for (var j = 0; j <= 3; j ) {
arr[index] = new Cards(i, j);
index ;
}
                                                                                           
RadomCards = SortCards(arr);
Show();//Display the current card on the page
}
//Shuffle the cards
function SortCards(arr) {
arr .sort(function (a, b) {
             return 0.5 - Math.random();
Step 3: Start drawing cards. When drawing cards, we must first determine the insertion position, and then insert the new cards into the designated position to form a new neat sequence

Copy code

The code is as follows:

//How to draw cards
function GetCards(CardObj) {
var k = InCardsIndex(MyCards, CardObj);//Consider the insertion position
MyCards.splice(k, 0 , CardObj); // Insert to form a new sequence
}
/*[Get the position where the card should be inserted]
*arr: The card currently in hand
*obj: The newly drawn card
*/
function InCardsIndex(arr, obj) {
var len = arr && arr.length || 0;
if (len == 0) {
return 0;
                                                                                                                                          Return 0;
}
} else {
var backi = -1;
for (var i = 0; i < len; i ) {

if (obj. number <= arr [i].number) {
                                                                                                            if (backi == -1) {
                                                                                         
                                                                                                                                                                              
Okay! Use the button on the html to start to draw cards, and click one card at a time! and show it





Copy code


The code is as follows:

function Start() {//How to draw cards, once Touch one "No more" ; lenNew = MyCards.length;

var html = "";

var html = "";

lenNew for (var i = 0; i < lenOld; i ) {

var html = "

< ;b>" RadomCards[i].type "-

" RadomCards[i].number "

";

}< ;div class='pai new'>" MyCards[i].type "-

" MyCards[i].number "";       }         document.getElementById("new").innerHTML=html;                                                                                            

Upload html and css code

Copy code The code is as follows: