目錄
HTML+JS+websocket 實例，聯(lián)機(jī)“游戲王”對戰(zhàn) 1
HTML+JS+websocket 實例，聯(lián)機(jī)“游戲王”對戰(zhàn) 2 - 聯(lián)機(jī)模式
HTML+JS+websocket 實例，聯(lián)機(jī)“游戲王”對戰(zhàn) 3 - 界面布局
HTML+JS+websocket 實例，聯(lián)機(jī)“游戲王”對戰(zhàn) 4 - 卡組系統(tǒng)
HTML+JS+websocket 實例，聯(lián)機(jī)“游戲王”對戰(zhàn) 5 - 卡片選中系統(tǒng)
HTML+JS+websocket 實例，聯(lián)機(jī)“游戲王”對戰(zhàn) 6 - 卡片放置，戰(zhàn)場更新
HTML+JS+websocket 實例，聯(lián)機(jī)“游戲王”對戰(zhàn) 7 - 墓地，副控制面板
HTML+JS+websocket 實例，聯(lián)機(jī)“游戲王”對戰(zhàn) 8 - 返回手卡，卡組
HTML+JS+websocket 實例，聯(lián)機(jī)“游戲王”對戰(zhàn) 9 - 實現(xiàn)簡單 websocket 通信
HTML+JS+websocket 實例，聯(lián)機(jī)“游戲王”對戰(zhàn) 10 - 搭建游戲服務(wù)端
HTML+JS+websocket 實例，聯(lián)機(jī)“游戲王”對戰(zhàn) 11 - 客戶端消息的收發(fā)
HTML+JS+websocket 實例，聯(lián)機(jī)“游戲王”對戰(zhàn) 12 - 消息發(fā)送具體場景
HTML+JS+websocket 實例，聯(lián)機(jī)“游戲王”對戰(zhàn) 13 - 實機(jī)演示
前言
應(yīng)某友人的要求，同時作為練手項目，花幾天時間寫了個“游戲王”的聯(lián)機(jī)卡牌對戰(zhàn)游戲，游戲內(nèi)容大致是這樣的：
客戶端是原生的 HTML+JS，服務(wù)端基于 Node.js（本地服務(wù)器），通信協(xié)議用的 WebSocket。
可以看到游戲界面有很多操作按鈕，因為游戲的操作模式是完全仿線下卡牌的游玩模式，也就是不帶任何規(guī)則判定和卡牌腳本。帶規(guī)則判定的游戲?qū)崿F(xiàn)起來復(fù)雜度較高，而且光是給每張卡牌的效果編寫運行腳本就是一個極其浩大的工程，這里限制于時間和技術(shù)力就不采用那種方式了，市面上已經(jīng)有很多成熟的游戲產(chǎn)品。
目前的版本很簡易，但是已經(jīng)可以進(jìn)行完整的對局，為了加強(qiáng)帶入感添加了一些動漫音效。當(dāng)然由于沒有規(guī)則判定，雙方玩家必須處于能隨時溝通的環(huán)境，實際上就是把線下卡牌轉(zhuǎn)移到PC上，線下玩法的數(shù)字版，美其名曰“最純粹的游戲王對戰(zhàn)體驗”。
游戲服務(wù)端在本地創(chuàng)建，所以只能局域網(wǎng)對戰(zhàn)，啟動服務(wù)端后點開html客戶端就會直接連接。游戲特效是基本沒有了，原生方法制作特效比較麻煩，想要酷炫的動畫和特效推薦用游戲引擎，比如 Egret，Layabox 一類的H5游戲引擎。
牌組自然是網(wǎng)上收集的高清卡牌圖片，放在本地讀取。這里有一點好處就是可以隨心所欲的加入任何版本的卡牌，而且效果不會受限于游戲腳本（根本不存在游戲腳本），打出什么效果玩家說了算。目前市面上的成熟游戲產(chǎn)品出于對戰(zhàn)公平性的考慮對很多卡牌的效果做了修改，特別是部分初代卡牌，與動漫中演繹的效果大相徑庭，沒以前那味兒了。學(xué)生時代照著TV動畫收集各種牌組就是為了能在某次對局中偶遇動漫里的熱血連鎖，輸贏什么的不重要。另外還有很多初代TV版的卡牌基本正版游戲里是沒有收錄的，自制版可以DIY一下。
初版完成后果斷和朋友開了兩局，雖然體驗比不上線下卡但情懷還是體會到了。
接下來的章節(jié)就主要來談?wù)剬崿F(xiàn)思路吧。水平有限，學(xué)習(xí)記錄一下。
項目源代碼可移步我的Github，初版已 merge 至 master：
YGO-Online-Combat
