javascript实例--教你实现扑克牌洗牌功能


Posted in Javascript onMay 15, 2014

我们一般都会按照顺序把随机摸过来的牌从小到大的顺序在手上理整齐(记得小时候打牌两副牌手都抓不过来),这篇随笔就是想通过实现这个功能来熟悉下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);//1

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

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

/*工厂模式创建各种牌
*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>
</html>
Javascript 相关文章推荐
图片自动缩小 点击放大
Jul 07 Javascript
extjs render 用法介绍
Sep 11 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
Element实现动态表格的示例代码
Aug 02 Javascript
javascript常用的正则表达式实例
May 15 #Javascript
js生成缩略图后上传并利用canvas重绘
May 15 #Javascript
Jquery性能优化详解
May 15 #Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 #Javascript
Javascript小技巧之生成html元素
May 15 #Javascript
javascript屏蔽右键代码
May 15 #Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 #Javascript
You might like
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
在Python中使用__slots__方法的详细教程
2015/04/28 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
python树的同构学习笔记
2019/09/14 Python
Python类中self参数用法详解
2020/02/13 Python
Python celery原理及运行流程解析
2020/06/13 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
基于Python 函数和方法的区别说明
2021/03/24 Python
继承权公证书
2014/04/09 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
心术观后感
2015/06/11 职场文书
python面向对象版学生信息管理系统
2021/06/24 Python