HTML5 메모리 플립 게임 구현 아이디어 및 code_html5 튜토리얼 기술

뒤집힌 2장의 카드가 일치하면 제거되고, 일치하지 않을 경우 2장의 카드는 뒷면으로 반환됩니다.

요구사항 분석

앞면과 뒷면 카드 뽑는 방법 및 매칭 성공 후 카드 제거 방법
덱 생성 방법 및 각 카드 결정 방법 카드의 위치와 해당 그림

카드 섞는 방법
덱의 페어링 정보 기록 방법
클릭 이벤트가 첫 번째 클릭인지 두 번째 클릭인지 확인하는 방법

치팅 이벤트 처리: 동일한 카드를 두 번 클릭합니다. 카드 바깥쪽 영역을 클릭합니다.
카드를 뒤집은 후 일정 시간을 기다려야 합니다. 플레이어가 일시 정지를 달성하는 방법

마우스 클릭 이벤트에 응답하고 마우스 클릭 위치의 좌표를 얻어 어떤 카드가 클릭되었는지 확인

MYCode:

코드 복사

코드는 다음과 같습니다.

;
<제목>테스트
var ctx;
var 카드; var first_pick = true; //첫 번째 클릭의 부호
var second_card
var back_color = "rgb(255,0,0)"; 카드 뒷면
var table_color = "#FFF";
var Deck = []; //참고
var first_x =
var first_y = 50; 30;
var 카드 너비 = 50;
var 카드 높이 = 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);
}
function Card(sx, sy, swidth, sheight, img, info)//생성자
{
this. sx = sx;
this.sy = sy;
this.sheight =
this.img = img; 🎜>this.draw = draw_back ;
}
function make_deck()//덱 생성 및 그리기
{
var i
var a_card
var a_pic;
var b_pic;
var cx = first_x;
var cy = first_y
for (i = 0; i < pair.length; i )
🎜>a_pic = new Image() ;
a_pic.src = pair[i][0];
a_card = new Card(cx, cy, 카드_폭, 카드_높이, a_pic, i); push(a_card);
b_pic = new Image();
b_pic.src = pair[i][1]
b_card = new Card(cx, cy 카드 높이 margin, 카드 너비, 카드 높이, b_pic, i);
deck.push(b_card);
cx 카드 너비 마진; //참고
a_card.draw()
}
함수 shuffle() //셔플
{
var i;
var j
var temp_img;
var Deck_length; 🎜>var k;
for (k = 0; k < 3 * 데크_길이; k )
{
i = Math.floor(Math.random() * 데크_길이)
j = Math.floor(Math.random () * 데크_길이);
temp_info = 데크[i].info;
temp_img = 데크[i].img
데크[i].info = 데크[j ].info;
데크[i].img = 데크[j].img;
deck[j].info = temp_info;
deck[j].img = temp_img; 🎜>}
function choose(ev)
{
//var out
var mx
var my
//var pick2; ;
var i;
//note
if (ev.layerX || ev.layerX == 0) { // Firefox
mx = ev.layerX
my = ev. layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // 오페라
mx = ev.offsetX;
my = ev.offsetY; for (i = 0; i < Deck.length; i )
{
card = Deck[i]
if (card.sx >= 0)//카드가 제거되지 않았습니다.
{
// 클릭된 카드 확인
if (mx >card.sx && mx card.sy &&my {
if (i != first_card)//동일한 카드를 두 번 클릭하면 처리되지 않습니다.
break
}
}
}
if ( i
{
if (first_pick)//첫 번째 클릭인 경우
{
first_card = i
first_pick = false; ctx.drawImage(카드 .img, 카드.sx, 카드.sy, 카드.swidth, 카드.sheight)
}
else
{
first_pick = //참고
second_card = i
ctx.drawImage(card.img,card.sx,card.sy,card.swidth,card.sheight)
tid=setTimeout(flip_back,1000)
}
}
function Flip_back()
{
if (card.info == Deck[first_card].info)//페어링 성공
{
ctx.fillStyle = table_color ;
ctx .fillRect(데크[first_card].sx, 데크[first_card].sy, 데크[first_card].swidth, 데크[first_card].sheight)
ctx.fillRect(deck[second_card].sx , 데크[second_card] .sy, 데크[second_card].swidth,
deck[first_card].sx =
deck[second_card].sy = -1; 🎜>first_card=- 1
}
else
{
deck[first_card].draw()
deck[second_card].draw()
first_card=-1 ;
}
}
function init()
{
canvas = document.getElementById('canvas')
canvas.addEventListener('click', choose, false);
ctx = canvas.getContext('2d');
shuffle()
}
>

123142

< /html>