Normalmente, resolvemos as cartas tocadas aleatoriamente em ordem de pequena a grande (lembro -me de quando eu era criança, o jogador não conseguiu pegar os dois decks de cartas). Este ensaio é realizar essa função para se familiarizar com o conhecimento relevante de classificar matrizes em JS e outras coisas.
Use pontos de conhecimento:
1. Crie objetos na fábrica
2.JS Matriz Sort () Método
A cópia do código é a seguinte:
var testarr = [1, 3, 4, 2];
testarr.sort (função (a, b) {
retornar a - b;
})
alerta (testarr.toString ()); // 1,2,3,4
testarr.sort (função (a, b) {
retornar b- a;
})
alerta (testarr.toString ()); // 4,3,2,1
3.js-math.radom () Número aleatório
Math.Random (); // 0-1 O número aleatório obtido é maior ou igual a 0 e menor que 1
4.js Array Uso em emenda
A cópia do código é a seguinte:
// O primeiro parâmetro é a posição inicial da inserção
// O segundo parâmetro é o número de elementos que são excluídos da posição inicial
// O terceiro parâmetro é o elemento que começa a ser inserido na posição inicial
//exemplo
var testarr = [1, 3, 4, 2];
testarr.splice (1, 0, 8);
alerta (testarr.toString ()); // 1,8,3,4,2
var testarr1 = [1, 3, 4, 2];
testarr1.splice (1, 1, 8);
alerta (testarr1.toString ()); // 1,8,3,4,2
5.js Matriz Shift Uso
A cópia do código é a seguinte:
// retorna o primeiro elemento da matriz e exclua o primeiro elemento na matriz.
//exemplo
var testarr = [1, 3, 4, 2];
var k = testarr.shift ();
alerta (testarr.toString ()); // 3,4,2
alerta (k); // 1
Com esses conhecimentos básicos, podemos começar a jogar cartas. Suponha que uma pessoa toque as cartas, o cartão Trump é aleatório. Toda vez que desenhamos uma carta, temos que inseri -la no cartão em nossas mãos, garantindo que a ordem seja de pequena a grande!
Etapa 1: Primeiro, precisamos escrever um método para produzir objetos de cartão de jogo:
A cópia do código é a seguinte:
/*Crie vários cartões no modo de fábrica
*Número: o número no cartão
*Tipo: a cor do cartão
*/
Var Cards = (function () {
var cartão = função (número, tipo) {
this.Number = número;
this.type = type;
}
Função de retorno (número, tipo) {
retornar novo cartão (número, tipo);
}
}) ()
Etapa 2: Crie cartas de jogo, embaralhá -las e armazená -las
A cópia do código é a seguinte:
var radomcards = []; // Matriz de armazenamento de cartões aleatórios
var myCards = []; // armazenar os cartões que você tocou
// Cor da flor de 0 spad 1-plum flores
// O valor 0-13 representa fantasmas, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, j, q, k;
função CreativCompeleTecard () {
var índice = 2;
var arr = [];
for (var i = 0; i <= 13; i ++) {
if (i == 0) {
arr [0] = novos cartões (i, 4);
arr [1] = novos cartões (i, 5);
} outro {
for (var j = 0; j <= 3; j ++) {
arr [index] = novos cartões (i, j);
índice ++;
}
}
}
Radomcards = SortCards (arr);
Show (); // mostra o cartão atual na página
}
// feche os cartões
Função SortCards (arr) {
Arr.sort (função (a, b) {
retornar 0,5 - Math.Random ();
})
retornar arr;
}
Etapa 3: comece a tocar em cartas. Ao tocar em cartões, devemos primeiro determinar a posição de inserção e, em seguida, inserir o novo cartão na posição especificada para formar uma nova ordem arrumada.
A cópia do código é a seguinte:
// Como tocar o cartão
função getcards (cardobj) {
var k = incardsindex (mycards, cardobj); // considere a posição de inserção
MyCards.splice (K, 0, cardobj); // Insira para formar um novo pedido
}
/*【Obtenha a posição onde o cartão deve ser inserido】
*arr: o cartão atual em sua mão
*Obj: o cartão recém -tocado
*/
função
var len = arr && arr.length || 0;
if (len == 0) {
retornar 0;
} else if (len == 1) {
if (obj.number> = arr [0] .Number) {
retornar 1;
} outro {
retornar 0;
}
} outro {
var backi = -1;
for (var i = 0; i <len; i ++) {
if (obj.number <= arr [i] .Number) {
backi = i;
quebrar;
}
}
if (backi == -1) {
backi = len;
}
retornar backi;
}
}
OK! Comece no botão do botão no HTML para tocar no cartão, clique e toque em um cartão de cada vez! E mostre
A cópia do código é a seguinte:
função start () {// Como tocar em cartões, tocar um de cada vez
if (radomcards.length> 0) {
GetCards (radomcards.shift ());
Mostrar();
} outro {
alerta ("não");
}
}
// Este método de show é usado para mostrar o movimento atual do cartão na página
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 ("antigo"). 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;
}
Código em HTML e CSS
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html>
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<style type = "text/css">
.Boom {
Largura: 50px;
Altura: 50px;
borda: sólido 1px vermelho;
Posição: Absoluto;
topo: 5px;
Esquerda: 5px;
}
.pai
{
Largura: 50px;
Altura: 100px;
borda: sólido 1px vermelho;
margem-esquerda: 3px;
flutuar: esquerda;
}
.novo
{
borda: sólido 1px azul;
}
.nu
{
Alinhamento de texto: centro;
Size da fonte: 24px;
Margin-top: 25px;
}
</style>
</head>
<Body>
<!-<div> </div>->
<input type = "button" value = "start" onclick = "CreatCompeleTecard ()" />
<input type = "button" value = "toque o cartão" onclick = "start ()" />
<br/>
Cartão de título: <div id = "antigo"> </div>
<div style = "claro: ambos"> </div>
<hr />
O cartão que toquei: <div id = "new"> </div>
</body>
</html>