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语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
JS获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
jquery.post用法之type设置问题
Feb 24 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
微信小程序实现圆形进度条动画
Nov 18 Javascript
webpack proxy 使用(代理的使用)
Jan 10 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 信息采集程序代码
2009/03/17 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
php使用websocket示例详解
2014/03/12 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
Django中的Model操作表的实现
2018/07/24 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
python pycharm的安装及其使用
2019/10/11 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
python线程优先级队列知识点总结
2021/02/28 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
质检部经理岗位职责
2014/02/19 职场文书
平面设计专业求职信
2014/08/09 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
房屋认购协议书
2015/01/29 职场文书
个人工作能力自我评价
2015/03/05 职场文书
反邪教观后感
2015/06/11 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
dubbo服务整合zipkin详解
2021/07/26 Java/Android
Golang连接并操作MySQL
2022/04/14 MySQL
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python