打扑克的人都知道，比如斗地主！

我们一般都会按照顺序把随机摸过来的牌从小到大的顺序在手上理整齐（记得小时候打牌两副牌手都抓不过来），这篇随笔就是想通过实现这个功能来熟悉下js中排序数组等相关知识。

用到知识点：

1.工厂方式创建对象

2.js数组sort()方法

  var testArr = [1, 3, 4, 2];

     testArr.sort(function (a,b) {

         return a - b;

     })

     alert(testArr.toString());//1,2,3,4

     testArr.sort(function (a, b) {

         return b- a;

     })

     alert(testArr.toString());//4,3,2,1

3.js-Math.radom()随机数

Math.random();//0-1 取得的随机数大于等于0且小于1

4.js数组splice用法

 //第一个参数是插入的起始位置

 //第二个参数是从起始位置开始删除元素的个数

 //第三个参数是在起始位置开始插入的元素

 //例子

 var testArr = [1, 3, 4, 2];

     testArr.splice(1, 0, 8);

     alert(testArr.toString());//1,8,3,4,2

     var testArr1 = [1, 3, 4, 2];

     testArr1.splice(1, 1, 8);

     alert(testArr1.toString());//1,8,3,4,2

5.js数组shift用法

    //取出数组中的首个元素返回，数组删除第一个元素

   //例子

    var testArr = [1, 3, 4, 2];

     var k=  testArr.shift();

     alert(testArr.toString());//3,4,2

     alert(k);//

有了这些基础知识，咱们可以开始打牌了，假设就一个人摸牌，底牌是随机的，我们每次摸来一张牌的时候就要把他插到手上的牌中，保证顺序是从小到大！

第一步：首先我们要写一个生产扑克牌对象的方法：

 /*工厂模式创建各种牌

      *number:牌上的数字

      *type:牌的花色

      */

     var Cards = (function () {

         var Card = function (number, type) {

             this.number = number;

             this.type = type;

         }

         return function (number, type) {

             return new Card(number, type);

         }

     })()

第二步：创建扑克牌，洗牌，存储

    var RadomCards = [];//随机牌存储数组

    var MyCards = [];//存储摸过来的牌

    //花色0-黑桃 1-梅花 2-方块  3-红桃 4-大鬼  5-小鬼

    //数值0-13代表 鬼,1,2,3,4,5,6,7,8,9,10,J,Q,K;

    function CreatCompeleteCard() {

        var index = 2;

        var arr = [];

        for (var i = 0; i <= 13; i++) {

            if (i == 0) {

                arr[0] = new Cards(i, 4);

                arr[1] = new Cards(i, 5);

            } else {

                for (var j = 0; j <= 3; j++) {

                    arr[index] = new Cards(i, j);

                    index++;

                }

            }

        }

        RadomCards = SortCards(arr);

        Show();//在页面上显示当前的牌

    }

    //洗牌

    function SortCards(arr) {

        arr.sort(function (a, b) {

            return 0.5 - Math.random();

        })

        return arr;

    }

第三步：开始摸牌，摸牌的时候我们首先要判断插入的位置，然后把新牌插入到指定位置，形成新的整齐的顺序

 //摸牌方法

    function GetCards(CardObj) {

        var k = InCardsIndex(MyCards, CardObj);//考虑下插入的位置

        MyCards.splice(k, 0, CardObj); // 插入形成新的顺序

    }

    /*【获取牌应该插入的位置】

     *arr:当前手里的牌

     *obj:新摸到的牌

     */

    function InCardsIndex(arr, obj) {

        var len = arr && arr.length || 0;

        if (len == 0) {

            return 0;

        }else if (len == 1) {

            if (obj.number >= arr[0].number) {

                return 1;

            } else {

                return 0;

            }

        } else {

            var backi = -1;

            for (var i = 0; i < len; i++) {

                if (obj.number <= arr[i].number) {

                    backi = i;

                    break;

                }

            }

            if (backi == -1) {

                backi = len;

            }

            return backi;

        }

    }

好啦！通过html上的button按钮出发Start来摸牌，点一次摸一张牌！并展示出来

  function Start() {//摸牌方法，一次摸一张

        if (RadomCards.length > 0) {

            GetCards(RadomCards.shift());

            Show();

        } else {

            alert("没有了");

        }

    }

//该show方法是用来在页面展示当前牌的动向

    function Show() {

        var lenOld = RadomCards.length;

        var lenNew = MyCards.length;

        var html = "";

        for (var i = 0; i < lenOld; i++) {

            html += "<div class='pai'><b>" + RadomCards[i].type + "</b>-<div class='nu'>" + RadomCards[i].number + "</div></div>";

        }

        document.getElementById("old").innerHTML=html;

        html = "";

        for (var i = 0; i < lenNew; i++) {

            html += "<div class='pai new'><b>" + MyCards[i].type + "</b>-<div class='nu'>" + MyCards[i].number + "</div></div>";

        }

        document.getElementById("new").innerHTML=html;

    }

上html和css的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <meta http-equiv="content-type" content="text/html;charset=utf-8" />

    <style type="text/css">

        .boom{

            width: 50px;

            height: 50px;

            border: solid 1px red;

            position: absolute;

            top: 5px;

            left: 5px;

        }

        .pai

        {

            width: 50px;

            height: 100px;

            border: solid 1px red;

            margin-left: 3px;

            float: left;

        }

        .new

        {

            border: solid 1px blue;

        }

        .nu

        {

            text-align:center;

            font-size:24px;

            margin-top:25px;

        }

    </style>

