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

2024-09-28 03:22:42

我们一般都会按照顺序把随机摸过来的牌从小到大的顺序在手上理整齐（记得小时候打牌两副牌手都抓不过来），这篇随笔就是想通过实现这个功能来熟悉下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来摸牌，点一次摸一张牌！并展示出来

代码如下:

上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>
    
    <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中的枚举功能

由于 Microsoft AJAX Library 对于 JavaScript 进行了大幅扩展, 枚举这个常用的功能当然也被加进去了, 本次就是来探讨 JavaScript 的枚举功能. 由于范例很简单, 所以直接看 HTML 标签就 OK 了复制代码代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></t
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用

如下所示: //实现枚举类型,扑克牌应用 function creatEnum(p){ //构造函数 var Enumeration = function(){throw 'can not Instantiate Enumerations';}; //重写原型并将原型赋值给变量proto var proto = Enumeration.prototype = { constructor:Enumeration, toString:function(){return this.name;}, va
javascript模拟枚举的简单实例

如下,我们来定义Week的枚举: 复制代码代码如下: if(typeof WeekDay == "undefined"){ var WeekDay = {}; WeekDay.Sunday = 0; WeekDay.Monday = 1; WeekDay.Tuesday = 2; WeekDay.Wedesay = 3; WeekDay.Thursday = 4; WeekDay.Friday = 5; WeekDay.Saturday = 6; } 测试如下:alert(WeekD
javascript实例--教你实现扑克牌洗牌功能

我们一般都会按照顺序把随机摸过来的牌从小到大的顺序在手上理整齐(记得小时候打牌两副牌手都抓不过来),这篇随笔就是想通过实现这个功能来熟悉下js中排序数组等相关知识. 用到知识点: 1.工厂方式创建对象 2.js数组sort()方法复制代码代码如下: var testArr = [1, 3, 4, 2]; testArr.sort(function (a,b) { return a - b; }) alert(testArr.toString());//
JavaScript数组随机排列实现随机洗牌功能

本文实例讲述了JavaScript数组随机排列实现随机洗牌功能的方法.分享给大家供大家参考.具体分析如下: 这段JS代码可以对数组内的元素进行随机排列,这个非常有用,比如我们在玩扑克牌的时候可以让扑克牌进行排列,也就是电脑洗牌. var list = [1,2,3,4,5,6,7,8,9]; list = list.sort(function() Math.random() - 0.5); Print(list); // prints something like: 4,3,1,2,9,5,6,
Java模拟扑克牌洗牌实现生成52张扑克的方法示例

本文实例讲述了Java模拟扑克牌洗牌实现生成52张扑克的方法.分享给大家供大家参考,具体如下: 要求: 生成52张扑克,模拟扑克牌洗牌,并输出. 实现代码: package com.NCU.ZHANGhuirong; import java.util.ArrayList; import java.util.Collections; public class Card { public String poker(int num) { String str = ""; String[] f
Java实现扑克牌洗牌和发牌

本文实例为大家分享了Java实现扑克牌洗牌发牌的具体代码,供大家参考,具体内容如下实现原理:使用4种花色和13个数字组合成52张牌,放进一个集合中:通过把集合数据排序打乱实现洗牌操作,然后在通过循环把牌抽出来实现发牌操作. 下面是实现代码: import java.util.ArrayList; import java.util.Collections; public class Card { private static ArrayList<String> list = new Array
Java模拟实现扑克牌洗牌和发牌的示例代码

目录一. 需求二. 全局代码 poker.java pokers.java 三. 设计分析 1. 设计一张扑克牌 2. 得到一副新牌 3. 洗牌 4. 发牌一. 需求设计一副新的的扑克牌, 4个花色(♥, ♠, ♦, ♣)对应 1 到 13 , 不算大小王一共52张牌 ; 然后将扑克牌随机打乱顺序 , 最后实现三个人进行摸牌 , 三个人轮流进行摸牌(每次摸一张牌) , 最终每个人手里有五张牌二. 全局代码 poker.java public class poker { private
C++扑克牌的洗牌发牌游戏设计

笔者在大学二年级期间,做过的一次C++程序设计:扑克牌的洗牌发牌游戏.具体内容是:除去大王和小王,将52张扑克牌洗牌,并发出5张牌.然后判断这5张牌中有几张相同大小的牌,是否是一条链,有几个同花等. 笔者在学习他人设计的基础上,完成了自己的程序设计.这里将源程序分享给大家. [1] 文件"card.h" #ifndef CARD_H #define CARD_H #include<string> using namespace std; class Card { publi
python实现斗地主分牌洗牌

本文实例为大家分享了python实现斗地主分牌洗牌的具体代码,供大家参考,具体内容如下 1.建立一个序列,共54个元素,表示一副扑克牌,初始化时是有顺序的. 2.编写一段代码完成洗牌功能,即将刚才的序列从有序的排列变成随机的无序排列. 3.编写一段代码完成切牌功能,即找到一个1-54的随机数,将刚才洗牌后的序列从这个随机数开始. 4.编写一段代码完成发牌功能,将刚才这个切牌后的无序序列,按顺序分发到三个序列中去,并剩余三张底牌(也是一个序列). 5.编写一段代码完成理牌功能,首先将分牌后的每个序
Java实现洗牌发牌的方法

本文实例讲述了Java实现洗牌发牌的方法.分享给大家供大家参考.具体如下: import java.util.*; public class Main { /** * @param args the command line arguments */ static int numbersOfPlayers = 4; static int numbersOfHandCard = 13; public static void main(String[] args) { // TODO code ap
jQuery实现带有洗牌效果的动画分页实例

本文实例讲述了jQuery实现带有洗牌效果的动画分页.分享给大家供大家参考.具体如下: 这款jquery分页示例载入的是一个图片的LI列表,使用jQuery技术将其分为多页显示,在分页的过程中,还加入了动画效果,使整个分页效果看上去很有专业味. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-list-page-flash-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//
JavaScript实现shuffle数组洗牌操作示例

本文实例讲述了JavaScript实现shuffle数组洗牌操作.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

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

相关推荐

随机推荐