洗牌方法-----JS陣列隨機排序
阿新 • • 發佈:2019-01-04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box {
width: 845px;
height: 955px;
background-color: #666666;
border: 5px solid #993300;
function update(){ var str = ""; var card = []; var n = 0; for(i = 0 ; i < 4 ; i++){ this.suit = arr[i]; for(k = 0 ; k < 13 ; k++){ this.face = arr2[k]; card[n] = this.suit + this.face; n++; } } card[52] = '小王'; card[53] = '大王'; this.card = card; return card; }
function update(){ var str = ""; var card = []; var n = 0; for(i = 0 ; i < 4 ; i++){ this.suit = arr[i]; for(k = 0 ; k < 13 ; k++){ this.face = arr2[k]; card[n] = this.suit + this.face; n++; } } card[52] = '小王'; card[53] = '大王'; this.card = card; return card; }
border-radius: 20px; padding: 10px; margin: 20px auto; } #box div { float: left; width: 100px; height: 100px; color: #ffffff; background-color: #cc9900; border-radius: 10px; margin: 10px; text-align: center; font-weight: bold; font: 30px/90px "Lucida Grande", "Trebuchet MS", sans-serif; } #box .car{background-color: #9999FF; }</style></head><body><div id='box'></div><button onclick="shulle(card)">洗牌</button><script>var arr = ['紅桃','方片','黑桃','梅花'];var arr2 = ['A',2,3,4,5,6,7,8,9,10,'J','Q','K'];//生成一副撲克牌function update(){var str = "";var card = [];var n = 0;for(i = 0 ; i < 4 ; i++){this.suit = arr[i];for(k = 0 ; k < 13 ; k++){this.face = arr2[k];card[n] = this.suit + this.face;n++;}}card[52] = '小王'; card[53] = '大王';this.card = card;return card; }function upcard(){var str = '';for (var i = 0; i < card.length; i++){ //生成div以生成的數字命名 str += "<div class='car' id = "+card[i]+">"+card[i]+"</div>"; } document.getElementById("box").innerHTML = str; }//洗牌的方法function shulle (){function randomSort(a,b){return Math.random() > 0.5 ? -1 : 1;}card.sort(randomSort);upcard();return card;}var card = update();upcard();</script></body></html>
今天嘗試建立一副撲克牌
首先是生成撲克牌
var arr = ['紅桃','方片','黑桃','梅花'];
var arr2 = ['A',2,3,4,5,6,7,8,9,10,'J','Q','K'];
function update(){
var str = "";
var card = [];
var n = 0;
for(i = 0 ; i < 4 ; i++){
this.suit = arr[i];
for(k = 0 ; k < 13 ; k++){
this.face = arr2[k];
card[n] = this.suit + this.face;
n++;
}
}
card[52] = '小王';
card[53] = '大王';
this.card = card;
return card;
}
使用了雙迴圈的方法,先定義兩個陣列儲存花色和數字,然後用兩個迴圈創造組合生成帶花色的牌,最後直接定義生成大王小王
為了讓洗牌的效果顯著一點,用upcard將卡牌粗略的顯示出來,這裡的方法借鑑了前幾天看到的 @天際的海浪 的2048遊戲中數字塊的顯示方法
function upcard(){
var str = '';
for (var i = 0; i < card.length; i++){
//生成div以生成的數字命名
str += "<div class='car' id = "+card[i]+">"+card[i]+"</div>";
}
document.getElementById("box").innerHTML = str;
}
接著是洗牌
function shulle (){
function randomSort(a,b){
return Math.random() > 0.5 ? -1 : 1;
}
card.sort(randomSort);
upcard();
return card;
}
這裡使用了陣列中的sort方法,sort方法中的引數的正負影響著排序的正反,這裡使用Math.random生成一個0~1的數字,和0.5去比較
大於0.5返回-1,否則返回1,這樣就可以打亂陣列中資料的順序。
另外在網上還看到另外的方法
function shuffle(arr) {
var i, j,temp;
for (i = arr.length - 1; i > 0; i--) {
//j為要隨機的位置
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}
迴圈length-1次,每次隨機挑選兩個陣列中的資料進行交換位置,