We are generally in accordance with the order of random touch of the cards from small to large order in the hands of neat (remember as a child card two players can not grasp it), this essay is to realize this function to familiarize with the next JS sort array and other related knowledge.
Use the Knowledge point:
1. Factory Way to create objects
2.js array Sort () method
Copy Code code 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 () The random number obtained by//0-1 is greater than or equal to 0 and less than 1
4.js Array Splice Usage
Copy Code code as follows:
The first argument is the starting position of the insertion
The second argument is the number of elements to delete from the start position
The third parameter is the element to begin inserting at the start 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 code as follows:
Takes the first element in the array to return, and the array deletes 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, assuming that a person to touch the card, the cards are random, we each touch a card when we will put him in the hands of the card, to ensure that the order is from small to large!
The first step: we want to write a way to produce poker objects:
Copy Code code as follows:
/* Factory mode Create all kinds of cards
*number: Numbers on the cards
*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 to new card (number, type);
}
})()
Step two: Create Poker, Shuffle, store
Copy Code code as follows:
var radomcards = [];//random card storage Array
var mycards = [];//store touch cards.
Suit 0-Spades 1-Plum 2-Box 3-Red Peach 4-Big Ghost 5-Imp
The number 0-13 represents ghosts, 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 <= 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
function Sortcards (arr) {
Arr.sort (function (A, b) {
return 0.5-math.random ();
})
return arr;
}
Step three: Start to touch the cards, we first have to judge the insertion position, and then insert the new card to the designated position, forming a new neat order
Copy Code code as follows:
How to touch the cards
function Getcards (cardobj) {
var k = Incardsindex (MyCards, cardobj);//consider Where to insert
Mycards.splice (k, 0, Cardobj); Inserts to form a new order
}
/* "Where to get the card to be inserted"
*arr: The hands of the current card
*obj: A new touch of cards
*/
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;
}
}
All right! Start with the button button on the HTML to touch the card and touch one card at a time. and show it.
Copy Code code as follows:
function Start () {//Touch card method, touch one at a time
if (Radomcards.length > 0) {
Getcards (Radomcards.shift ());
Show ();
} else {
Alert ("No");
}
}
The Show method is used to display the current card movement on the page
Function Show () {
var lenold = radomcards.length;
var lennew = mycards.length;
var html = "";
for (var i = 0; i < Lenold; i++) {
HTML + + "<div class= ' pai ' ><b>" + Radomcards[i].type + "</b>-<div class= ' Nu ' >" + radomcards[i]. Number + "</div></div>";
}
document.getElementById ("old"). innerhtml=html;
html = "";
for (var i = 0; i < lennew; i++) {
html = "<div class= ' pai new ' ><b>" + Mycards[i].type + "</b>-<div class= ' Nu ' >" + Mycards[i].numbe R + "</div></div>";
}
document.getElementById ("new"). innerhtml=html;
}
Code on HTML and CSS
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8"/>
<style type= "Text/css" >
. boom{
width:50px;
height:50px;
Border:solid 1px red;
Position:absolute;
top:5px;
left:5px;
}
. Pai
{
width:50px;
height:100px;
Border:solid 1px red;
margin-left:3px;
Float:left;
}
. New
{
Border:solid 1px Blue;
}
. nu
{
Text-align:center;
font-size:24px;
margin-top:25px;
}
</style>
<body>
<!--<div class= "Boom" ></div>-->
<input type= "button" value= "Start" onclick= "Creatcompeletecard ()"/>
<input type= "button" value= "Touch Card" onclick= "Start ()"/>
<br/>
Card: <div id= "old" ></div>
<div style= "Clear:both" ></div>
I touch the card: <div id= "New" ></div>
</body>
