私たちは通常、ランダムにタッチしたカードを小さいものから大規模に整理します（私が子供だったとき、プレーヤーは両方のカードのデッキをキャッチできなかったことを覚えています）。このエッセイは、この機能を実現して、JSなどのソートアレイに関する関連する知識に精通することです。
知識ポイントを使用してください：
1.工場でオブジェクトを作成します
2.js配列sort（）メソッド
コードコピーは次のとおりです。
var testarr = [1、3、4、2];
testarr.sort（function（a、b）{
a -bを返します。
}）
alert（testarr.tostring（））; // 1,2,3,4
testarr.sort（function（a、b）{
b- aを返します。
}）
alert（testarr.tostring（））; // 4,3,2,1
3.js-math.radom（）乱数
math.random（）; // 0-1得られた乱数は0以上、1未満です
4.JS配列スプライスの使用
コードコピーは次のとおりです。
//最初のパラメーターは挿入の開始位置です
// 2番目のパラメーターは、開始位置から削除される要素の数です
// 3番目のパラメーターは、開始位置に挿入され始める要素です
//例
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アレイシフトの使用
コードコピーは次のとおりです。
//配列の最初の要素を返し、配列の最初の要素を削除します。
//例
var testarr = [1、3、4、2];
var k = testarr.shift（）;
alert（testarr.tostring（））; // 3,4,2
アラート（k）; // 1
これらの基本的な知識により、トランプを始めることができます。 1人がカードに触れていると仮定すると、切り札がランダムであるとします。カードを描くたびに、それを手のカードに挿入する必要があり、注文が小さいから大規模なものになるようにします！
ステップ1：最初に、プレーヤーカードオブジェクトを作成する方法を作成する必要があります。
コードコピーは次のとおりです。
/*工場モードでさまざまなカードを作成します
*番号：カードの番号
*タイプ：カードの色
*/
varカード=（function（）{
var card = function（number、type）{
this.number = number;
this.type = type;
}
return function（number、type）{
新しいカード（番号、タイプ）を返します。
}
}）（）
ステップ2：トランプを作成し、シャッフルし、保存します
コードコピーは次のとおりです。
var radomcards = []; //ランダムカードストレージアレイ
var mycards = []; //触れたカードを保存します
//フラワーカラー0スパッド1-プラムブロッサム2電流3ハート4ビッグゴースト5-リトルゴースト
//値0-13はゴースト、1、2、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] =新しいカード（i、4）;
arr [1] =新しいカード（i、5）;
} それ以外 {
for（var j = 0; j <= 3; j ++）{
arr [index] = new Cards（i、j）;
インデックス++;
}
}
}
radomcards = sortcards（arr）;
show（）; //ページに現在のカードを表示します
}
//カードを閉じます
関数並べ替え（arr）{
arr.sort（function（a、b）{
0.5 -math.random（）を返します。
}）
arrを返します。
}
ステップ3：カードのタッチを開始します。カードに触れるときは、最初に挿入位置を決定し、新しいカードを指定された位置に挿入して、新しいきちんとした注文を形成する必要があります。
コードコピーは次のとおりです。
//カードに触れる方法
関数getCards（cardobj）{
var k = incardsindex（mycards、cardobj）; //挿入位置を検討してください
mycards.splice（k、0、cardobj）; //挿入して新しい注文を形成します
}
/*cardカードを挿入する必要がある位置を取得します】
*arr：あなたの手の現在のカード
*OBJ：新しく触れたカード
*/
function incardsindex（arr、obj）{
var len = arr && arr.length || 0;
if（len == 0）{
0を返します。
} else if（len == 1）{
if（obj.number> = arr [0] .Number）{
返品1;
} それ以外 {
0を返します。
}
} それ以外 {
var backi = -1;
for（var i = 0; i <len; i ++）{
if（obj.number <= arr [i] .number）{
backi = i;
壊す;
}
}
if（backi == -1）{
backi = len;
}
Backiを返します。
}
}
わかりました！ HTMLのボタンボタンを開始して、カードにタッチし、1枚のカードをクリックしてタッチします。そしてそれを見せてください
コードコピーは次のとおりです。
function start（）{//カードにタッチする方法、一度に1つずつタッチ
if（radomcards.length> 0）{
getCards（radomcards.shift（））;
見せる（）;
} それ以外 {
アラート（ "no"）;
}
}
//このshowメソッドは、ページ上の現在のカードの動きを表示するために使用されます
関数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">
。ブーム{
幅：50px;
高さ：50px;
境界線：固体1px赤。
位置：絶対;
トップ：5px;
左：5px;
}
.pai
{
幅：50px;
高さ：100px;
境界線：固体1px赤。
マージン左：3px;
フロート：左;
}
。新しい
{
ボーダー：ソリッド1px青。
}
.nu
{
テキストアライグ：センター;
フォントサイズ：24px;
マージントップ：25px;
}
</style>
</head>
<body>
<！ - <div> </div> - >
<入力型= "button" value = "start" onclick = "creatcompeletecard（）" />
<入力型= "ボタン"値= "カードをタッチ" onclick = "start（）" />
<br/>
タイトルカード：<div id = "old"> </div>
<div style = "clear：blos"> </div>
<hr />
私が触れたカード：<div id = "new"> </div>
</body>
</html>