html5實現(xiàn)記憶翻牌游戲

發(fā)布時間：2021-08-10 16:30:53 來源：億速云閱讀：254 作者：chen 欄目：web開發(fā)

本篇內(nèi)容主要講解“html5實現(xiàn)記憶翻牌游戲”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“html5實現(xiàn)記憶翻牌游戲”吧!

html5實現(xiàn)記憶翻牌游戲

翻開的2張牌如果配對就會消除，否則2張牌都會返回背面。

需求分析

怎么繪制正的牌面和背的牌面及配對成功后怎么消除牌面
怎么生成牌組并且確定每張牌的位置和對應(yīng)的圖片

怎么洗牌
怎么記錄牌組的配對信息
怎么確定點擊事件是第一次點擊還是第二次點擊

作弊事件的處理：兩次點擊同一張牌點擊已經(jīng)消除的牌面點擊牌面之外的區(qū)域
牌翻開之后需要給一定時間讓玩家看清楚，怎么實現(xiàn)暫停

鼠標(biāo)點擊事件的響應(yīng)及獲得鼠標(biāo)點擊位置的坐標(biāo)從而確定點擊的是哪一張牌

MYCode:

代碼如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>test </title>
<script type="text/javascript">
var ctx;
var canvas;
var card;
var first_pick = true; //第一次點擊的標(biāo)志
var first_card = -1;
var second_card;
var back_color = "rgb(255,0,0)"; //卡片背面顏色
var table_color = "#FFF";
var deck = []; //note
var first_x = 10;
var first_y = 50;
var margin = 30;
var card_width = 50;
var card_height = 50;
var pairs = [
["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)//構(gòu)造函數(shù)
{
this.sx = sx;
this.sy = sy;
this.swidth = swidth;
this.sheight = sheight;
this.info = info;
this.img = img;
this.draw = draw_back;
}
function 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 + margin; //note
a_card.draw();
b_card.draw();
}
}
function 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 = deck[i].img;
deck[i].info = deck[j].info;
deck[i].img = deck[j].img;
deck[j].info = temp_info;
deck[j].img = temp_img;
}
}
function choose(ev)
{
//var out;
var mx;
var my;
//var pick1;
//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) { // Opera
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.sx + card.swidth && my > card.sy && my < card.sy + card.sheight)
{
if (i != first_card)//如果兩次點擊同一張牌不做處理
break;
}
}
}
if (i < deck.length)
{
if (first_pick)//如果是第一次點擊
{
first_card = i;
first_pick = false; //note
ctx.drawImage(card.img, card.sx, card.sy, card.swidth, card.sheight);
}
else
{
first_pick = true; //note
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(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);
deck[first_card].sx = -1;
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');
make_deck();
shuffle();
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="400" height="400"/>
123142
</body>
</html>

到此，相信大家對“html5實現(xiàn)記憶翻牌游戲”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

html5實現(xiàn)記憶翻牌游戲

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