html5記憶翻牌遊戲實現思路及代碼_html5教程技巧

翻開的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