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 相关文章推荐
JavaScript获取GridView选择的行内容
Apr 14 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
加载jQuery后$冲突的解决办法
Jul 09 Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
纯JS代码实现气泡效果
May 04 Javascript
微信小程序 购物车简单实例
Oct 24 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
8 个有用的JS技巧(推荐)
Jul 03 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 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相当简单的分页类
2008/10/02 PHP
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
JavaScript实现网页动态生成表格
2020/11/25 Javascript
Python中统计函数运行耗时的方法
2015/05/05 Python
python处理html转义字符的方法详解
2016/07/01 Python
Python管理Windows服务小脚本
2018/03/12 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
python Tensor和Array对比分析
2020/01/08 Python
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
中职生自荐信
2013/10/13 职场文书
销售顾问的岗位职责
2013/11/13 职场文书
临床医师专业个人自我评价
2014/01/08 职场文书
考试诚信承诺书
2014/05/23 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
80后婚前协议书范本
2014/10/24 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
长城导游词400字
2015/01/30 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python