Nous trierons généralement les cartes touchées au hasard dans l'ordre de petit à grand (je me souviens quand j'étais enfant, le joueur n'a pas pu attraper les deux ponts de cartes). Cet essai est de réaliser cette fonction pour vous familiariser avec la connaissance pertinente du tri des tableaux en JS et d'autres choses.
Utilisez des points de connaissance:
1. Créer des objets en usine
2.Js Array Sort () Méthode
La copie de code est la suivante:
var testarr = [1, 3, 4, 2];
Testarr.sort (fonction (a, b) {
retourner a - b;
})
alert (Testarr.ToString ()); // 1,2,3,4
Testarr.sort (fonction (a, b) {
retour b- a;
})
alert (Testarr.ToString ()); // 4,3,2,1
3.js-Math.radom () Nombre aléatoire
Math.random (); // 0-1 Le nombre aléatoire obtenu est supérieur ou égal à 0 et inférieur à 1
4.js Utilisation d'épissage du tableau
La copie de code est la suivante:
// Le premier paramètre est la position de début de l'insertion
// Le deuxième paramètre est le nombre d'éléments qui sont supprimés de la position de départ
// Le troisième paramètre est l'élément qui commence à être inséré en position de départ
//exemple
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 Utilisation du changement de table
La copie de code est la suivante:
// Renvoie le premier élément du tableau et supprimez le premier élément du tableau.
//exemple
var testarr = [1, 3, 4, 2];
var k = testarr.shift ();
alert (Testarr.ToString ()); // 3,4,2
alerte (k); // 1
Avec ces connaissances de base, nous pouvons commencer à jouer aux cartes. Supposons qu'une personne touche les cartes, la carte Trump est aléatoire. Chaque fois que nous dessinons une carte, nous devons l'insérer dans la carte dans notre main, en nous assurant que la commande est de petite à grande!
Étape 1: Nous devons d'abord écrire une méthode pour produire des objets de carte à jouer:
La copie de code est la suivante:
/ * Créer diverses cartes en mode d'usine
* Numéro: le numéro sur la carte
* Type: la couleur de la carte
* /
var cartes = (function () {
var card = fonction (nombre, type) {
this.number = nombre;
this.type = type;
}
fonction return (nombre, type) {
retourner la nouvelle carte (numéro, type);
}
}) ()
Étape 2: Créez des cartes à jouer, mélangez-les et stockez-les
La copie de code est la suivante:
var radomcards = []; // tableau de stockage de cartes aléatoires
var mycards = []; // stockage les cartes que vous avez touchées
// Couleur de fleur 0-Spad 1-Plum Blossom 2 cours 3-Hart 4-BIG Ghost 5-Little Ghost
// La valeur 0-13 représente Ghost, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, J, Q, K;
fonction CreatCompeleTecard () {
var index = 2;
var arr = [];
pour (var i = 0; i <= 13; i ++) {
if (i == 0) {
arr [0] = nouvelles cartes (i, 4);
arr [1] = nouvelles cartes (i, 5);
} autre {
pour (var j = 0; j <= 3; j ++) {
arr [index] = nouvelles cartes (i, j);
index ++;
}
}
}
RadomCards = sortcards (arr);
Show (); // afficher la carte actuelle sur la page
}
// Arrête les cartes
fonction sortcards (arr) {
arr.sort (fonction (a, b) {
retour 0,5 - math.random ();
})
retour arr;
}
Étape 3: Commencez à toucher les cartes. Lorsque vous touchez des cartes, nous devons d'abord déterminer la position d'insertion, puis insérer la nouvelle carte dans la position spécifiée pour former un nouvel ordre soigné.
La copie de code est la suivante:
// Comment toucher la carte
fonction getcards (cardoBj) {
var k = incardesIndex (mycards, cardoBj); // Considérez la position d'insertion
Mycards.splice (k, 0, cardoBj); // insérer pour former une nouvelle commande
}
/ * 【Obtenez la position où la carte doit être insérée】
* Arr: la carte actuelle dans votre main
* Obj: la carte nouvellement touchée
* /
fonction incardesIndex (arr, obj) {
var len = arr && arr.length || 0;
if (len == 0) {
retour 0;
} else if (len == 1) {
if (obj.number> = arr [0] .number) {
retour 1;
} autre {
retour 0;
}
} autre {
var backi = -1;
pour (var i = 0; i <len; i ++) {
if (obj.number <= arr [i] .number) {
backi = i;
casser;
}
}
if (backi == -1) {
backi = len;
}
Retour Backi;
}
}
D'ACCORD! Commencez à travers le bouton du bouton du HTML pour toucher la carte, cliquez et appuyez sur une carte à la fois! Et le montrer
La copie de code est la suivante:
fonction start () {// comment toucher les cartes, toucher une à la fois
if (radomcards.length> 0) {
Getcards (radomcards.shift ());
Montrer();
} autre {
alerte ("non");
}
}
// Cette méthode Show est utilisée pour afficher le mouvement actuel de la carte sur la page
fonction show () {
var lenold = radomcards.length;
var Lennew = mycards.length;
var html = "";
pour (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 = "";
pour (var i = 0; i <Lennew; i ++) {
html + = "<div class = 'Pai new'> <b>" + mycards [i] .type + "</b> - <div class = 'nu'>" + mycards [i] .number + "</v> </div>";
}
document.getElementById ("new"). innerHtml = html;
}
Code sur HTML et CSS
La copie de code est la suivante:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<style type = "text / css">
.boom{
Largeur: 50px;
hauteur: 50px;
Border: solide 1px rouge;
Position: absolue;
En haut: 5px;
Gauche: 5px;
}
.pai
{
Largeur: 50px;
hauteur: 100px;
Border: solide 1px rouge;
marge-gauche: 3px;
flottant: à gauche;
}
.nouveau
{
Border: Solide 1px bleu;
}
.nu
{
Texte-aligne: Centre;
taille de police: 24px;
marge: 25px;
}
</ style>
</ head>
<body>
<! - <div> </div> ->
<input type = "Button" value = "start" onclick = "CreatCompeleTecard ()" />
<entrée type = "bouton" value = "Appuyez sur la carte" onclick = "start ()" />
<br/>
Carte de titre: <div id = "old"> </div>
<div style = "Clear: les deux"> </div>
<hr />
La carte que j'ai touchée: <div id = "new"> </div>
</docy>
</html>