原生JS实战：写了个斗牛游戏，分享给大家一起玩！

本文是苏福的原创文章，转载请注明出处：苏福CNblog：http://www.cnblogs.com/susufufu/p/5869953.html

该程序是本人的个人作品，写的不好，未经本人允许，请不要用于其它用途！
奋战一天一夜终于把斗牛游戏给写出来了（主要是除bug时间用的多！若大家发现新的bug欢迎留言）

这是游戏规则：百度牛牛规则

点击查看演示：

苏福的JS小游戏 庄 无牛 押注: 3 阿尔法1 金钱: 1000 庄 牛牛 押注: 3 阿尔法2 金钱: 1000 庄 牛9 押注: 3 1 3 5 10 随机 1000 庄 牛8 押注: 3 阿尔法3 金钱: 1000 请押注 开始游戏 下一局

我是新手，代码写的有点乱，计算逻辑有点复杂，但最终还是实现了游戏效果！真的好开心，也深刻体会到一点就是，敲代码的时候注意力一定要十分集中，不然后期除bug真的很头痛！其实大部分bug都是一些小错误引起的！

作为新生之一，多写点代码，是最能提高自己的能力的！不管要写什么，写多大的程序，把想法、规则、流程先写出来，然后再敲代码，这样才不会乱！

多写代码的最大好处就是可以熟练API的使用，本人还没学任何第三方类库呢，连JQ都没学过，到现在还一直撸原生，暂时是ES5，过段时间再练习ES6，据说，学好原生，再学别的都很容易上手，我一直很相信这句话，就是不知道靠不靠谱，求前辈们指点迷津！很烦恼的一个问题：选NG呢？还是react呢？

正题开始

HTML、CSS的代码都是用的比较基础的知识，大家应该都能看懂，就不多废话了；

JS代码部分：

根据游戏规则(这里我只写了支持4个玩家)，比较核心的有几个：创建一副扑克牌、创建玩家、计算出牛几

创建一副扑克牌，我定义了

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个函数使用，就放在外面吧，把参数设置成通用的。

游戏入口函数

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
[i],false);
args[j].children[i].innerHTML = '';
}else if(str === 'set'){
changeClassName(args[j].children[i],'card-'+ks
[i],true);
args[j].children[i].innerHTML = vs
[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