本文實(shí)例為大家分享了js+canvas實(shí)現(xiàn)紙牌游戲的具體代碼，供大家參考，具體內(nèi)容如下

廢話不多說(shuō)，先上地址

運(yùn)行截圖

最后如果完成了會(huì)有結(jié)束動(dòng)畫(huà)，我技術(shù)比較渣，難以玩到結(jié)束，就不上完成動(dòng)畫(huà)截圖了。

游戲介紹

好吧，可能有些好學(xué)生在做上機(jī)實(shí)驗(yàn)時(shí)沒(méi)有玩紙牌游戲，所以容我介紹一下這個(gè)游戲，這個(gè)游戲是win7自帶的一個(gè)紙牌類游戲，游戲規(guī)則是：將牌按一定的規(guī)則碼放，最終將所有的牌牌面朝上勝利。有兩個(gè)地方可以用來(lái)碼牌，上：以A開(kāi)頭，即將碼放的牌的花色相同，且牌面值比原來(lái)的牌面大1，則可以碼放成功；下：以K開(kāi)頭，即將碼放的牌的顏色不同，且牌面值比原來(lái)的牌面小1，則可以成功碼放。

支持的操作

點(diǎn)擊、拖拽相比微軟紙牌，增加了點(diǎn)擊牌自動(dòng)找到合適的位置的碼放方式，所以整個(gè)游戲大部分操作只需要點(diǎn)擊就可以了。

設(shè)計(jì)思路

1. 游戲運(yùn)行驅(qū)動(dòng)

游戲以玩家操作（鼠標(biāo)點(diǎn)擊與移動(dòng)）為驅(qū)動(dòng)。 點(diǎn)擊與移動(dòng)鼠標(biāo)時(shí)，通過(guò)記錄鼠標(biāo)的位置與狀態(tài)，可以得到以下四個(gè)事件（按下、移動(dòng)、彈起、單擊）。 首先，需要注冊(cè)鼠標(biāo)點(diǎn)擊、移動(dòng)和彈起事件

function BindEvent() { $(window).bind('mousedown touchstart', function (e) { e.preventDefault(); var x; var y; if (e.type == 'touchstart') { x = e.originalEvent.changedTouches[0].clientX; y = e.originalEvent.changedTouches[0].clientY; } else { x = e.clientX; y = e.clientY; } if (isPlayingAnimation) { return; } ActionDown(x, y - 50); }); $(window).bind('mousemove touchmove', function (e) { e.preventDefault(); var x; var y; if (e.type == 'touchmove') { x = e.originalEvent.changedTouches[0].clientX; y = e.originalEvent.changedTouches[0].clientY; } else { x = e.clientX; y = e.clientY; } if (isPlayingAnimation) { return; } ActionMove(x, y - 50); }); $(window).bind('mouseup touchend', function (e) { e.preventDefault(); var x; var y; if (e.type == 'touchend') { x = e.originalEvent.changedTouches[0].clientX; y = e.originalEvent.changedTouches[0].clientY; } else { x = e.clientX; y = e.clientY; } if (isPlayingAnimation) { return; } ActionUp(x, y - 50); }); }

然后在彈起事件里面檢測(cè)鼠標(biāo)在彈起之前移動(dòng)了多少距離，如果移動(dòng)的距離很小，可以忽略不計(jì)，則認(rèn)為這是一次點(diǎn)擊操作。

注意：這里事件注冊(cè)不是在每張牌上，因?yàn)?2張牌實(shí)際上都畫(huà)在canvas上，然而52張牌的坐標(biāo)都是知道的，所以通過(guò)計(jì)算就可以知道用選擇了哪些牌，正在將牌移到哪里。等玩家松手后就可以實(shí)現(xiàn)碼放操作。

2. 界面設(shè)計(jì)

頂欄用于顯示積分、時(shí)間

<div id='titleContainer'> <div>Score:<span id='score'>0</span></div> <div>Timer:<span id='timer'>00:00:00</span></div></div>

接下來(lái)就是桌面

<div id='deskTop'> <canvas id='canvasBack'></canvas> <canvas id='canvasFont'></canvas></div>

可以看到，桌面有兩個(gè)canvas，一前一后，這實(shí)際上是將游戲畫(huà)面分為了兩層，玩家看到的畫(huà)面是兩個(gè)畫(huà)面疊加在一起的。

之所以用兩個(gè)層，主要是為了避免實(shí)時(shí)繪制整個(gè)界面，鼠標(biāo)選中一些牌后將要實(shí)施移動(dòng)操作，這時(shí)實(shí)際上只有被鼠標(biāo)選中的那些牌的位置在變化，而桌上剩余的牌實(shí)際上沒(méi)有任何變化，這時(shí)如果還實(shí)時(shí)繪制后面的沒(méi)有變化的牌有些浪費(fèi)。所以把鼠標(biāo)選中的那些牌拿出來(lái)，放到canvasFont層里面，這樣，兩個(gè)層都不用實(shí)時(shí)繪制，被鼠標(biāo)選中的牌在移動(dòng)的時(shí)候只需要移動(dòng)他們被繪制在的canvasFont就可以了。

3. 流程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。