</head>

<body>

    <!-- <div class="boom"></div>-->

    <input type="button" value="开始" onclick="CreatCompeleteCard()" />

    <input type="button" value="摸牌" onclick="Start()" />

    <br/>

    底牌：<div id="old"></div>

    <div style="clear: both"></div>

    <hr />

    我摸到的牌：<div id="new"></div>

</body>

最终效果如下：

再附上下载地址

用javascript把扑克牌理理顺！的更多相关文章

  1. javascript练习-扑克牌

    下面用枚举类型来实现一副扑克牌的类: //定义一个玩牌的类 function Card(suit,rank){ function inherit(p){ if(p==null) throw TypeE ...

  2. R语言学习笔记-机器学习1-3章

    在折腾完爬虫还有一些感兴趣的内容后,我最近在看用R语言进行简单机器学习的知识,主要参考了<机器学习-实用案例解析>这本书. 这本书是目前市面少有的,纯粹以R语言为基础讲解的机器学习知识,书 ...

  3. 各式 Web 前端開發工具整理

    程式碼編寫工具 (Coding Tools) 工作流程/建置/組合 (Workflow/Builds/Assemblers) lumbar brunch grunt lineman yeoman Ta ...

  4. 使用Jquery Mobile设计Android通讯录

    本系列教程将指导大家一步步使用Jquery Mobile设计一个Android的通讯录应用.其中在应用的界面部分,将使用jQuery Mobile框架,并且会指导大家如何使Android中提供的web ...

  5. C#应用视频教程3.1 USB工业相机测试

    图像处理是工控很有价值的一个领域,比如人脸识别,车牌识别,还有产品的位置识别,瑕疵检测,对于个人学习来说,我们无法直接上手几万块的成熟工业相机(高端的康耐视要6万左右,而且是黑白的,要测试一些带颜色的 ...

  6. Regular Expression 範例

    Regular expression 被實作於各種語言中,可以用來對字串做 比對 擷取 分隔 這幾類的處理.以下是 JavaScript的處理範例. 各位看官,可以按F12開啟 brower 的 de ...

  7. 轮廓检测论文解读 | 整体嵌套边缘检测HED | CVPR | 2015

    主题列表:juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, gr ...

  8. chrome插件开发学习（一）

    两个不错的网址: 360chrome插件开发文档:http://open.chrome.360.cn/extension_dev/manifest.html 图灵 chrome插件开发于应用 电子书: ...

  9. JavaScript一个简易枚举类型实现扑克牌

    <script type="text/javascript"> /** * 这个函数创建一个新的枚举类型,实参对象表示类的每个实例的名字和值 * 返回值是一个构造函数, ...

随机推荐

  1. [WebView其中一项研究]:Web Apps基本介绍

    今天,我们开始了解WebView,以及Web Apps发展,从主要内容Android实际的例子来解释正式文件和后续. (博客地址:http://blog.csdn.net/developer_jian ...

  2. SQL Server中TempDB管理（版本存储区的一个example）

    原文:SQL Server中TempDB管理(版本存储区的一个example) 原文来自: http://blogs.msdn.com/b/sqlserverstorageengine/archive ...

  3. DOM笔记2

    <!-- 节点类型检查 if(someNode.nodeType==ElementNode){ alert("Node is an element"); } 或者 if(so ...

  4. 例如找出令人信服的权威C++中间malloc与new

    例如找出令人信服的权威C++中间malloc与new 问题: 非常多人都知道malloc与new都是用来申请空间用的,开辟空间来源于堆中. 可是在C++中却非常少用malloc去申请空间,为什么? 以 ...

  5. FastJson基本使用

    在发展中Android的过程中.假设我们常与server联系,更新数据等,然后,json它必须是一个良好的数据格公式,但随着json.使用原生的解析也能够,可是非常不高效,所以这里介绍两种json数据 ...

  6. 新秀翻译（两）——使用Java通用配置模板方法模式

    假设你发现你已经非常重码,你可能会考虑使用模板的方法来消除easy重复错误代码.下面是一个示例:以下两类,他完成了几乎相同的功能: 实例化并初始化一个Reader来读取CSV文件. 读取每一行并解析: ...

  7. 前端插件@user

    分享一个 @user 前端插件   开源地址:https://github.com/yuezhongxin/Mention.js 插件效果:类似于微博或 github 中 @user 列表效果. 这是 ...

  8. debian(wheezy) chrome beta 38.0.2x.xxx Shockwave Flash was crashed 该解决方案崩溃.

    版本号chrome beta升级到38.0.2x.xxx什么时候, flash他挂了. 调试 ./libpepflashplayer.so: /lib/x86_64-linux-gnu/libc.so ...

  9. zju2676 Network Wars 分数规划+网络流

    题意:给定无向图,每条边有权值,求该图的一个割集,是的该割集的平均边权最小 Amber的<最小割模型在信息学竞赛中的应用>中讲的很清楚了. 二分答案k,对每条边进行重新赋值为原边权-k,求 ...

  10. Java新手如何学习Spring、Struts、Hibernate三大框架？（转）

    整理知乎大牛答案: 1.入门看文档(blog,书籍等等),深入理解配置文件的含义(Spring.Struts.Hibernate); 2.遇到问题,自己动手解决,如果解决了,为什么这样解决?(凡事总问 ...