<!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 οnclick="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次，每次随机挑选两个数组中的数据进行交换位置，
转载请注明原文地址: https://ju.6miu.com/read-670608.html
