We usually sort out the randomly touched cards in order from small to large (I remember when I was a kid, the player couldn't catch both decks of cards). This essay is to realize this function to familiarize yourself with the relevant knowledge of sorting arrays in js and other things.
Use knowledge points:
1. Create objects in factory
2.js array sort() method
The code copy 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 random number obtained is greater than or equal to 0 and less than 1
4.js array splice usage
The code copy is as follows:
//The first parameter is the start position of the insertion
//The second parameter is the number of elements that are deleted from the starting position
//The third parameter is the element that starts to be inserted 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
The code copy is as follows:
//Return the first element in the array, and delete the first element in 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. Suppose that one person touches the cards, the trump card is random. Every time we draw a card, we have to insert it into the card in our hand, ensuring that the order is from small to large!
Step 1: First we need to write a method to produce playing card objects:
The code copy is as follows:
/*Create various cards in factory mode
*number: the number on the card
*type: The color 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 them, and store them
The code copy is as follows:
var RadomCards = [];//Random card storage array
var MyCards = [];//Storage the cards you touched
//Flower color 0-Spad 1-Plum Blossom 2-Current 3-Heart 4-Big Ghost 5-Little Ghost
//The value 0-13 represents 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();//Show the current card on the page
}
//Shut the cards
function SortCards(arr) {
arr.sort(function (a, b) {
return 0.5 - Math.random();
})
return arr;
}
Step 3: Start touching cards. When touching cards, we must first determine the insertion position, and then insert the new card into the specified position to form a new neat order.
The code copy is as follows:
//How to touch the card
function GetCards(CardObj) {
var k = InCardsIndex(MyCards, CardObj);//Consider the insertion position
MyCards.splice(k, 0, CardObj); // Insert to form a new order
}
/*【Get the position where the card should be inserted】
*arr: The current card in your hand
*obj: The newly touched 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;
}
}
OK! Start through the button button on the html to touch the card, click and touch one card at a time! And show it
The code copy is as follows:
function Start() {//How to touch cards, touch one at a time
if (RadomCards.length > 0) {
GetCards(RadomCards.shift());
Show();
} else {
alert("no");
}
}
//This show method is used to show 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].number + "</div></div>";
}
document.getElementById("new").innerHTML=html;
}
Code on html and css
The code copy is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<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>
</head>
<body>
<!-- <div></div>-->
<input type="button" value="start" onclick="CreatCompeleteCard()" />
<input type="button" value="Touch the card" onclick="Start()" />
<br/>
Title card: <div id="old"></div>
<div style="clear: both"></div>
<hr />
The card I touched: <div id="new"></div>
</body>
</html>