JavaScript の例 -- ポーカー カード シャッフル関数の実装方法を教えます_JavaScript スキル

私たちは通常、ランダムに引かれたカードを小さいものから大きいものへ順番に並べます (私が子供の頃、2 組のカードを捕まえることができなかったのを覚えています)。このエッセイは、この機能に慣れるためのものです。 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 配列スプライスの使用法

コードをコピー コードは次のとおりです:

//最初のパラメータは開始位置です。挿入の
//2 番目のパラメータは開始位置から削除される要素の数です
//3 番目のパラメータは開始位置から挿入される要素です
//Example
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 配列シフトの使用法

コードをコピー コードは次のとおりです:

// の最初の要素を取り出します。配列を返し、その配列を返します。 最初の要素を削除します。
//Example
var testArr = [1, 3, 4, 2];
var k= testArr.shift();
alert( testArr.toString()) ;//3,4,2
alert(k);//1

これらの基本的な知識を踏まえて、1 人がカードを引くたびに、順番を確保するためにそれを手札に挿入する必要があると仮定します。幼少期から大人まで！

ステップ 1: まず、トランプ オブジェクトを生成するメソッドを作成する必要があります:

コードをコピー コードは次のとおりです:

/*ファクトリー モードではさまざまなカードが作成されます
*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);
}
})()

ステップ 2: トランプを作成し、シャッフルして保存します

コードをコピー コードは次のとおりです:

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 CreateCompeleteCard() {
varindex = 2;
var arr = [];
for (var i = 0; i If (i == 0) {
arr[0] = 新しいカード(i, 4);
arr[1] = 新しいカード(i, 5);
} else {
for ( var j = 0; j arr[index] = 新しいカード(i, j);
インデックス ;
}

RadomCards = SortCards(arr) );
Show();// 現在のカードをページに表示します
}
// カードをシャッフルします
function SortCards(arr) {
arr .sort(function (a, b) {
0.5 を返す - Math.random();
ステップ 3: カードを引くときは、まず挿入位置を決定し、次に新しいカードを指定された位置に挿入して、新しい順序を形成する必要があります

コードをコピー

コードは次のとおりです:

//カードの引き方
function GetCards(CardObj) {
var k = InCardsIndex(MyCards, CardObj);//挿入位置を考える
MyCards.splice(k, 0 , CardObj); // 新しいシーケンスを形成するために挿入します
}
/*[カードを挿入する位置を取得します]
*arr: 現在手元にあるカード
*obj:新しく描かれたカード
*/
function InCardsIndex(arr, obj) {
var len = arr && arr.length ||
if (len == 0) {
return 0 ;
Return 0;
}
} else {
var backi = -1;
for (var i = 0; i < len; i ) {

if（obj。number＆lt; = arr [i] .number）{
if（backi == -1）{


わかりました! HTML 上のボタンを使用してカードの描画を開始し、一度に 1 枚ずつクリックしてください。そしてそれを見せてください





コードをコピー


コードは次のとおりです。

function Start() {//方法カードを 1 回引きます。「もうだめ」を 1 枚タッチします。 lenNew = MyCards.length;

var html = "";

lenNew for (var i = 0; i < lenOld ; i ) {

var html = "

" RadomCards[i].type "-

" RadomCards[i].number "

";

}< ;div class='pai new'>" MyCards[i].type "-

" MyCards[i].number "";

} document.getElementById("new").innerHTML =html;

HTML と CSS コードをアップロードします

コードをコピー コードは次のとおりです: