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

我们一般都会按照顺序把随机摸过来的牌从小到大的顺序在手上理整齐（记得小时候打牌两副牌手都抓不过来），这篇随笔就是想通过实现这个功能来熟悉下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. Spark Executor Driver资源调度汇总

    一.简介 于Worker Actor于,每次LaunchExecutor这将创建一个CoarseGrainedExecutorBackend流程.Executor和CoarseGrainedExecu ...

  2. 转让malloc()该功能后，发生了什么事内核？附malloc()和free()实现源

    特此声明:在本文中,引用另一篇文章和帖子,结合的概括的理解malloc()函数的实现机制. 我们常常会在C程序中调用malloc()函数动态分配一块连续的内存空间并使用它们.那么,这些用户空间发生的事 ...

  3. Kinect开发笔记之二Kinect for Windows 2.0新功能

    这是本博客翻译文档的第一篇文章.笔者已经苦逼的竭尽全力的在翻译了.但无奈英语水平也是非常有限.不正确或者不妥当不准确的地方必定会有,还恳请大家留言或者邮件我以批评指正.我会虚心接受. 谢谢大家.   ...

  4. SQL Server 2008 R2 性能计数器详细列表（一）

    原文:SQL Server 2008 R2 性能计数器详细列表(一) SQL Server Backup Device 计数器: 可监视用于备份和还原操作的 Microsoft SQL Server ...

  5. Java 新特性(3) - JDK7 新特性

    http://www.ibm.com/developerworks/cn/java/j-lo-jdk7-1/ JSR292:支持动态类型语言(InvokeDynamic) 近 年来越来越多的基于 JV ...

  6. C++ STL它vector详细解释

    Vectors    vector它是C++标准模板库部分,它是一种多用途,你可以使用各种数据结构和算法的模板类和库. vector其原因被认为是一个容器.因为它可以被存储为各种类型的对象作为容器.一 ...

  7. Cocos2d-x使用Luajit将Lua脚本编译成bytecode，启用加密

    http://www.cocoachina.com/bbs/read.php?tid=205802 lua脚本进行加密,查了一下相关的资料 ,得知lua本身能够使用luac将脚本编译为字节码(byte ...

  8. OUC_OptKernel_oshixiaoxiliu_好题推荐

    poj1112 Team Them Up! 补图二分图+dp记录路径codeforces 256A Almost Arithmetical Progression dp或暴力 dp[i][j] = d ...

  9. 如何将linux用在开发环境中的

    如何将linux用在开发环境中的 1.我为什么要写这篇文章 一直想深入学习一下linux的使用,于是将家里的笔记本装了linux系统,但是要将自己的系统打造一个适合开发的环境确实是一件费心费力的事,而 ...

  10. React.js再探（二）

    上文中说到了组件了. 我们使用组件的目的最大莫过于复用,提供生产效率. 那么,这时候组件就应该能够提供一些”api”出来,让开发者去定义在不同场景下的不同表现,比如,行为或外观等. 而这些“api”就 ...