• 苏福的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

  • 相关阅读:
    JVM虚拟机
    antd Table排序问题
    关于element-ui中el-container布满全局的问题!
    vue 安装css预处理器LESS
    mybatis官网
    Lombok安装及使用介绍
    thymeleaf中th:each的使用,遍历数组
    thymeleaf中th:text和th:utext的使用与区别
    SprongBoot项目的打包与启动
    SpringBoot简单学习
  • 原文地址:https://www.cnblogs.com/susufufu/p/5869953.html
Copyright © 2020-2023  润新知