عادةً ما نقوم بفرز البطاقات التي تم لمسها عشوائيًا بالترتيب من صغير إلى كبير (أتذكر عندما كنت طفلاً ، لم يتمكن اللاعب من التقاط كلتا الطوابق من البطاقات). هذا المقال هو إدراك هذه الوظيفة للتعرف على المعرفة ذات الصلة بفرز المصفوفات في JS وأشياء أخرى.
استخدم نقاط المعرفة:
1. إنشاء كائنات في المصنع
2. js sort () method ()
نسخة الكود كما يلي:
var testarr = [1 ، 3 ، 4 ، 2] ؛
testarr.sort (وظيفة (أ ، ب) {
إرجاع أ - ب ؛
})
ALERT (TESTARR.TOSTRING ()) ؛ // 1،2،3،4
testarr.sort (وظيفة (أ ، ب) {
إرجاع B- أ ؛
})
ALERT (TESTARR.TOSTRING ()) ؛ // 4،3،2،1
3.js-math.radom () رقم عشوائي
Math.Random () ؛ // 0-1 الرقم العشوائي الذي تم الحصول عليه أكبر من أو يساوي 0 وأقل من 1
4. js استخدام لصق المصفوفة
نسخة الكود كما يلي:
// المعلمة الأولى هي موضع بدء الإدراج
// المعلمة الثانية هي عدد العناصر التي يتم حذفها من موضع البداية
// المعلمة الثالثة هي العنصر الذي يبدأ في إدراجه في موضع البداية
//مثال
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 artray Shift Usage
نسخة الكود كما يلي:
// إرجاع العنصر الأول في الصفيف ، وحذف العنصر الأول في الصفيف.
//مثال
var testarr = [1 ، 3 ، 4 ، 2] ؛
var k = testarr.shift () ؛
ALERT (TESTARR.TOSTRING ()) ؛ // 3،4،2
تنبيه (ك) ؛ // 1
مع هذه المعرفة الأساسية ، يمكننا بدء تشغيل الورق. لنفترض أن شخصًا واحدًا يلمس البطاقات ، فإن بطاقة ترامب عشوائية. في كل مرة نرسم فيها بطاقة ، يتعين علينا إدراجها في البطاقة في أيدينا ، مما يضمن أن يكون الطلب من صغير إلى كبير!
الخطوة 1: أولاً نحتاج إلى كتابة طريقة لإنتاج كائنات بطاقة اللعب:
نسخة الكود كما يلي:
/*إنشاء بطاقات مختلفة في وضع المصنع
*الرقم: الرقم على البطاقة
*اكتب: لون البطاقة
*/
بطاقات var = (function () {
بطاقة var = الدالة (رقم ، اكتب) {
this.number = number ؛
this.type = type ؛
}
وظيفة الإرجاع (الرقم ، اكتب) {
إرجاع بطاقة جديدة (رقم ، اكتب) ؛
}
}) ()
الخطوة 2: إنشاء أوراق اللعب ، وخلطها ، وتخزينها
نسخة الكود كما يلي:
Var RadomCards = [] ؛ // صفيف تخزين البطاقة العشوائي
var mycards = [] ؛ // تخزين البطاقات التي لمستها
// زهرة اللون 0-Spad 1-Plum Blossom 2-Current 3-Heart 4-Big Ghost 5-Little Ghost
// تمثل القيمة 0-13 Ghost ، 1 ، 2 ، 3 ، 4 ، 5 ، 6 ، 7 ، 8 ، 9 ، 10 ، J ، Q ، K ؛
وظيفة CreatCompeletEcard () {
فارس فهرس = 2 ؛
var arr = [] ؛
لـ (var i = 0 ؛ i <= 13 ؛ i ++) {
إذا (i == 0) {
arr [0] = بطاقات جديدة (i ، 4) ؛
arr [1] = بطاقات جديدة (i ، 5) ؛
} آخر {
لـ (var j = 0 ؛ j <= 3 ؛ j ++) {
arr [index] = بطاقات جديدة (i ، j) ؛
فهرس ++ ؛
}
}
}
RadomCards = sortcards (arr) ؛
show () ؛ // إظهار البطاقة الحالية على الصفحة
}
// أغلق البطاقات
وظيفة فرز الوظائف (arr) {
arr.sort (وظيفة (a ، b) {
إرجاع 0.5 - Math.Random () ؛
})
إرجاع arr ؛
}
الخطوة 3: ابدأ لمس البطاقات. عند لمس البطاقات ، يجب أولاً تحديد موضع الإدراج ، ثم أدخل البطاقة الجديدة في الموضع المحدد لتشكيل ترتيب أنيق جديد.
نسخة الكود كما يلي:
// كيفية لمس البطاقة
وظيفة getCards (cardobj) {
var k = valardsindex (mycards ، cardobj) ؛ // النظر في موضع الإدراج
mycards.splice (k ، 0 ، cardobj) ؛ // إدراج لتشكيل طلب جديد
}
/*【احصل على الموضع الذي يجب إدراج البطاقة】
*arr: البطاقة الحالية في يدك
*OBJ: البطاقة التي تم لمسها حديثًا
*/
دالة lardsIndex (ARR ، OBJ) {
var len = arr && arr.length || 0 ؛
if (len == 0) {
العودة 0 ؛
} آخر إذا (len == 1) {
if (obj.number> = arr [0] .number) {
العودة 1 ؛
} آخر {
العودة 0 ؛
}
} آخر {
var backi = -1 ؛
لـ (var i = 0 ؛ i <len ؛ i ++) {
if (obj.number <= arr [i] .number) {
backi = i ؛
استراحة؛
}
}
if (backi == -1) {
backi = len ؛
}
العودة الخلفية.
}
}
نعم! ابدأ من خلال زر الزر الموجود على HTML للمس البطاقة ، ثم انقر وتلمس بطاقة واحدة في وقت واحد! وأظهرها
نسخة الكود كما يلي:
الوظيفة start () {// كيفية لمس البطاقات ، لمس واحدة في وقت واحد
if (radomcards.length> 0) {
getCards (radomcards.shift ()) ؛
يعرض()؛
} آخر {
تنبيه ("لا") ؛
}
}
// يتم استخدام طريقة العرض هذه لإظهار حركة البطاقات الحالية على الصفحة
وظيفة العرض () {
var lenold = radomcards.length ؛
var lennew = mycards.length ؛
var html = "" ؛
لـ (var i = 0 ؛ i <lenold ؛ i ++) {
html + = "<div class = 'pai'> <b>" + radomcards [i] .type + "</b>-<div class = 'nu'>" + radomcards [i] .number + "</viv> </viv>" ؛
}
document.getElementById ("Old"). innerhtml = html ؛
html = "" ؛
لـ (var i = 0 ؛ i <lennew ؛ i ++) {
html + = "<div class = 'pai new'> <b>" + mycards [i] .type + "</b>-<div class = 'nu'>" + mycards [i] .number + "</viv> </viv>" ؛
}
document.getElementById ("new"). innerhtml = html ؛
}
رمز على HTML و CSS
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html>
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<type type = "text/css">
.boom {
العرض: 50 بكسل ؛
الارتفاع: 50 بكسل ؛
الحدود: الصلبة 1 بكسل أحمر.
الموقف: مطلق ؛
أعلى: 5 بكسل ؛
اليسار: 5px ؛
}
.pai
{
العرض: 50 بكسل ؛
الارتفاع: 100px ؛
الحدود: الصلبة 1 بكسل أحمر.
الهامش اليساري: 3px ؛
تعويم: اليسار.
}
.جديد
{
الحدود: صلبة 1 بكسل الأزرق.
}
. لا
{
محاذاة النص: المركز ؛
حجم الخط: 24 بكسل ؛
الهامش: 25 بكسل ؛
}
</style>
</head>
<body>
<!-<viv> </viv>->
<type type = "button" value = "start" onClick = "CreatComePeletEcard ()" />
<type type = "button" value = "المس البطاقة" onClick = "start ()" />
<br/>
بطاقة العنوان: <div id = "old"> </viv>
<div style = "clear: كلاهما"> </div>
<hr />
البطاقة التي لمستها: <div id = "new"> </div>
</body>
</html>