Normalerweise sortieren wir die zufällig berührten Karten von klein bis groß (ich erinnere mich, als ich ein Kind war, der Spieler konnte nicht beide Kartenspiele fangen). Dieser Aufsatz soll diese Funktion erkennen, um sich mit dem relevanten Wissen aus der Sortierung von Arrays in JS und anderen Dingen vertraut zu machen.
Verwenden Sie Wissenspunkte:
1. Erstellen Sie Objekte in der Fabrik
2.JS -Array Sort () Methode
Die Codekopie lautet wie folgt:
var testarr = [1, 3, 4, 2];
testarr.sort (Funktion (a, b) {
Rückkehr a - b;
})
alert (testarr.tostring ()); // 1,2,3,4
testarr.sort (Funktion (a, b) {
Rückkehr B-A;
})
alert (testarr.tostring ()); // 4,3,2,1
3.js-math.radom () Zufallszahl
Math.random (); // 0-1 Die erhaltene Zufallszahl ist größer als oder gleich 0 und weniger als 1
4. Js Array Spleißverbrauch
Die Codekopie lautet wie folgt:
// Der erste Parameter ist die Startposition der Einfügung
// Der zweite Parameter ist die Anzahl der Elemente, die aus der Startposition gelöscht werden
// Der dritte Parameter ist das Element, das an der Startposition eingefügt wird
//Beispiel
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 -Verschiebungsnutzung
Die Codekopie lautet wie folgt:
// Geben Sie das erste Element im Array zurück und löschen Sie das erste Element im Array.
//Beispiel
var testarr = [1, 3, 4, 2];
var k = testarr.shift ();
Alert (testarr.tostring ()); // 3,4,2
Alarm (k); // 1
Mit diesen Grundkenntnissen können wir mit dem Spielen von Karten beginnen. Angenommen, eine Person berührt die Karten, die Trump -Karte ist zufällig. Jedes Mal, wenn wir eine Karte zeichnen, müssen wir sie in die Karte in unserer Hand einfügen und sicherstellen, dass die Bestellung von klein bis groß ist!
Schritt 1: Zuerst müssen wir eine Methode schreiben, um Kartenobjekte zu erstellen:
Die Codekopie lautet wie folgt:
/*Erstellen Sie verschiedene Karten im Werksmodus
*Nummer: Die Nummer auf der Karte
*Typ: Die Farbe der Karte
*/
var karten = (function () {
var card = function (number, type) {
this.number = number;
this.type = Typ;
}
Rückgabefunktion (Nummer, Typ) {
Neue Karte zurückgeben (Nummer, Typ);
}
}) ())
Schritt 2: Erstellen Sie Spielkarten, mischen Sie sie und speichern Sie sie
Die Codekopie lautet wie folgt:
var radomcards = []; // Zufallskartenspeicherarray
var mycards = []; // Speichern Sie die Karten, die Sie berührt haben
// Blütenfarbe 0-Spad 1-Plum Blossom 2-Strom 3-Heart 4-Big Ghost 5-Little Ghost
// Der Wert 0-13 repräsentiert Ghost, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, J, Q, K;
Funktion erzeugt compelETECARD () {
var index = 2;
var arr = [];
für (var i = 0; i <= 13; i ++) {
if (i == 0) {
arr [0] = neue Karten (i, 4);
arr [1] = neue Karten (i, 5);
} anders {
für (var j = 0; j <= 3; j ++) {
arr [index] = neue Karten (i, j);
Index ++;
}
}
}
Radomcards = Sortcards (arr);
Show (); // Zeigen Sie die aktuelle Karte auf der Seite an
}
// die Karten schließen
Funktionsartcards (arr) {
arr.sort (Funktion (a, b) {
return 0,5 - math.random ();
})
arr zurückgeben;
}
Schritt 3: Kartenfestigen Sie an. Beim Berühren von Karten müssen wir zunächst die Einfügungsposition bestimmen und dann die neue Karte in die angegebene Position einfügen, um eine neue ordentliche Reihenfolge zu bilden.
Die Codekopie lautet wie folgt:
// wie man die Karte berührt
Funktion GetCards (Cardobj) {
var k = Incardssindex (MyCards, Cardobj); // Betrachten Sie die Insertionsposition
MyCards.SPLICE (K, 0, Cardobj); // Einfügen, um eine neue Bestellung zu bilden
}
/*【Holen Sie sich die Position, in der die Karte eingefügt werden soll】
*arr: Die aktuelle Karte in der Hand
*OBJ: Die neu berührte Karte
*/
Funktion Incardssindex (arr, obj) {
var len = arr && arr.length || 0;
if (len == 0) {
Rückkehr 0;
} else if (len == 1) {
if (obj.number> = arr [0] .number) {
Rückkehr 1;
} anders {
Rückkehr 0;
}
} anders {
var backi = -1;
für (var i = 0; i <len; i ++) {
if (obj.number <= arr [i] .number) {
Backi = i;
brechen;
}
}
if (backi == -1) {
backi = len;
}
Rückkehr zurück;
}
}
OK! Starten Sie die Schaltfläche Schaltfläche auf der HTML, um die Karte zu berühren, klicken und berühren Sie jeweils eine Karte! Und zeig es
Die Codekopie lautet wie folgt:
Funktion start () {// So berühren Sie Karten, berühren Sie jeweils eine
if (radomcards.length> 0) {
GetCards (radomcards.shift ());
Zeigen();
} anders {
alarm ("nein");
}
}
// Diese Showmethode wird verwendet, um die aktuelle Kartenbewegung auf der Seite anzuzeigen
Funktion show () {
var lenold = radomcards.length;
var lennew = mycards.length;
var html = "";
für (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 ("alt"). Innerhtml = html;
html = "";
für (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 ("neu"). Innerhtml = html;
}
Code auf HTML und CSS
Die Codekopie lautet wie folgt:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html>
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<style type = "text/css">
.Boom{
Breite: 50px;
Höhe: 50px;
Grenze: Solid 1px rot;
Position: absolut;
Top: 5px;
links: 5px;
}
.pai
{
Breite: 50px;
Höhe: 100px;
Grenze: Solid 1px rot;
Rand-Links: 3px;
float: links;
}
.neu
{
Grenze: solide 1px blau;
}
.nu
{
Text-Align: Mitte;
Schriftgröße: 24px;
Randtop: 25px;
}
</style>
</head>
<body>
<!-<div> </div>->
<input type = "button" value = "start" onclick = "creatCompelmeCard ()" />
<input type = "button" value = "berühren Sie die Karte" onclick = "start ()" />
<br/>
Titelkarte: <div id = "Old"> </div>
<div style = "clear: beide"> </div>
<hr />
Die Karte, die ich berührt habe: <div id = "new"> </div>
</body>
</html>