通過JavaScript實現(xiàn)撲克牌游戲的示例代碼
首先,我們知道一副牌里有54張牌,然后牌里的數(shù)字是從 3 - 2 的里面總共有13張牌,然后 4 中花色 分別是 ♠? ♥? ♣? ♦? 另外加上2個大小王!第一步:我們肯定需要有一個數(shù)組來裝牌吧? 然后再書寫一個函數(shù),我們知道有多少張牌,然后牌里有多少花色是不是應(yīng)該用一個雙重循環(huán)將 number 里面的內(nèi)容 和 flower 里面的內(nèi)容 進(jìn)行一個循環(huán)嵌入?最后在用 push 生成一個對象放到數(shù)組的后面?再到最后放入 大小王 。
const number = ['3', '4', '5', '6', '7', '8', '9', '10', "J", "Q", "K", "A", '2']; const flower = ["??", "??", "??", "??"]; // 黑桃 < 紅心 < 梅花 < 方塊 /** 生成一個撲克牌,然后分發(fā)3副牌,1副牌中有17張牌,然后有四種顏色,底牌留三張。按照大小進(jìn)行排序 * 54 張 * 大小王 * 張三: 17 * 李四: 17 * 王五: 17 * 底牌: 3 * * 排序 方塊3 黑桃3 升序 黑桃3-方塊3 如果點數(shù)相同,按花色排 */
語法:
//系統(tǒng)牌 const number = ['3', '4', '5', '6', '7', '8', '9', '10', "J", "Q", "K", "A", '2']; const flower = ["??", "??", "??", "??"]; // 黑桃 < 紅心 < 梅花 < 方塊 //牌組 let arr = []; //生成牌的函數(shù) poker(); //生成一副牌 function poker() { for (let n = 0; n < number.length; n++) { for (let j = 0; j < flower.length; j++) { arr.push({ name: flower[j] + number[n]}) } } arr.push({ name: "小王" }, { name: "大王" }) }
輸出效果圖:
當(dāng)我們已經(jīng)拿到牌數(shù)組了,像平時我們打牌是不是都是隨機(jī)發(fā)放手里的牌的?那我們在進(jìn)行一個打亂。這時候我們需要用到一個隨機(jī)生成的函數(shù)和一個去重生成下標(biāo)的數(shù)組。
語法:
//系統(tǒng)牌 const number = ['3', '4', '5', '6', '7', '8', '9', '10', "J", "Q", "K", "A", '2']; const flower = ["??", "??", "??", "??"]; // 黑桃 < 紅心 < 梅花 < 方塊 //牌組 let arr = []; //生成牌的函數(shù) poker(); //打亂后的拆開后的牌組 let [zhangsan, wangwu, lisi, d] = create(); //打印輸出 console.log(zhangsan); console.log(wangwu); console.log(lisi); console.log(d); //生成一副牌 function poker() { for (let n = 0; n < number.length; n++) { for (let j = 0; j < flower.length; j++) { arr.push({ name: flower[j] + number[n]}) } } arr.push({ name: "小王" }, { name: "大王" }) } //生成一個隨機(jī)數(shù) function random(min, max) { if (max == undefined) { max = min; min = 0; } if (min > max) { [min, max] = [max, min]; } let number = parseInt(Math.random() * (max - min + 1) + min) return number; } //打亂 function create() { let a = new Set(); while (a.size < 54) { a.add(random(0, 53)); } let arrindex = [...a]; arr = arrindex.map(item => arr[item]); let zhangsan = arr.slice(0, 17); let wangwu = arr.slice(17, 34); let lisi = arr.slice(34, 51); let d = arr.slice(51); return [zhangsan, wangwu, lisi, d]; }
詳解:當(dāng)我們知道需要發(fā)牌的時候是隨機(jī)生成的字牌,然后我們已經(jīng)知道有54張牌,然后需要不重復(fù)的下標(biāo)需要用到 Set 來曬重,數(shù)組的長度是 54 但是下標(biāo)是 53 所以在生成隨機(jī)數(shù)的時候需要主要辨別。然后需要用到 map map的用意:通過指定函數(shù)處理數(shù)組(遍歷數(shù)組)的每個元素,并操作數(shù)組的元素或者下標(biāo),并返回處理后的數(shù)組。 當(dāng)我們已經(jīng)得到下標(biāo)了是不是需要將 arr 里面的元素進(jìn)行找到,然后并將進(jìn)行返回出來,然后再使用 slice slice的用意:用于把數(shù)組中的字符串元素轉(zhuǎn)換成數(shù)字?jǐn)?shù)組,元素是通過指定的分隔符進(jìn)行分隔的。進(jìn)行一個返回接收 我們知道 zhangsan、wangwu、lisi 是有 17 張牌的 而底牌只有三張可以得到手牌。并將函數(shù)里面的內(nèi)容返回出去進(jìn)行一個接收輸出。
輸出效果圖:
在到最后我們需要一個排序。當(dāng) 3 和 3 比肯定是沒有辦法比的是不是?我們在最開始拿到牌組的內(nèi)容的時候就定義了 黑桃 < 紅心 < 梅花 < 方塊 這時候我們需要對 牌的 內(nèi)容 和 數(shù)字 進(jìn)行一個大小對對象的添加。然后再書寫一個函數(shù)進(jìn)行一個排序。排序需要用到 sort sort的用意:對數(shù)組的元素進(jìn)行排序,不是真實按照數(shù)字排列去排序的,按照字符進(jìn)行一個比較。當(dāng)需要比較數(shù)字需要重寫。例如sort((a,b)=> a-b)升序 sort((a,b)=> b-a) 降序! 在生成牌組里面需要添加 花色的大小 和 數(shù)字 的大小 ,最后進(jìn)行一些列的優(yōu)化代碼如下:
語法:
const number = ['3', '4', '5', '6', '7', '8', '9', '10', "J", "Q", "K", "A", '2']; const flower = ["??", "??", "??", "??"]; // 黑桃 < 紅心 < 梅花 < 方塊 let arr = []; poker(); let [zhangsan, wangwu, lisi, d] = create(); sort(zhangsan); sort(wangwu); sort(lisi); sort(d); console.log("張三:",zhangsan); console.log("王五:",wangwu); console.log("王五:",lisi); console.log("底牌:",d); //排序 function sort(arr) { arr.sort((a,b)=>{if (a.number == b.number) { return a.flower - b.flower; }else{ return a.number - b.number; }}) } //生成一個隨機(jī)數(shù) function random(min, max) { if (max == undefined) { max = min; min = 0; } if (min > max) { [min, max] = [max, min]; } let number = parseInt(Math.random() * (max - min + 1) + min) return number; } //打亂 function create() { let a = new Set(); while (a.size < 54) { a.add(random(0, 53)); } let arrindex = [...a]; arr = arrindex.map(item => arr[item]); let zhangsan = arr.slice(0, 17); let wangwu = arr.slice(17, 34); let lisi = arr.slice(34, 51); let d = arr.slice(51); return [zhangsan, wangwu, lisi, d]; } //生成一副牌 function poker() { for (let n = 0; n < number.length; n++) { for (let j = 0; j < flower.length; j++) { arr.push({ name: flower[j] + number[n],flower:j,number:n}) } } arr.push({ name: "小王" ,number:53}, { name: "大王" ,number:54}) }
以上就是通過JavaScript實現(xiàn)撲克牌游戲的示例代碼的詳細(xì)內(nèi)容,更多關(guān)于JavaScript撲克牌游戲的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
js實現(xiàn)用于建立新的一行且增加的四個文本框為空的且被禁用
js實現(xiàn)用于建立新的一行且增加的四個文本框為空的且被禁用...2007-04-04JavaScript代碼應(yīng)該放在HTML代碼哪個位置比較好?
這篇文章主要介紹了JavaScript代碼應(yīng)該放在HTML代碼哪個位置比較好?本文總結(jié)了多種放置JS代碼的方法,需要的朋友可以參考下2014-10-10詳解JavaScript中Math內(nèi)置對象基本方法的使用
Math?是javaScript的內(nèi)置對象,包含了部分?jǐn)?shù)學(xué)常數(shù)屬性和數(shù)學(xué)函數(shù)方法。本文將詳細(xì)講解Math基本方法的使用,感興趣的小伙伴可以學(xué)習(xí)一下2022-04-04JavaScript省市區(qū)三級聯(lián)動菜單效果
這篇文章主要為大家詳細(xì)介紹了JavaScript省市區(qū)三級聯(lián)動菜單效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-09-09JavaScript 節(jié)流函數(shù) Throttle 詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript 節(jié)流函數(shù) Throttle,感興趣的小伙伴們可以參考一下2016-07-07網(wǎng)站頁面自動跳轉(zhuǎn)實現(xiàn)方法PHP、JSP(上)
自動轉(zhuǎn)向,也叫自動重定向。自動跳轉(zhuǎn),指當(dāng)訪問用戶登陸到某網(wǎng)站時,自動將用戶轉(zhuǎn)向其它網(wǎng)頁地址的一種技術(shù)。轉(zhuǎn)向的網(wǎng)頁地址可以是網(wǎng)站內(nèi)的其它網(wǎng)頁,也可以是其它網(wǎng)站。2010-08-08如何使用50行javaScript代碼實現(xiàn)簡單版的call,apply,bind
這篇文章主要介紹了50行javaScript代碼實現(xiàn)簡單版的call,apply,bind過程詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08