주석 : 주요 기능은 쌍을 이루면 열린 두 카드가 제거 될 것이라는 것을 알고 있습니다. 그렇지 않으면 두 카드가 뒷면으로 돌아갑니다. 아래는 요구 사항 및 샘플 코드에 대한 설명입니다. 관심있는 친구들은 그것을 배울 수 있습니다.
열린 두 카드는 쌍을 이루면 제거됩니다. 그렇지 않으면 두 카드가 뒷면으로 돌아갑니다.
요구 사항 분석
긍정적 인 카드 얼굴과 뒷 카드 얼굴을 그리는 방법과 성공적인 페어링 후 카드 얼굴을 제거하는 방법
데크를 생성하고 각 카드의 위치와 해당 사진을 결정하는 방법
셔플하는 방법
데크의 페어링 정보를 기록하는 방법
클릭 이벤트가 첫 번째 클릭인지 두 번째 클릭 여부를 결정하는 방법
부정 행위 사고 처리 : 동일한 카드를 두 번 클릭하여 제거 된 카드면을 클릭하고 카드 외부의 영역을 클릭하십시오.
카드가 켜진 후에는 일시 중지를 달성하는 방법을 명확하게 확인하기 위해 플레이어에게 특정 시간을 주어야합니다.
마우스 클릭 이벤트에 대한 응답 및 마우스의 좌표를 클릭하여 클릭 할 카드를 결정합니다.
mycode :
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta charset = "utf-8" />
<title> 테스트 </title>
<script type = "text/javaScript">
var ctx;
var 캔버스;
var 카드;
var first_pick = true; // 첫 번째 클릭 플래그
var first_card = -1;
var second_card;
var back_color = "rgb (255,0,0)"; // 카드 뒷면의 색상
var table_color = "#fff";
var 데크 = []; //메모
var first_x = 10;
var first_y = 50;
var 마진 = 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"]
];
함수 draw_back () // 카드 뒷면을 그립니다
{
ctx.fillstyle = back_color;
ctx.fillRect (this.sx, this.sy, this.swidth, this.sheight);
}
기능 카드 (SX, SY, SWIDTH, SHEIGHT, IMG, Info) // 생성자
{
this.sx = sx;
this.sy = sy;
this.swidth = swidth;
이 .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;
for (i = 0; i <pairs.length; i ++)
{
a_pic = new Image ();
a_pic.src = 쌍 [i] [0];
A_CARD = 새 카드 (CX, CY, Card_Width, Card_Height, A_PIC, I);
Deck.push (a_card);
b_pic = 새로운 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 + 마진; //메모
A_CARD.Draw ();
b_card.draw ();
}
}
함수 shuffle () // 닫기
{
var i;
var J;
var temp_info;
var temp_img;
var deck_length = deck.length;
var k;
for (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 = 데크 [i] .img;
데크 [i] .info = 데크 [j] .info;
데크 [i] .img = 데크 [j] .img;
데크 [j] .info = temp_info;
데크 [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;
}
for (i = 0; i <deck.length; i ++)
{
카드 = 데크 [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 (i <deck.length)
{
if (first_pick) // 처음 인 경우 클릭하십시오
{
First_card = i;
first_pick = false; //메모
ctx.DrawImage (card.img, card.sx, card.sy, card.swidth, card.sheight);
}
또 다른
{
first_pick = true; //메모
second_card = i;
ctx.DrawImage (card.img, card.sx, card.sy, card.swidth, card.sheight);
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] .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);
데크 [first_card] .sx = -1;
데크 [second_card] .sy = -1;
First_card = -1;
}
또 다른
{
데크 [First_Card] .Draw ();
데크 [second_card] .Draw ();
First_card = -1;
}
}
함수 init ()
{
canvas = document.getElementById ( 'canvas');
canvas.addeventListener ( 'Click', 선택, false);
ctx = canvas.getContext ( '2d');
make_deck ();
혼합();
}
</스크립트>
</head>
<body>
<캔버스/>
123142
</body>
</html>