Comentário: A função principal percebe que os dois cartões abertos serão eliminados se emparelhados, caso contrário, os dois cartões retornarão para as costas. Abaixo está uma descrição dos requisitos e códigos de amostra. Amigos interessados podem aprender.
As duas cartas abertas serão eliminadas se emparelhadas, caso contrário, as duas cartas retornarão para as costas.
Análise de requisitos
Como desenhar a face positiva da face e o cartão traseiro e como eliminar a face do cartão após o bem -sucedido emparelhamento
Como gerar um baralho e determinar a posição de cada carta e a imagem correspondente
Como embaralhar
Como gravar as informações de emparelhamento do baralho
Como determinar se o evento de clique é o primeiro clique ou o segundo clique
Manuseio de incidentes de trapaça: clique na mesma carta duas vezes para clicar na face do cartão eliminada e clique na área fora da face do cartão.
Depois que o cartão está ligado, você precisa dar ao jogador um certo tempo para ver claramente como obter uma pausa.
A resposta ao evento de clique do mouse e obtenha as coordenadas da posição de clique do mouse para determinar qual cartão é clicado
MyCode:
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta charset = "utf-8" />
<title> Teste </ititure>
<script type = "text/javascript">
var ctx;
Var Canvas;
cartão var;
var primeiro_pick = true; // A primeira bandeira de clique
var primeiro_card = -1;
var secundário;
var back_color = "rgb (255,0,0)"; // a cor na parte de trás do cartão
var table_color = "#fff";
var deck = []; //observação
var primeiro_x = 10;
var primeiro_y = 50;
margem var = 30;
var Card_width = 50;
var Card_Height = 50;
Var pares = [
["1_a.jpg", "1_b.jpg"],
["2_a.jpg", "2_b.jpg"],
["3_a.jpg", "3_b.jpg"],
["4_a.jpg", "4_b.jpg"],
["5_a.jpg", "5_b.jpg"]
];
function draw_back () // desenhe a parte traseira do cartão
{
ctx.fillstyle = back_color;
ctx.fillRect (this.sx, this.sy, this.swidth, this.Sheight);
}
Cartão de função (SX, SY, Swidth, Sheight, IMG, Info) // Construtor
{
this.sx = sx;
this.sy = sy;
this.swidth = swidth;
this.sHeight = chuveiro;
this.info = info;
this.img = img;
this.draw = draw_back;
}
função make_deck () // gerar deck e desenhar
{
var i;
var a_card;
var b_card;
var a_pic;
var b_pic;
var cx = primeiro_x;
var cy = primeiro_y;
para (i = 0; i <pares.length; i ++)
{
a_pic = nova imagem ();
a_pic.src = pares [i] [0];
a_card = novo cartão (cx, cy, card_width, card_height, a_pic, i);
deck.push (a_card);
b_pic = nova imagem ();
b_pic.src = pares [i] [1];
b_card = novo cartão (cx, cy + card_height + margem, card_width, card_height, b_pic, i);
deck.push (b_card);
cx = cx + card_width + margem; //observação
a_card.draw ();
b_card.draw ();
}
}
função shuffle () // feche
{
var i;
var j;
var temp_info;
var temp_img;
var deck_length = deck.length;
var k;
para (k = 0; k <3 * deck_length; k ++)
{
i = math.floor (math.random () * deck_length);
j = math.floor (math.random () * deck_length);
temp_info = deck [i] .info;
temp_img = deck [i] .img;
deck [i] .info = deck [j] .info;
deck [i] .img = deck [j] .img;
deck [j] .info = temp_info;
deck [j] .img = temp_img;
}
}
Função Escolha (EV)
{
// var out;
var mx;
var my;
// var pick1;
// var pick2;
var i;
//observação
if (ev.layerx || ev.layerx == 0) {// firefox
mx = ev.layerx;
my = ev.layery;
} else if (ev.offsetx || ev.offsetx == 0) {// Opera
mx = ev.offsetx;
my = ev.offsety;
}
para (i = 0; i <deck.length; i ++)
{
cartão = deck [i];
if (card.sx> = 0) // o cartão não foi eliminado
{
// julga qual cartão é clicado
if (mx> card.sx && mx <card.sx + card.swidth && my> card.sy && my <card.sy + card.sheight)
{
se (i! = primeiro_card) // se você clicar na mesma carta duas vezes, nenhum processamento será feito
quebrar;
}
}
}
if (i <deck.length)
{
se (First_pick) // se for a primeira vez que clique
{
primeiro_card = i;
primeiro_pick = false; //observação
ctx.drawimage (card.img, card.sx, card.sy, card.swidth, card.sheight);
}
outro
{
primeiro_pick = true; //observação
segundo_card = i;
ctx.drawimage (card.img, card.sx, card.sy, card.swidth, card.sheight);
tid = setTimeout (flip_back, 1000);
}
}
}
função flip_back ()
{
if (card.info == deck [primeiro_card] .info) // emparelhamento com sucesso
{
ctx.fillstyle = tabela_color;
ctx.fillrect (deck [primeiro_card] .sx, deck [primeiro_card] .sy, deck [primeiro_card] .swidth, deck [primeiro_card] .sheight);
ctx.FillRect (Deck [Second_Card] .sx, Deck [Second_Card] .sy, Deck [Second_Card] .Swidth, Deck [Second_Card] .Sheight);
deck [primeiro_card] .sx = -1;
deck [segundo_card] .sy = -1;
primeiro_card = -1;
}
outro
{
deck [primeiro_card] .draw ();
Deck [Second_Card] .Draw ();
primeiro_card = -1;
}
}
função init ()
{
canvas = document.getElementById ('Canvas');
canvas.addeventListener ('clique', escolha, false);
ctx = Canvas.getContext ('2D');
make_deck ();
shuffle ();
}
</script>
</head>
<Body>
<Canvas/>
123142
</body>
</html>