本文例項為大家分享了js+canvas實現紙牌遊戲的具體程式碼，供大家參考，具體內容如下

廢話不多說，先上地址

執行截圖

最後如果完成了會有結束動畫，我技術比較渣，難以玩到結束，就不上完成動畫截圖了。

遊戲介紹

好吧，可能有些好學生在做上機實驗時沒有玩紙牌遊戲，所以容我介紹一下這個遊戲，這個遊戲是win7自帶的一個紙牌類遊戲，遊戲規則是：將牌按一定的規則碼放，最終將所有的牌牌面朝上勝利。有兩個地方可以用來碼牌，上：以A開頭，即將碼放的牌的花色相同，且牌面值比原來的牌面大1，則可以碼放成功；下：以K開頭，即將碼放的牌的顏色不同，且牌面值比原來的牌面小1，則可以成功碼放。

支援的操作

點選、拖拽相比微軟紙牌，增加了點選牌自動找到合適的位置的碼放方式，所以整個遊戲大部分操作只需要點選就可以了。

設計思路

1. 遊戲執行驅動

遊戲以玩家操作（滑鼠點選與移動）為驅動。
點選與移動滑鼠時，通過記錄滑鼠的位置與狀態，可以得到以下四個事件（按下、移動、彈起、單擊）。
首先，需要註冊滑鼠點選、移動和彈起事件

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);
   });
  }

然後在彈起事件裡面檢測滑鼠在彈起之前移動了多少距離，如果移動的距離很小，可以忽略不計，則認為這是一次點選操作。

注意：這裡事件註冊不是在每張牌上，因為52張牌實際上都畫在canvas上，然而52張牌的座標都是知道的，所以通過計算就可以知道用選擇了哪些牌，正在將牌移到哪裡。等玩家鬆手後就可以實現碼放操作。

2. 介面設計

頂欄用於顯示積分、時間

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

接下來就是桌面

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

可以看到，桌面有兩個canvas，一前一後，這實際上是將遊戲畫面分為了兩層，玩家看到的畫面是兩個畫面疊加在一起的。

之所以用兩個層，主要是為了避免實時繪製整個介面，滑鼠選中一些牌後將要實施移動操作，這時實際上只有被滑鼠選中的那些牌的位置在變化，而桌上剩餘的牌實際上沒有任何變化，這時如果還實時繪製後面的沒有變化的牌有些浪費。所以把滑鼠選中的那些牌拿出來，放到canvasFont層裡面，這樣，兩個層都不用實時繪製，被滑鼠選中的牌在移動的時候只需要移動他們被繪製在的canvasFont就可以了。

3. 流程

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。