用javascript把扑克牌理理顺！
打扑克的人都知道，比如斗地主！
我们一般都会按照顺序把随机摸过来的牌从小到大的顺序在手上理整齐（记得小时候打牌两副牌手都抓不过来），这篇随笔就是想通过实现这个功能来熟悉下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);//
有了这些基础知识，咱们可以开始打牌了，假设就一个人摸牌，底牌是随机的，我们每次摸来一张牌的时候就要把他插到手上的牌中，保证顺序是从小到大！
第一步：首先我们要写一个生产扑克牌对象的方法：
/*工厂模式创建各种牌
*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>
最终效果如下：
再附上下载地址
用javascript把扑克牌理理顺！的更多相关文章
- javascript练习-扑克牌
下面用枚举类型来实现一副扑克牌的类: //定义一个玩牌的类 function Card(suit,rank){ function inherit(p){ if(p==null) throw TypeE ...
- R语言学习笔记-机器学习1-3章
在折腾完爬虫还有一些感兴趣的内容后,我最近在看用R语言进行简单机器学习的知识,主要参考了<机器学习-实用案例解析>这本书. 这本书是目前市面少有的,纯粹以R语言为基础讲解的机器学习知识,书 ...
- 各式 Web 前端開發工具整理
程式碼編寫工具 (Coding Tools) 工作流程/建置/組合 (Workflow/Builds/Assemblers) lumbar brunch grunt lineman yeoman Ta ...
- 使用Jquery Mobile设计Android通讯录
本系列教程将指导大家一步步使用Jquery Mobile设计一个Android的通讯录应用.其中在应用的界面部分,将使用jQuery Mobile框架,并且会指导大家如何使Android中提供的web ...
- C#应用视频教程3.1 USB工业相机测试
图像处理是工控很有价值的一个领域,比如人脸识别,车牌识别,还有产品的位置识别,瑕疵检测,对于个人学习来说,我们无法直接上手几万块的成熟工业相机(高端的康耐视要6万左右,而且是黑白的,要测试一些带颜色的 ...
- Regular Expression 範例
Regular expression 被實作於各種語言中,可以用來對字串做 比對 擷取 分隔 這幾類的處理.以下是 JavaScript的處理範例. 各位看官,可以按F12開啟 brower 的 de ...
- 轮廓检测论文解读 | 整体嵌套边缘检测HED | CVPR | 2015
主题列表:juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, gr ...
- chrome插件开发学习（一）
两个不错的网址: 360chrome插件开发文档:http://open.chrome.360.cn/extension_dev/manifest.html 图灵 chrome插件开发于应用 电子书: ...
- JavaScript一个简易枚举类型实现扑克牌
<script type="text/javascript"> /** * 这个函数创建一个新的枚举类型,实参对象表示类的每个实例的名字和值 * 返回值是一个构造函数, ...
随机推荐
- vim cheat sheet
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzE1Mjg5NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- libsvm工具箱C++编程实践2
转载请注明出处 http://blog.csdn.net/u013491262/article/details/37344193 点击打开链接 上周因为皮肤有点过敏,去医院来来回回一周. 前几天 ...
- FZU2126:消除类游戏(DP)
Problem Description S近期在玩一种游戏. 这样的游戏的规则是一个一个地往一个栈里放有颜色的球,当栈顶连续k个球颜色同样时.这k个球立马同一时候消失. 如今S已经往栈里放了n个球,他 ...
- 【二分法】 HDU 2446 Shell Pyramid
意甲冠军:非常多,形成一个金字塔球 文章x层 x*(x+1)/ 2 球 给你个S 金字塔的一层代表第一数字向下S球 它是其中 这层中的第几行 第几列 公式 1 : x*(x+1)*(x+2)/ 6 ...
- Hystrix提高系统可用性
使用Hystrix提高系统可用性 今天稍微复杂点的互联网应用,服务端基本都是分布式的,大量的服务支撑起整个系统,服务之间也难免有大量的依赖关系,依赖都是通过网络连接起来. (图片来源:https:// ...
- iOS：删除小程序
//Applet的批次从父视图中移除 NSArray *subViews = [_scrollView subviews]; if([subViews count] != 0) { [subViews ...
- MySQL学习系列2--MySQL执行计划分析EXPLAIN
原文:MySQL学习系列2--MySQL执行计划分析EXPLAIN 1.Explain语法 EXPLAIN SELECT …… 变体: EXPLAIN EXTENDED SELECT …… 将执行 ...
- 解决 TortoiseGit 诡异的 Bad file number 问题(转)
问题描述 昨天,以及今天(2014-11-29),使用 TortoiseGit 时碰到了一个诡异的问题. 卸载,清理注册表,重装,重启,各种折腾以后,还是不能解决. 但是23.45分一过,突然灵光一闪 ...
- C++ - new与malloc的差别
malloc是C++语言的标准库函数:而new是C++语言中的操作符. new返回指定类型的指针,而且能够自己主动计算所需空间的大小:而malloc必需要由用户自己计算所需空间大小,并在返回后强行转换 ...
- HDU 4831 Scenic Popularity （段树）
Scenic Popularity Problem Description 临近节日,度度熊们近期计划到室外游玩公园.公园内部包含了非常多的旅游景点区和歇息区,因为旅游景点非常热门,导致景点区和歇息区 ...