javascript實例--教你實現(xiàn)撲克牌洗牌功能
更新時間：2014年05月15日 11:26:00 作者：
我們一般都會按照順序把隨機摸過來的牌從小到大的順序在手上理整齊（記得小時候打牌兩副牌手都抓不過來），這篇隨筆就是想通過實現(xiàn)這個功能來熟悉下js中排序數(shù)組等相關知識。
我們一般都會按照順序把隨機摸過來的牌從小到大的順序在手上理整齊（記得小時候打牌兩副牌手都抓不過來），這篇隨筆就是想通過實現(xiàn)這個功能來熟悉下js中排序數(shù)組等相關知識。
用到知識點：
1.工廠方式創(chuàng)建對象
2.js數(shù)組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()隨機數(shù)
Math.random();//0-1 取得的隨機數(shù)大于等于0且小于1
4.js數(shù)組splice用法
復制代碼 代碼如下:
//第一個參數(shù)是插入的起始位置
//第二個參數(shù)是從起始位置開始刪除元素的個數(shù)
//第三個參數(shù)是在起始位置開始插入的元素
//例子
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數(shù)組shift用法
復制代碼 代碼如下:
//取出數(shù)組中的首個元素返回，數(shù)組刪除第一個元素
//例子
var testArr = [1, 3, 4, 2];
var k= testArr.shift();
alert(testArr.toString());//3,4,2
alert(k);//1
有了這些基礎知識，咱們可以開始打牌了，假設就一個人摸牌，底牌是隨機的，我們每次摸來一張牌的時候就要把他插到手上的牌中，保證順序是從小到大！
第一步：首先我們要寫一個生產(chǎn)撲克牌對象的方法：
復制代碼 代碼如下:
/*工廠模式創(chuàng)建各種牌
*number:牌上的數(shù)字
*type:牌的花色
*/
var Cards = (function () {
var Card = function (number, type) {
this.number = number;
this.type = type;
}
return function (number, type) {
return new Card(number, type);
}
})()
第二步：創(chuàng)建撲克牌，洗牌，存儲
復制代碼 代碼如下:
var RadomCards = [];//隨機牌存儲數(shù)組
var MyCards = [];//存儲摸過來的牌
//花色0-黑桃 1-梅花 2-方塊 3-紅桃 4-大鬼 5-小鬼
//數(shù)值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按鈕出發(fā)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的代碼編輯器，CodeMirror支持大量語言的語法高亮,也包括css,html,js等的高亮顯示。此外，CodeMirror還支持代碼自動完成、搜索/替換、HTML預覽、行號、選擇/搜索結果高亮、可視化tab、代碼自動格式等2017-03-03
JavaScript設計模式--簡單工廠模式實例分析【XHR工廠案例】
這篇文章主要介紹了JavaScript設計模式--簡單工廠模式,結合實例形式分析了JavaScript設計模式中簡單工廠模式原理與XHR工廠應用案例,需要的朋友可以參考下2020-05-05
前端圖片懶加載(lazyload)的實現(xiàn)方法(提高用戶體驗)
圖片懶加載又稱圖片延時加載、惰性加載，即在用戶需要使用圖片的時候加載，這樣可以減少請求，節(jié)省帶寬，提高頁面加載速度，相對的，也能減少服務器壓力,下面通過本文給大家分享圖片懶加載lazyload的實現(xiàn)方法，感興趣的朋友一起看看吧2017-08-08
openlayers4.6.5實現(xiàn)距離量測和面積量測
這篇文章主要為大家詳細介紹了openlayers4.6.5實現(xiàn)距離量測和面積量測，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
今天在整理以前寫過的一段根據(jù)周期值自動計算下次執(zhí)行日期的js代碼，發(fā)現(xiàn)一bug,我使用parseInt對源數(shù)據(jù)串進行轉換，當輸入類似：2009-05-05時，parseInt將把串的05做8進制轉換，這樣結果自然就不對了。2009-05-05
bootstrap-table.js擴展分頁工具欄(增加跳轉到xx頁)功能
這篇文章主要介紹了bootstrap-table.js擴展分頁工具欄，增加跳轉到xx頁功能，由于小編的水平停留在dom級，此次擴展只支持頁面上的表格，如果大家有好的建議歡迎提出2017-12-12
這篇文章主要介紹了可以用JavaScript實現(xiàn)的常用的三種網(wǎng)頁特效：offset系列、client系列、scroll系列。文中示例代碼簡潔易懂，感興趣的小伙伴可以了解一下2021-12-12
這篇文章主要給大家介紹了關于Webpack按需加載打包chunk命名的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Webpack具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-09-09
本文主要分享了js實現(xiàn)打地鼠小游戲的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了javascript實現(xiàn)點擊圖片切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04