js+canvas實(shí)現(xiàn)紙牌游戲
本文實(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í)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解javascript立即執(zhí)行函數(shù)表達(dá)式IIFE
本文主要介紹了javascript立即執(zhí)行函數(shù)表達(dá)式IIFE的相關(guān)知識(shí)。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02JavaScript編碼風(fēng)格精選指南(編寫(xiě)可維護(hù)的代碼規(guī)范)
javascript編碼規(guī)范能夠增強(qiáng)代碼的簡(jiǎn)潔性、可讀性、可擴(kuò)展性,項(xiàng)目做到后期,每修改一次,所耗費(fèi)的成本就越高,編碼規(guī)范能節(jié)省這樣的成本,并且能很好拓展升級(jí)原有系統(tǒng)功能,javascript編碼規(guī)范也是開(kāi)源社區(qū)大家約定俗成的規(guī)則!2024-06-06javascript 使td內(nèi)容不換行不撐開(kāi)
javascript 使td內(nèi)容不換行不撐開(kāi)如何實(shí)現(xiàn),本文將詳細(xì)介紹,需要了解的朋友可以參考下2012-11-11javascript實(shí)現(xiàn)依次輸入input自動(dòng)定焦
這篇文章主要介紹了javascript實(shí)現(xiàn)依次輸入input自動(dòng)定焦的方法及示例代碼,非常實(shí)用,這里推薦給小伙伴們2014-12-12js讀寫(xiě)COOKIE實(shí)現(xiàn)記住帳號(hào)或密碼的代碼(js讀寫(xiě)COOKIE)
js實(shí)現(xiàn)記住帳號(hào)或密碼(js讀寫(xiě)COOKIE) 的實(shí)現(xiàn)代碼,原理就是利用cookies保存于讀取功能。2010-05-05