Комментарий: Основная функция понимает, что две открытые карты будут исключены в случае сочетания, в противном случае две карты вернутся в заднюю часть. Ниже приведено описание требований и примеров кодов. Заинтересованные друзья могут узнать это.
Две открытые карты будут устранены, если они будут в сочетании, в противном случае две карты вернутся к задней части.
Анализ требований
Как нарисовать положительную карту лица и заднюю карту и как устранить лицо карты после успешного сочетания
Как генерировать колоду и определить положение каждой карты и соответствующего изображения
Как перетасовать
Как записать информацию о спаривании колоды
Как определить, является ли событие щелчка первым щелчком или вторым щелчком
Обработка инцидентов мошенничества: дважды щелкните одну и ту же карту, чтобы щелкнуть на лицевую карту лицо и нажмите на область за пределами лица карты.
После того, как карта включена, вам нужно дать игроку определенное время, чтобы ясно увидеть, как достичь паузы.
Ответ на событие щелчка мыши и получить координаты позиции щелчка мыши, чтобы определить, какая карта нажимается
Mycode:
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<meta charset = "utf-8" />
<title> тест </title>
<script type = "text/javascript">
var ctx;
вар холст;
var card;
var first_pick = true; // первый флаг щелчка
var first_card = -1;
var second_card;
var back_color = "rgb (255,0,0)"; // цвет на задней части карты
var table_color = "#fff";
var deck = []; //примечание
var First_x = 10;
var first_y = 50;
var margin = 30;
var card_width = 50;
var card_height = 50;
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"]
];
function draw_back () // Нарисуйте заднюю часть карты
{
ctx.fillstyle = back_color;
ctx.fillRect (this.sx, this.sy, this.swidth, this.sheight);
}
Функциональная карта (SX, SY, SWIDTH, SHITE, IMG, Info) // Конструктор
{
this.sx = sx;
this.sy = sy;
this.swidth = swidth;
this.sheight = душ;
this.info = info;
this.img = img;
this.draw = draw_back;
}
функция make_deck () // генерировать палубу и нарисовать
{
var i;
var a_card;
var b_card;
var a_pic;
var b_pic;
var cx = first_x;
var cy = first_y;
для (i = 0; i <pairs.length; i ++)
{
a_pic = новое изображение ();
a_pic.src = пары [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 = пары [i] [1];
b_card = новая карта (cx, cy + card_height + margin, card_width, card_height, b_pic, i);
Deck.push (b_card);
cx = cx + card_width + margin; //примечание
a_card.draw ();
b_card.draw ();
}
}
Функция shuffle () // shut
{
var i;
var J;
var temp_info;
var temp_img;
var deck_length = deck.length;
var k;
для (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;
}
}
Функция выберите (EV)
{
// var out;
var mx;
var my;
// var pick1;
// var pick2;
var i;
//примечание
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;
}
для (i = 0; i <deck.length; i ++)
{
card = deck [i];
if (card.sx> = 0) // карта не была исключена
{
// судить, какую карту нажимается
if (mx> card.sx && mx <card.sx + card.swidth && my> card.sy && my <card.sy + card.sheight)
{
if (i! = First_card) // Если вы дважды нажимаете на одну и ту же карту, обработка не будет сделана
перерыв;
}
}
}
if (я <deck.length)
{
if (first_pick) // Если это первый раз, нажмите
{
first_card = i;
first_pick = false; //примечание
ctx.drawimage (card.img, card.sx, card.sy, card.swidth, card.shight);
}
еще
{
first_pick = true; //примечание
second_card = i;
ctx.drawimage (card.img, card.sx, card.sy, card.swidth, card.shight);
tid = settimeout (flip_back, 1000);
}
}
}
Функция flip_back ()
{
if (card.info == deck [first_card] .info) // Успешное соединение
{
ctx.fillstyle = table_color;
ctx.fillrect (deck [first_card] .sx, deck [first_card] .y, deck [first_card] .swidth, deck [first_card] .shight);
ctx.fillrect (deck [second_card] .sx, deck [second_card] .sy, deck [second_card] .swidth, deck [second_card] .shight);
Deck [first_card] .sx = -1;
Deck [second_card] .y = -1;
first_card = -1;
}
еще
{
Deck [first_card] .draw ();
Deck [second_card] .draw ();
first_card = -1;
}
}
функция init ()
{
canvas = document.getElementbyId ('canvas');
canvas.addeventlistener ('Щелкни, выберите, false);
ctx = canvas.getContext ('2d');
make_deck ();
shuffle ();
}
</script>
</head>
<тело>
<canvas/>
123142
</body>
</html>