Por lo general, solucionamos las cartas tocadas al azar en orden de pequeña a grande (recuerdo que cuando era un niño, el jugador no podía atrapar ambos mazos de cartas). Este ensayo es realizar esta función para familiarizarse con el conocimiento relevante de clasificar las matrices en JS y otras cosas.
Use puntos de conocimiento:
1. Crear objetos en fábrica
2.js array sort () método
La copia del código es la siguiente:
var tiendor = [1, 3, 4, 2];
tetoR.sort (function (a, b) {
devolver a - b;
})
alerta (tetoR.ToString ()); // 1,2,3,4
tetoR.sort (function (a, b) {
regresar b- a;
})
alerta (tetoR.ToString ()); // 4,3,2,1
3.js-math.radom () número aleatorio
Math.random (); // 0-1 El número aleatorio obtenido es mayor o igual a 0 y menos de 1
4. Uso de empalme de la matriz JS
La copia del código es la siguiente:
// El primer parámetro es la posición de inicio de la inserción
// El segundo parámetro es el número de elementos que se eliminan de la posición inicial
// El tercer parámetro es el elemento que comienza a insertarse en la posición de inicio
//ejemplo
var tiendor = [1, 3, 4, 2];
testararr.splice (1, 0, 8);
alerta (tetoR.ToString ()); // 1,8,3,4,2
var testarr1 = [1, 3, 4, 2];
testararr1.splice (1, 1, 8);
alerta (tetoR1.ToString ()); // 1,8,3,4,2
Uso de turno de matriz 5.JS
La copia del código es la siguiente:
// Devuelve el primer elemento en la matriz y elimina el primer elemento en la matriz.
//ejemplo
var tiendor = [1, 3, 4, 2];
var k = tiendoR.shift ();
alerta (tetoR.ToString ()); // 3,4,2
alerta (k); // 1
Con estos conocimientos básicos, podemos comenzar a jugar a las cartas. Supongamos que una persona toca las cartas, la tarjeta Trump es aleatoria. Cada vez que dibujamos una tarjeta, tenemos que insertarla en la tarjeta en nuestra mano, asegurando que el orden sea de pequeño a grande.
Paso 1: Primero necesitamos escribir un método para producir objetos de tarjetas de juego:
La copia del código es la siguiente:
/*Crear varias tarjetas en modo de fábrica
*Número: el número en la tarjeta
*Tipo: el color de la tarjeta
*/
VAR CARDS = (function () {
var card = function (número, tipo) {
this.number = número;
this.type = type;
}
Función de retorno (número, tipo) {
devolver nueva tarjeta (número, tipo);
}
}) ()
Paso 2: crea cartas de juego, las saguas y guardalas
La copia del código es la siguiente:
var radomCards = []; // matriz de almacenamiento de tarjeta aleatoria
var myCards = []; // Almacene las tarjetas que tocó
// Color de la flor 0-SPAD 1 PLUM BLOSSOM 2-Corriente 3-Heart 4-Big Ghost 5 Little Ghost
// El valor 0-13 representa fantasma, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, j, q, k;
function createCompetecard () {
índice var = 2;
var arr = [];
para (var i = 0; i <= 13; i ++) {
if (i == 0) {
arr [0] = nuevas tarjetas (i, 4);
arr [1] = nuevas tarjetas (i, 5);
} demás {
para (var j = 0; j <= 3; j ++) {
arr [index] = nuevas tarjetas (i, j);
índice ++;
}
}
}
RadomCards = sortCards (arr);
Show (); // show la tarjeta actual en la página
}
// Cierra las tarjetas
función sortcards (arr) {
arr.sort (función (a, b) {
return 0.5 - Math.random ();
})
regresar arr;
}
Paso 3: Empiece a tocar las tarjetas. Al tocar tarjetas, primero debemos determinar la posición de inserción y luego insertar la nueva tarjeta en la posición especificada para formar un nuevo orden ordenado.
La copia del código es la siguiente:
// Cómo tocar la tarjeta
function getCards (cardoBJ) {
var k = incardSindex (MyCards, cardoBj); // Considere la posición de inserción
MyCards.splice (k, 0, cardoBJ); // Insertar para formar un nuevo pedido
}
/*【Obtenga la posición donde se debe insertar la tarjeta】
*arr: la tarjeta actual en tu mano
*OBJ: la tarjeta recién tocada
*/
función incardSindex (arr, obj) {
var len = arr && arr.length || 0;
if (len == 0) {
regresar 0;
} else if (len == 1) {
if (obj.number> = arr [0] .number) {
regresar 1;
} demás {
regresar 0;
}
} demás {
var backi = -1;
para (var i = 0; i <len; i ++) {
if (obj.number <= arr [i] .number) {
backi = i;
romper;
}
}
if (backi == -1) {
backi = len;
}
regresar backi;
}
}
¡DE ACUERDO! ¡Comience a través del botón del botón en el HTML para tocar la tarjeta, haga clic y toque una tarjeta a la vez! Y mostrarlo
La copia del código es la siguiente:
función start () {// Cómo tocar tarjetas, toque una a la vez
if (radomCards.length> 0) {
GetCards (RadomCards.Shift ());
Espectáculo();
} demás {
alerta ("no");
}
}
// Este método de programa se utiliza para mostrar el movimiento de la tarjeta actual en la página
función show () {
var lenold = radomCards.length;
var lennew = myCards.length;
var html = "";
para (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 = "";
para (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 ("nuevo"). InnerHtml = html;
}
Código en HTML y CSS
La copia del código es la siguiente:
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html>
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<style type = "text/css">
.auge{
Ancho: 50px;
Altura: 50px;
borde: sólido 1px rojo;
Posición: Absoluto;
Arriba: 5px;
Izquierda: 5px;
}
.Pai
{
Ancho: 50px;
Altura: 100px;
borde: sólido 1px rojo;
margen-izquierda: 3px;
flotante: izquierda;
}
.nuevo
{
Border: azul sólido 1px;
}
.nu
{
Text-Align: Center;
tamaño de fuente: 24px;
margen-top: 25px;
}
</style>
</ablo>
<Body>
<!-<div> </div>->
<input type = "button" value = "start" onClick = "createCompetecard ()" />
<input type = "button" valor = "toque la tarjeta" onClick = "start ()" />
<br/>
Tarjeta de título: <div id = "Old"> </div>
<div style = "Clear: ambos"> </div>
<hr />
La tarjeta que toqué: <div id = "new"> </div>
</body>
</html>