奮戰一天一晚上終於把鬥牛遊戲給寫出來了(主要是除bug時間用的多!若你們發現新的bug歡迎留言)css
這是遊戲規則:百度牛牛規則html
點擊查看演示:react
我是新手,代碼寫的有點亂,計算邏輯有點複雜,但最終仍是實現了遊戲效果!真的好開心,也深入體會到一點就是,敲代碼的時候注意力必定要十分集中,否則後期除bug真的很頭痛!其實大部分bug都是一些小錯誤引發的!算法
做爲新生之一,多寫點代碼,是最能提升本身的能力的!無論要寫什麼,寫多大的程序,把想法、規則、流程先寫出來,而後再敲代碼,這樣纔不會亂!
多寫代碼的最大好處就是能夠熟練API的使用,本人還沒學任何第三方類庫呢,連JQ都沒學過,到如今還一直擼原生,暫時是ES5,過段時間再練習ES6,聽說,學好原生,再學別的都很容易上手,我一直很相信這句話,就是不知道靠不靠譜,求前輩們指點迷津!很煩惱的一個問題:選NG呢?仍是react呢?數組
HTML、CSS的代碼都是用的比較基礎的知識,你們應該都能看懂,就很少廢話了;app
根據遊戲規則(這裏我只寫了支持4個玩家),比較核心的有幾個:建立一副撲克牌、建立玩家、計算出牛幾dom
Game
類,下面是代碼+註釋//=================Game類 function Game() { this.systemCards = Game.createCards(); } //靜態方法createCards建立一副牌並返回亂序後的牌 Game.createCards = function(){ var cards = [], cardType = [1, 2, 3, 4], //牌的花色,爲了便於比較不一樣花色的大小,採用數值代替黑桃、紅桃等文字 cardPoint = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]; //牌面值,J、Q、K分別爲11,12,13,這裏沒有大小王 cardPoint.forEach(function (p) { //兩個forEach循環爲每一個花色建立一組牌,共四組,合計52張牌 cardType.forEach(function (t) { var card = {}; card[t] = p; cards.push(card) }) }); return this.disorder(cards); }; //亂序方法,互相替換位置i的元素和隨機位置的元素(中間變量temp保存值),這是很基礎的用法,必須掌握 Game.disorder = function (cards){ var temp,len = cards.length; for(var i = 0; i < len; i++){ var r = getRandom(0,len); temp = cards[i]; cards[i] = cards[r]; cards[r] = temp; } return cards; };
Player
//=================Player類 var Player = function () { this.banker = false; //是否爲莊家 this.money = 1000; }; //返回一副牌中的前5張牌,後期用於發牌給玩家 Player.prototype.getCards = function (g) { g.systemCards = g.systemCards.length < 20 ? Game.createCards() : g.systemCards;//牌不夠發時從新拿一副牌,4我的*5=20 return g.systemCards.splice(0,5); };
//計算核心函數`sufuCaculate`,這裏擴展了`Array`類,只是爲了方便調用,前提是得取個個性一點的名字,否則哪一天官方也出個同名的內置方法,你的項目就悲催了! Array.prototype.sufuCaculate = function () { if((!this)||this.length<5){throw new Error('sufuCaculate()參數錯誤')} var card5 = this, before10Count = 0, after10Count = 0, maxSameCount = getMaxSameCount(this); if(maxSameCount == 4){return 14} //4張相同的,返回'炸彈' if(this.every(function (x) {return x<5;})){return 13}//5張牌都小於5,返回'五小' if(this.every(function (x) {return x>10;})){return 12}//5張牌全爲花,返回'五花' turnTrueValue(card5);//把大於10的牌變成10,並計算等於10的牌的數量 if(before10Count == 1 && after10Count == 5){return 11}//5張牌中一張爲10,另外4張爲花,返回'四花' //用了三層的for循環才實現了,求前輩們指點好一點的邏輯! for(var i = 0; i<3; i++){ for(var j = i+1;j<4;j++){ for(var k = j+1;k<5;k++){ if(sum([card5[i],card5[j],card5[k]]) == 0){ var copy = card5.slice(); delete copy[i]; delete copy[j]; delete copy[k]; var a = sum(copy.filter(function(){return true})); if(a == 0){return 10}//牛牛 else{return a}//a牛 } } } } return 0;//'無牛' //求和並求於10 function sum(arr){ return arr.reduce(function(a,b){return a+b})%10 } //得到最大相同牌數 function getMaxSameCount(card5){ var count = 1, sameCardCount = 1; for(var i = 0; i<5; i++){ for(var j = 0; j<5;j++){ if(j == i){continue} if(card5.indexOf(card5[i],j)>0){ count++; } } sameCardCount = Math.max(count,sameCardCount); count = 1; } return sameCardCount; } //把大於10的牌所有轉爲10 function turnTrueValue(card5){ for(var i = 0; i<5; i++){ if(card5[i] === 10){before10Count++} card5[i] = card5[i]>=10 ? 10 : card5[i]; if(card5[i] === 10){after10Count++} } } };
接下來,怎麼寫呢?本人是這樣的,先從程序入口出發,一步一步往前推,寫到感受會被重複用到的代碼就拿出來,放進一個單獨的工具函數,方便重複使用,能夠大大地減小代碼量!注意工具函數放的位置,若是它只被用在某函數內部,且依賴該函數的變量的話就絕不客氣的放在這個函數裏面吧,省的傳參等的麻煩,要是它會被大於2個函數使用,就放在外面吧,把參數設置成通用的。ide
遊戲入口函數start()
,遊戲要開始,得有個按鈕按吧,好吧來個按鈕綁定事件beginBtn.onclick
,點擊後進入遊戲界面(顯示基本元素)函數
//點擊開始按鈕執行 beginBtn.onclick = function () { var str = prompt('請輸入遊戲名字','玩家'); player3Name.innerHTML = (str||'玩家')+' 金錢:'; begin(); firstBanker(); showOrHide('none',beginBtn); showOrHide('block',player1Money,player2Money,player3Money,player4Money,player3Bg); showOrHide.bind(null,'block').apply(null,playerCards); //這是我爲了偷懶,突發奇想寫出來的,竟然能用,呵呵了!若是看不懂,就去蘇福的博客園看bind,apply的文章 showOrHide.bind(null,'block').apply(null,playerNameMoneys); runing(); };
開始後得有玩家吧,好吧,建立4個玩家,放進一個數組裏面,方便訪問工具
//建立四個玩家 function begin(){ for(var i = 0; i<4 ; i++){ players.push(new Player()); } }
第一輪先隨機肯定莊家firstBanker()
,不介紹了,本身看源碼。
而後呢,得來個倒計時函數 runTime(msg,t)
,這個函數比較通用,在start()範圍內會被重複使用,設計以下:
//倒計時函數,看不懂?多翻翻個人博客,有相關知識介紹的文章 function runTime(msg,t){ t--; if(t<0){clearTimeout(timeId);timeId=null;return} info.innerHTML = msg; timeInfo.innerHTML = t; timeId = setTimeout(function () { runTime(msg,t); },1000); }
在點擊開始按鈕時,會啓動遊戲的流程,事件回調函數內調用runing()
function runing(){ runTime('請押注',4); callIn(); //押注函數 waiting(deal,5);//等待delay時間到時,執行deal發牌方法 }
是的,須要個押注函數callIn()
,補貼代碼了,比較簡單,電腦玩家給個隨機數,主角經過按鈕來取值,而莊家不取值(其它代碼就是界面元素的顯示與隱藏)
接下來就是deal()
方法,發牌方法,取出玩家的手牌的數據,把花色值、牌面值、牛幾分別存進單獨的數組,以便使用。
function deal() { for(var i = 0; i<4 ; i++){ cs[i] = players[i].getCards(g); keys[i] = getKeyValue(cs[i]).keys; values[i] = getKeyValue(cs[i]).values; results[i] = getCow(values[i]) } showOrHide('none',player3InBtn); setCard('set',keys,values,player1Card,player2Card,player3Card,player4Card); runTime('計算結果',4); waiting(function(){showResult(results)},5); }
上面這個deal()
方法又須要調用顯示或隱藏元素的showOrHide()
方法,看名字就知道啦,因此函數的命名很關鍵,否則代碼長了,本身都不知道這是什麼鬼了!showOrHide()
這個方法用的最多,因此必須寫成通用的格式:
//改變元素的display屬性,看不懂?多翻翻個人博客,有相關知識介紹的文章 function showOrHide(str){ var len = arguments.length; for(var i=1;i<len;i++){ arguments[i].style.display = str; } }
這裏先貼個工具函數:
//得到某一張牌的類型和值`getKeyValue()`,用來取牌的花色值和牌面值,內置的`Object.keys()`方法不支持IE9如下 var getKeyValue = function (cards){ var keys = [],values = []; cards.forEach(function (n) { var key = +Object.keys(n); keys.push(key); values.push(n[key]); }); return { keys:keys, values:values }; };
發牌函數裏調用了setCard()
,顯示或重置全部玩家的牌,我寫的這個鬥牛遊戲的牌不是用的圖片,而是用了CSS,下面的changeClassName()
就是用來應用樣式的函數
//顯示全部玩家的牌 function setCard(str,ks,vs){ //str='set' or 'reset' var args = Array.prototype.slice.call(arguments,3),len = args.length; for(var j=0;j<len;j++){ var n = args[j].id.charAt(6)-1; for(var i = 0;i<5;i++){ if(str === 'reset'){ changeClassName(args[j].children[i],'card-'+ks[n][i],false); args[j].children[i].innerHTML = ''; }else if(str === 'set'){ changeClassName(args[j].children[i],'card-'+ks[n][i],true); args[j].children[i].innerHTML = vs[n][i]; } } } }
玩家壓完注後,得顯示結果了,showResult()
,這裏又用到了showOrHide()
、runTime()
、waiting()
//顯示全部玩家的結果 function showResult(results){ var resultsStr = []; for(var i=0;i<4;i++){ resultsStr.push(getResultInfo(results[i])); } showOrHide('block',result1,result2,result3,result4); result1.innerHTML = resultsStr[0]; result2.innerHTML = resultsStr[1]; result3.innerHTML = resultsStr[2]; result4.innerHTML = resultsStr[3]; var str = pay(); //pay()就是付錢的意思啦 runTime(str,10); waiting(function(){showOrHide('block',restartBtn);},11) //延時時間到後顯示下一局按鈕 }
第一局完了,要開始下一局了(之後的全部下一局都將同樣),restartBtn.onclick = restart;
,好吧,定義個回調函數restart()
function restart(){ showOrHide('none',restartBtn); resetBanker(); //根據上一局結果,根據遊戲規則,重選莊家 setCard('reset',keys,values,player1Card,player2Card,player3Card,player4Card); clearArrays(results,cs,keys,values,playerCallIns); //清楚上一局保存的全部數據 showOrHide('none',result1,result2,result3,result4); runing(); //循環開始了!!! }
就這樣,遊戲就能夠一直玩下去了,一直能夠點下一局!