HTML5 メモリフリップ ゲームの実装アイデアと code_html5 チュートリアルのスキル

裏返した2枚のカードが一致していれば除外され、一致していなければ2枚のカードは裏に戻されます。

要件分析

表と裏のカードを引く方法とマッチング成功後のカードの除去方法
デッキの生成方法と各カードの決定方法カードの位置と対応する絵

カードをシャッフルする方法
デッキの組み合わせ情報を記録する方法
クリック イベントが最初のクリックか 2 回目のクリックかを判断する方法

不正行為の処理: 同じカードを 2 回クリックします。カードの外側の領域をクリックします。
カードが裏返された後、一定の時間を置く必要があります。一時停止を実現する方法

マウス クリック イベントに応答し、マウス クリック位置の座標を取得して、どのカードがクリックされたかを判断します

MYCode:

コードをコピー

コードは次のとおりです:

;

var ctx;
var カード; var first_pick = true; //最初のクリックのサイン
var Second_card; // の色カードの裏面
var table_color = "#FFF";
var Deck = []; //note
var first_y = 50; 30;
var カード幅 = 50;
var カード高さ = 50;
["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"]
];
functiondraw_back()//カードの裏面を描画します
{
ctx.fillStyle = back_color;
ctx.fillRect(this .sx, this.sy, this .swidth, this.sheight);
}
function Card(sx, sy, swidth, height, img, info)//コンストラクター
{
this. sx = sx;
this.swidth = swidth;
this.info = 情報; 🎜>this.draw =draw_back ;
}
function make_deck()//デッキを生成します
var i;
var b_card; 🎜>var a_pic;
var b_pic;
var cx = first_x;
for (i 🎜>a_pic = 新しい画像() ;
a_pic.src = ペア[i][0];
a_card = 新しいカード(cx、cy、card_width、a_pic、i); Push(a_card);
b_pic = 新しい画像();
b_pic.src = ペア[i][1];
b_card = 新しいカード(cx, cy カードの高さのマージン, カードの幅, カードの高さ, b_pic, i);
デッキ.push(b_card);
cx = cx カード幅マージン;
b_card.draw(); }
function shuffle() //シャッフル
var i;
var j;
var temp_img; 🎜>var k;
for (k = 0; k {
i = Math.floor(Math.random() * デッキ長); Math.floor(Math.random () * デッキ長);
temp_info = デッキ[i].info
temp_img = デッキ[i].img; ].info;
デッキ[i].img = デッキ[j].img;
デッキ[j].img = temp_img; 🎜>}
関数 select(ev)
{
//var mx;
var
//var pick1; ;
var i;
//note
if (ev.layerX || ev.layerX == 0) { // Firefox
mx = ev.layerX; layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
mx = ev.offsetX;
my = ev.offsetY; for (i = 0; i {
card =デッキ[i]
if (card.sx >= 0)//カードは除去されていません
{
// どのカードがクリックされたかを決定します
if (mx >card.sx && mx card.sy && my {
if (i != first_card)//同じカードが 2 回クリックされた場合は処理しません
break
}
}
}
if ( i
{
if (first_pick)//最初のクリックの場合
{
first_pick = false; ctx.drawImage(card.img,card.sx,card.sy,card.swidth,card.sheight);
}
else
{
first_pick = true; Second_card = i;
ctx.drawImage(card.img、card.sx、card.sy、card.swidth、card.sheight);
tid=setTimeout(flip_back,1000); >}
}
function flick_back()
{
if (card.info ==デッキ[first_card].info)//ペアリング成功
{
ctx.fillStyle = table_color ;
ctx .fillRect(デッキ[最初のカード].sx, デッキ[最初のカード].sy, デッキ[最初のカード].s幅, デッキ[最初のカード].s高さ); , デッキ[2 番目のカード] .sy, デッキ[2 番目のカード].swidth, デッキ[2 番目のカード].sheight);
デッキ[1 番目のカード].sx = -1; 🎜>first_card=- 1;
}
else
{
deck[first_card].draw(); ;
}
}
関数 init()
{
canvas = document.getElementById('canvas');
canvas.addEventListener('click'、選択、false);
ctx = Canvas.getContext('2d');
make_deck();

>

123142