Kommentar: Die Hauptfunktion erkennt, dass die beiden geöffneten Karten, wenn sie geöffnet werden, beseitigt werden, wenn sie gepaart werden. Andernfalls kehren die beiden Karten nach hinten zurück. Im Folgenden finden Sie eine Beschreibung der Anforderungen und Stichprobencodes. Interessierte Freunde können es lernen.
Die beiden geöffneten Karten werden beseitigt, wenn sie gepaart werden. Andernfalls kehren die beiden Karten nach hinten zurück.
Anforderungsanalyse
Wie zeichnet man das positive Kartengesicht und das Rückgesicht der Rückseite und wie man das Kartengesicht nach erfolgreicher Paarung beseitigt
So generieren Sie ein Deck und bestimmen die Position jeder Karte und des entsprechenden Bildes
Wie man mischt
So erfassen Sie die Paarungsinformationen des Decks
So bestimmen Sie, ob das Klickereignis der erste Klick oder das zweite Klick ist
Handhabung von Betrugsvorfällen: Klicken Sie zweimal auf dieselbe Karte, um auf das Gesicht der Beseitigung zu klicken und auf den Bereich außerhalb des Kartenfeldes zu klicken.
Nachdem die Karte eingeschaltet ist, müssen Sie dem Spieler eine bestimmte Zeit geben, um klar zu sehen, wie er eine Pause erzielt.
Die Antwort auf das Mausklickereignis und die Koordinaten der Mausklickposition erhalten, um zu bestimmen, auf welcher Karte geklickt wird
Mycode:
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta charset = "utf-8" />
<title> test </title>
<script type = "text/javaScript">
var ctx;
var canvas;
var Karte;
var first_pick = true; // Das erste Klick -Flag
var first_card = -1;
var Second_card;
var back_color = "RGB (255,0,0)"; // die Farbe auf der Rückseite der Karte
var table_color = "#fff";
var deck = []; //Notiz
var first_x = 10;
var first_y = 50;
var margin = 30;
var card_width = 50;
var card_height = 50;
var pairs = [
["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"]
];
Funktion draw_back () // Zeichnen Sie die Rückseite der Karte
{
ctx.FillStyle = back_color;
ctx.fillRect (this.sx, this.sy, this.width, this.sheight);
}
Funktionskarte (SX, Sy, Swidth, Sheight, IMG, Info) // Konstruktor
{
this.sx = sx;
this.sy = sy;
this.width = swidth;
this.sheight = dusch;
this.info = info;
this.img = img;
this.draw = draw_back;
}
Funktion make_Deck () // Deck erzeugen und zeichnen
{
var i;
var a_card;
var b_card;
var a_pic;
var b_pic;
var cx = first_x;
var cy = first_y;
für (i = 0; i <pairs.length; i ++)
{
a_pic = new Image ();
a_pic.src = pairs [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 = pairs [i] [1];
B_CARD = NEUE KARTE (CX, CY + CARD_HEIGHT + MARGIN, CARD_WIDTH, CARD_HELT, B_PIC, I);
Deck.push (b_card);
cx = cx + card_width + margin; //Notiz
a_card.draw ();
b_card.draw ();
}
}
Funktion shuffle () // schließen
{
var i;
var j;
var temp_info;
var temp_img;
var Dek_Length = Deck.length;
var k;
für (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;
}
}
Funktion wählen (ev)
{
// var out;
var mx;
var mein;
// var pick1;
// var pick2;
var i;
//Notiz
if (ev.layerx || ev.layerx == 0) {// Firefox
mx = ev.layerx;
mein = ev.layery;
} else if (ev.offsetx || ev.offsetx == 0) {// Opera
mx = ev.offsetx;
mein = ev.offsety;
}
für (i = 0; i <Deck.length; i ++)
{
Karte = Deck [i];
if (card.sx> = 0) // Die Karte wurde nicht beseitigt
{
// beurteilen, auf welche Karte geklickt wird
if (mx> card.sx && mx <card.sx + card.swidth && my> card.sy && my <card.sy + card.sheight)
{
if (i! = First_card) // Wenn Sie zweimal auf dieselbe Karte klicken, wird keine Verarbeitung durchgeführt
brechen;
}
}
}
if (i <Deck.length)
{
if (first_pick) // Wenn es sich um das erste Mal handelt, klicken Sie auf
{
First_card = i;
First_pick = false; //Notiz
ctx.drawimage (card.img, card.sx, card.sy, card.swidth, card.sheight);
}
anders
{
First_pick = true; //Notiz
Second_card = i;
ctx.drawimage (card.img, card.sx, card.sy, card.swidth, card.sheight);
Tid = setTimeout (Flip_back, 1000);
}
}
}
Funktion Flip_back ()
{
if (card.info == Deck [First_card] .info) // erfolgreiches Paarung
{
Ctx.FillStyle = table_color;
Ctx.FillRect (Deck [First_card] .sx, Deck [First_Card] .Sy, Deck [First_Card] .Swidth, Deck [First_Card] .Sheight);
Ctx.FillRect (Deck [Second_card] .sx, Deck [Second_card] .Sy, Deck [Second_card] .Swidth, Deck [Second_Card] .Sheight);
Deck [First_card] .sx = -1;
Deck [Second_card] .Sy = -1;
First_card = -1;
}
anders
{
Deck [First_card] .Draw ();
Deck [Second_card] .Draw ();
First_card = -1;
}
}
Funktion init ()
{
canvas = document.getElementById ('canvas');
Canvas.AdDeVentListener ('klicken', wählen, false);
ctx = canvas.getContext ('2d');
make_deck ();
Shuffle();
}
</script>
</head>
<body>
<Canvas/>
123142
</body>
</html>