Comentario: La función principal se da cuenta de que las dos cartas que se abren serán eliminadas si se combinan, de lo contrario, las dos cartas volverán a la parte posterior. A continuación se muestra una descripción de los requisitos y códigos de muestra. Los amigos interesados pueden aprenderlo.
Las dos cartas que se abren se eliminarán si se combinan, de lo contrario, las dos cartas volverán a la parte posterior.
Análisis de requisitos
Cómo dibujar la cara positiva de la tarjeta y la carta de la tarjeta trasera y cómo eliminar la cara de la tarjeta después de un emparejamiento exitoso
Cómo generar un mazo y determinar la posición de cada carta y la imagen correspondiente
Cómo barajar
Cómo registrar la información de emparejamiento del mazo
Cómo determinar si el evento de clic es el primer clic o el segundo clic
Manejo de incidentes de trampa: haga clic en la misma tarjeta dos veces para hacer clic en la cara de la tarjeta eliminada y haga clic en el área fuera de la cara de la tarjeta.
Después de encender la tarjeta, debe darle al jugador un cierto tiempo para ver claramente cómo lograr una pausa.
La respuesta al evento de clic del mouse y obtener las coordenadas de la posición del clic del mouse para determinar en qué tarjeta se hace clic
Micóndo:
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta charset = "utf-8" />
<title> test </title>
<script type = "text/javaScript">
var ctx;
Var lienzo;
tarjeta var;
var primero_pick = true; // La primera bandera de clics
var primero_card = -1;
var Second_card;
var back_color = "rgb (255,0,0)"; // El color en la parte posterior de la tarjeta
var table_color = "#fff";
varilla var = []; //nota
var primero_x = 10;
var primero_y = 50;
margen var = 30;
var card_width = 50;
var card_height = 50;
pares var = [
["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"]
];
función draw_back () // Dibuja la parte posterior de la tarjeta
{
ctx.fillstyle = back_color;
ctx.fillrect (this.sx, this.sy, this.swidth, this.sheight);
}
Tarjeta de función (SX, SY, SWIDTH, Sheight, IMG, Info) // Constructor
{
this.sx = sx;
this.sy = sy;
this.swidth = swidth;
this.sheight = ducha;
this.info = info;
this.img = img;
this.draw = draw_back;
}
función make_deck () // Generar mazo y dibujar
{
var i;
var a_card;
var b_card;
var a_pic;
var b_pic;
var cx = first_x;
var cy = first_y;
para (i = 0; i <pars.length; i ++)
{
a_pic = nueva imagen ();
a_pic.src = pars [i] [0];
a_card = nueva tarjeta (cx, cy, card_width, card_height, a_pic, i);
Deck.push (a_card);
b_pic = nueva imagen ();
b_pic.src = pars [i] [1];
b_card = nueva tarjeta (cx, cy + card_height + margin, card_width, card_height, b_pic, i);
Deck.push (b_card);
cx = cx + card_width + margin; //nota
a_card.draw ();
b_card.draw ();
}
}
function shuffle () // sellado
{
var i;
var j;
var temp_info;
var temp_img;
var Deck_Length = Deck.length;
var k;
para (k = 0; k <3 * dick_length; k ++)
{
i = Math.floor (Math.random () * Deck_Length);
j = Math.floor (Math.random () * Deck_Length);
temp_info = mazo [i] .info;
temp_img = mazo [i] .img;
cubierta [i] .info = cubierta [j] .info;
mazo [i] .img = mazo [j] .img;
mazo [j] .info = temp_info;
mazo [j] .img = temp_img;
}
}
Función elige (EV)
{
// var out;
var mx;
var mi;
// var pick1;
// var pick2;
var i;
//nota
if (ev.layerx || ev.layerx == 0) {// Firefox
mx = ev.layerx;
my = ev.layery;
} else if (ev.offsetx || ev.offsetx == 0) {// ópera
mx = ev.offsetx;
my = ev.offsety;
}
para (i = 0; i <deck.length; i ++)
{
card = mazo [i];
if (card.sx> = 0) // La tarjeta no ha sido eliminada
{
// juzga en qué tarjeta se hace clic
if (mx> card.sx && mx <card.sx + card.swidth && my> card.sy && my <card.sy + card.sheight)
{
if (i! = first_card) // Si hace clic en la misma tarjeta dos veces, no se realizará ningún procesamiento
romper;
}
}
}
if (i <deck.length)
{
if (first_pick) // Si es la primera vez que haga clic
{
first_card = i;
primero_pick = falso; //nota
CTX.DrawImage (Card.Img, Card.SX, Card.Sy, Card.Swidth, Card.Sheight);
}
demás
{
primero_pick = true; //nota
segundo_card = i;
CTX.DrawImage (Card.Img, Card.SX, Card.Sy, Card.Swidth, Card.Sheight);
tid = setTimeout (flip_back, 1000);
}
}
}
función flip_back ()
{
if (card.info == mazo [first_card] .info) // emparejamiento correctamente
{
ctx.fillstyle = table_color;
ctx.fillrect (mazo [First_Card] .sx, Deck [First_Card] .Sy, Deck [First_Card] .Swidth, Deck [First_Card] .Sheight);
ctx.fillrect (mazo [Second_Card] .sx, Deck [Second_Card] .Sy, Deck [Second_Card] .swidth, Deck [Second_Card] .Sheight);
mazo [First_Card] .sx = -1;
mazo [Second_Card] .sy = -1;
first_card = -1;
}
demás
{
mazo [First_Card] .Draw ();
mazo [Second_Card] .Draw ();
first_card = -1;
}
}
función init ()
{
Canvas = document.getElementById ('Canvas');
canvas.addeventListener ('hacer clic', elegir, falso);
ctx = canvas.getContext ('2d');
make_deck ();
barajar();
}
</script>
</ablo>
<Body>
<Canvas/>
123142
</body>
</html>