Javascript example -- How to shuffle cards _ javascript tips-js tutorial

We usually sort the random cards from small to large in order (I remember I couldn't catch either of them when I was a child ), this article aims to familiarize yourself with the sorting array and other related knowledge in js by implementing this function. We usually sort the random cards from small to large in order (I remember I couldn't catch either of them when I was a child ), this article aims to familiarize yourself with the sorting array and other related knowledge in js by implementing this function.

Knowledge points used:

1. Create objects in factory Mode

2. js array sort () method

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-;
})
Alert (testArr. toString (); // 4,3, 2,1

3. js-Math.radom () Random Number

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

4. js array splice usage

The Code is as follows:

// The first parameter is the start position of the insert operation.
// The second parameter is the number of elements deleted from the starting position.
// The third parameter is the element inserted at 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

The Code is as follows:

// Retrieve the first element from the array and return it. Delete the first element from the array.
// 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. If a card is touched by a person, the card is random. Every time we touch a card, we need to put it into the card, ensure the order is from small to large!

Step 1: first, we need to write a method for producing poker objects:

The Code is as follows:

/* Create various cards in factory Mode
* Number: number on the card
* Type: Card color
*/
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, shuffling, and storage

The Code is as follows:

Var RadomCards = []; // random card storage array
Var MyCards = []; // stores the touch card


// Color 0-black peach 1-plum blossom 2-square 3-red peach 4-big ghost 5-little devil
// Value 0-13 indicates ghost, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, J, Q, K;
Function CreatCompeleteCard (){
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
}
// Shuffling
Function SortCards (arr ){
Arr. sort (function (a, B ){
Return 0.5-Math. random ();
})
Return arr;
}

Step 3: Start to touch the card. When we touch the card, we first need to judge the position of the card, and then insert the new card to the specified position to form a new neat order.

The Code is as follows:

// Method
Function GetCards (CardObj ){
Var k = InCardsIndex (MyCards, CardObj); // consider the insert position
MyCards. splice (k, 0, CardObj); // insert to form a new sequence
}
/* [Obtain the position where the card should be inserted]
* Arr: Current card
* Obj: New card
*/
Function InCardsIndex (arr, obj ){
Var len = arr & arr. length | 0;
If (len = 0 ){
Return 0;
} Else if (len = 1 ){
If (obj. number> = arr [0]. number ){
Return 1;
} Else {
Return 0;
}
} Else {
Var backi =-1;
For (var I = 0; I <len; I ++ ){

If (obj. number <= arr [I]. number ){
Backi = I;
Break;
}
}
If (backi =-1 ){
Backi = len;
}
Return backi;
}
}

Okay! Use the button on the html to Start and touch a card at a time! And displayed

The Code is as follows:

Function Start () {// touch a card
If (RadomCards. length> 0 ){
GetCards (RadomCards. shift ());
Show ();
} Else {
Alert ("no ");
}
}
// This show method is used to show the current trend of the card on the page.
Function Show (){
Var lenOld = RadomCards. length;
Var lenNew = MyCards. length;
Var html = "";
For (var I = 0; I <lenOld; I ++ ){
Html + ="

"+ RadomCards [I]. type +"-

"+ RadomCards [I]. number +"

";
}
Document. getElementById ("old"). innerHTML = html;
Html = "";
For (var I = 0; I <lenNew; I ++ ){
Html + ="

"+ MyCards [I]. type +"-

"+ MyCards [I]. number +"

";
}
Document. getElementById ("new"). innerHTML = html;
}

Html and css code

The Code is as follows:

License plate:

Card I found: