用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"> /** * 这个函数创建一个新的枚举类型,实参对象表示类的每个实例的名字和值 * 返回值是一个构造函数, ...
随机推荐
- SQL 2008 SP2 找不到SQL Server Engine
原文:SQL 2008 SP2 找不到SQL Server Engine 最近我有个客户碰到一个很奇怪的问题.他安装SQL server 2008 SP2的时候, SP2的安装程序无法找到SQL se ...
- 编写高性能Javascript
编写高性能Javascript 多年来,Javascript一直在web应用开发中占据重要的地位,但是很多开发者往往忽视一些性能方面的知识,特别是随着计算机硬件的不断升级,开发者越发觉得Javascr ...
- java 正则表达式提取html纯文本
本文来自我的个人博客: java 正则表达式提取html纯文本 做内容的大家都知道,从html中直接提取纯文本是一个非常大的问题.现将我做的正则匹配贴上: import java.util.regex ...
- Google调试技巧总结
工欲善其事 工欲善其事,必先利器. Google调试面板一一介绍:F12回想一下大家都应该知道,哈哈 element面板 这个面板显示了页面所有html代码.用于调试css代码.右側展示左側相应选择元 ...
- MapReduce架构和算法(2)
一个.combiner计划 每map它可能会产生大量的输出,combiner的作用是map输出端先做合并.reducer的数据量. combiner最基本是实现本地key的归并,combiner具有类 ...
- Grunt 之 Connect
前端开发 Grunt 之 Connect 在前端开发过程中,我们需要在开发过程中,将开发中的站点部署到服务器上,然后,在浏览器中查看实际的效果,在 Grunt 环境下,可以直接使用集成在 Grunt ...
- ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传
先上几张图更直观展示一下要实现的功能.本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...
- STL 源代码分析 算法 stl_algo.h -- pre_permutation
本文senlie原版的,转载请保留此地址:http://blog.csdn.net/zhengsenlie pre_permutation ------------------------------ ...
- Android Push Notifications using Google Cloud Messaging (GCM), PHP and MySQL
http://www.androidhive.info/2012/10/android-push-notifications-using-google-cloud-messaging-gcm-php- ...
- Android开发模板------自己定义SimpleCursorAdapter的使用
使用SimpleCursorAdapter所设计的table(数据表)一定要有_id字段名称,否则会出现"找不到_id"的错误 SimpleCursorAdapter直接使用的方法 ...