原生JS實戰：寫了個鬥牛遊戲，分享給你們一塊兒玩！
本文是蘇福的原創文章，轉載請註明出處：蘇福CNblog：http://www.cnblogs.com/susufufu/p/5869953.html
該程序是本人的我的做品，寫的很差，未經本人容許，請不要用於其它用途！
奮戰一天一晚上終於把鬥牛遊戲給寫出來了（主要是除bug時間用的多！若你們發現新的bug歡迎留言）css
這是遊戲規則：百度牛牛規則html
點擊查看演示：react
我是新手，代碼寫的有點亂，計算邏輯有點複雜，但最終仍是實現了遊戲效果！真的好開心，也深入體會到一點就是，敲代碼的時候注意力必定要十分集中，否則後期除bug真的很頭痛！其實大部分bug都是一些小錯誤引發的！算法
做爲新生之一，多寫點代碼，是最能提升本身的能力的！無論要寫什麼，寫多大的程序，把想法、規則、流程先寫出來，而後再敲代碼，這樣纔不會亂！
多寫代碼的最大好處就是能夠熟練API的使用，本人還沒學任何第三方類庫呢，連JQ都沒學過，到如今還一直擼原生，暫時是ES5，過段時間再練習ES6，聽說，學好原生，再學別的都很容易上手，我一直很相信這句話，就是不知道靠不靠譜，求前輩們指點迷津！很煩惱的一個問題：選NG呢？仍是react呢？數組
正題開始
HTML、CSS的代碼都是用的比較基礎的知識，你們應該都能看懂，就很少廢話了；app
JS代碼部分：
根據遊戲規則(這裏我只寫了支持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(); //循環開始了！！！
}
就這樣，遊戲就能夠一直玩下去了，一直能夠點下一局！
這個遊戲我定義了好多變量，用了好多ID，整了很多函數，感受邏輯偏複雜了，雖然定義了Game和Player，有點面向對象了，但總體來講都是函數哦！請前輩們多指點指點在下啊！！！QQ: 553150580
相關文章
- 1. 寫了一個老虎機遊戲，你們一塊兒玩
- 2. 初學cocos2dx 寫了個2048 跟你們一塊兒分享下
- 3. PHP遊戲開發之你們一塊兒來玩泡泡堂
- 4. 原生JS小遊戲：從0實現一個掃雷遊戲
- 5. 你們一塊兒玩U-boot DIY
- 6. 一個好玩的編程小遊戲—— 母牛生小牛
- 7. 你們一塊兒寫mvc（一）
- 8. 分享幾個Vue案例供你們一塊兒學習
- 9. 你們一塊兒寫mvc（三）_結束
- 10. 你們一塊兒寫mvc（二）
- 更多相關文章...
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • 第一個MyBatis程序 - MyBatis教程
- • 再有人問你分佈式事務，把這篇扔給他
- • Java Agent入門實戰（三）-JVM Attach原理與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章