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 Cookie 直接浏览网站分网址
Dec 08 Javascript
IE6下JS动态设置图片src地址问题
Jan 08 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
js实现YouKu的漂亮搜索框效果
Aug 19 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 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控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
斜45度寻路实现函数
2009/08/20 Javascript
js的逻辑运算符 ||
2010/05/31 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
用Pygal绘制直方图代码示例
2017/12/07 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
Python异常处理例题整理
2019/07/07 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
商场主管竞聘书
2014/03/31 职场文书
教师教学评估方案
2014/05/09 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python
详解Golang如何优雅的终止一个服务
2022/03/21 Golang
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL