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

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

该程序是本人的个人作品，写的不好，未经本人允许，请不要用于其它用途！

奋战一天一夜终于把斗牛游戏给写出来了（主要是除bug时间用的多！若大家发现新的bug欢迎留言）

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

点击查看演示：

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

作为新生之一，多写点代码，是最能提高自己的能力的！不管要写什么，写多大的程序，把想法、规则、流程先写出来，然后再敲代码，这样才不会乱！
多写代码的最大好处就是可以熟练API的使用，本人还没学任何第三方类库呢，连JQ都没学过，到现在还一直撸原生，暂时是ES5，过段时间再练习ES6，据说，学好原生，再学别的都很容易上手，我一直很相信这句话，就是不知道靠不靠谱，求前辈们指点迷津！很烦恼的一个问题：选NG呢？还是react呢？

正题开始

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

JS代码部分：

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

  1. 创建一副扑克牌，我定义了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;
    };
  1. 创建玩家类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);
    };
  1. 计算出牛几：这个问题我想了很久，感觉有点复杂，其实真正动手去写的时候感觉不是太难！（被这么点小学算法难倒了，还怎么在这个圈混啊！）
//计算核心函数`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[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

posted on 2016-09-13 22:02  SuriFuture  阅读(6794)  评论(11)  编辑  收藏  举报

导航