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

創(chuàng)新互聯(lián)公司專注于嵐皋企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,電子商務(wù)商城網(wǎng)站建設(shè)。嵐皋網(wǎng)站建設(shè)公司,為嵐皋等地區(qū)提供建站服務(wù)。全流程按需求定制設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

廢話不多說，先上地址

運(yùn)行截圖

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

游戲介紹

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

當(dāng)前文章：js+canvas實(shí)現(xiàn)紙牌游戲-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：http://jinyejixie.com/article38/jscsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、微信小程序、靜態(tài)網(wǎng)站、微信公眾號(hào)、動(dòng)態(tài)網(wǎng)站、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)