Commentaire: La fonction principale se rend compte que les deux cartes ouvertes seront éliminées si elles sont appariées, sinon les deux cartes reviendront à l'arrière. Vous trouverez ci-dessous une description des exigences et des exemples de codes. Les amis intéressés peuvent l'apprendre.
Les deux cartes ouvertes seront éliminées si elles sont appariées, sinon les deux cartes reviendront à l'arrière.
Analyse des exigences
Comment dessiner la face de la carte positive et la face de la carte arrière et comment éliminer la face de la carte après un couplage réussi
Comment générer un deck et déterminer la position de chaque carte et l'image correspondante
Comment secouer
Comment enregistrer les informations de jumelage du jeu
Comment déterminer si l'événement de clic est le premier clic ou le deuxième clic
Gestion des incidents de triche: cliquez deux fois sur la même carte pour cliquer sur la face de la carte éliminée et cliquer sur la zone à l'extérieur de la face de la carte.
Une fois la carte allumée, vous devez donner au joueur un certain temps pour voir clairement comment réaliser une pause.
La réponse à l'événement de clic de souris et obtenez les coordonnées de la position de clic de la souris pour déterminer quelle carte est cliquée
Mycode:
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta charset = "utf-8" />
<Title> Test </Title>
<script type = "text / javascript">
var ctx;
Var Canvas;
carte var;
var first_pick = true; // le premier indicateur de clic
var first_card = -1;
var second_card;
var back_color = "rgb (255,0,0)"; // la couleur au dos de la carte
var table_color = "#fff";
var pont = []; //note
var first_x = 10;
var first_y = 50;
marge var = 30;
var card_width = 50;
var card_height = 50;
var paires = [
["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 () // dessinez le dos de la carte
{
ctx.fillStyle = back_color;
ctx.fillrect (this.sx, this.sy, this.swidth, this.sheight);
}
Carte de fonction (SX, SY, Swidth, Sheight, IMG, Info) // Constructeur
{
this.sx = sx;
this.sy = sy;
this.swidth = swidth;
this.sheight = douche;
this.info = info;
this.img = img;
this.draw = draw_back;
}
fonction make_deck () // générer du deck et dessiner
{
var i;
var a_card;
var b_card;
var a_pic;
var b_pic;
var cx = first_x;
var cy = first_y;
for (i = 0; i <paires.length; i ++)
{
a_pic = new image ();
a_pic.src = paires [i] [0];
a_card = new card (cx, cy, card_width, card_height, a_pic, i);
deck.push (a_card);
b_pic = new image ();
b_pic.src = paires [i] [1];
b_card = new card (cx, cy + card_height + margin, card_width, card_height, b_pic, i);
deck.push (b_card);
cx = cx + card_width + marge; //note
a_card.draw ();
b_card.draw ();
}
}
fonction shuffle () // ferme
{
var i;
var j;
var temp_info;
var temp_img;
var deck_length = deck.length;
var k;
pour (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;
pont [i] .info = deck [j] .info;
pont [i] .img = deck [j] .img;
pont [j] .info = temp_info;
pont [j] .img = temp_img;
}
}
Fonction Choisissez (EV)
{
// var out;
var mx;
var mon;
// var pick1;
// var pick2;
var i;
//note
if (ev.layerx || ev.layerx == 0) {// firefox
mx = ev.layerx;
mon = ev.layery;
} else if (ev.offsetx || ev.offsetx == 0) {// opéra
mx = ev.offsetx;
mon = ev.offsety;
}
pour (i = 0; i <deck.length; i ++)
{
card = deck [i];
if (card.sx> = 0) // La carte n'a pas été éliminée
{
// Jugez quelle carte est cliquée
if (mx> card.sx && mx <card.sx + card.swidth && my> card.sy && my <card.sy + card.sheight)
{
si (i! = first_card) // Si vous cliquez deux fois sur la même carte, aucun traitement ne sera effectué
casser;
}
}
}
if (i <deck.length)
{
if (first_pick) // si c'est la première fois, cliquez
{
first_card = i;
first_pick = false; //note
ctx.Drawimage (card.img, card.sx, card.sy, card.swidth, card.sheight);
}
autre
{
first_pick = true; //note
second_card = i;
ctx.Drawimage (card.img, card.sx, card.sy, card.swidth, card.sheight);
tid = setTimeout (flip_back, 1000);
}
}
}
fonction flip_back ()
{
if (card.info == Deck [first_card] .info) // jumelage avec succès
{
ctx.fillStyle = table_color;
ctx.fillrect (deck [first_card] .sx, pont [first_card] .sy, pont [first_card] .swidth, pont [first_card] .sheight);
ctx.fillrect (deck [second_card] .sx, pont [second_card] .sy, pont [second_card] .swidth, pont [second_card] .sheight);
pont [first_card] .sx = -1;
pont [second_card] .sy = -1;
first_card = -1;
}
autre
{
pont [first_card] .draw ();
pont [second_card] .draw ();
first_card = -1;
}
}
fonction init ()
{
canvas = document.getElementById ('canvas');
canvas.addeventListener ('click', choisissez, false);
ctx = canvas.getContext ('2d');
Make_Deck ();
mélanger();
}
</cript>
</ head>
<body>
<canvas />
123142
</docy>
</html>