コメント：メイン関数は、開いた2枚のカードがペアになった場合に排除されることを認識しています。そうしないと、2枚のカードが背面に戻ります。以下は、要件とサンプルコードの説明です。興味のある友達はそれを学ぶことができます。
開いた2枚のカードは、ペアになった場合に排除されます。そうしないと、2枚のカードが背面に戻ります。
要件分析
ポジティブカードフェイスとバックカードフェイスを描く方法と、ペアリングに成功した後のカードフェイスを排除する方法
デッキを生成し、各カードの位置と対応する画像を決定する方法
シャッフルする方法
デッキのペアリング情報を記録する方法
クリックイベントが最初のクリックであるか2回目のクリックであるかを判断する方法
不正行為インシデントの処理：同じカードを2回クリックして、排除されたカードフェイスをクリックし、カードフェイスの外の領域をクリックします。
カードがオンになった後、プレーヤーに一時的な時間を明確に確認するために、プレイヤーに一定の時間を与える必要があります。
マウスクリックイベントへの応答とマウスクリック位置の座標を取得して、どのカードがクリックされているかを判断します
MyCode：
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta charset = "utf-8" />
<title>テスト</title>
<script type = "text/javascript">
var ctx;
var Canvas;
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"]
];
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.swidth = swidth;
this.height = Shower;
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 = 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 = new 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（）;
}
}
function shuffle（）// shut
{
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 = deck [i] .img;
デッキ[i] .info = deck [j] .info;
デッキ[i] .img = deck [j] .img;
デッキ[j] .info = temp_info;
デッキ[j] .img = temp_img;
}
}
function choice（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）//同じカードを2回クリックすると、処理は行われません
壊す;
}
}
}
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 = setimeout（flip_back、1000）;
}
}
}
functionflip_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'、chook、false）;
ctx = canvas.getContext（ '2d'）;
make_deck（）;
シャッフル（）;
}
</script>
</head>
<body>
<canvas/>
123142
</body>
</html>