เรามักจะจัดเรียงการ์ดที่สัมผัสแบบสุ่มตามลำดับจากขนาดเล็กถึงใหญ่ (ฉันจำได้ว่าตอนที่ฉันยังเป็นเด็กผู้เล่นไม่สามารถจับการ์ดทั้งสองใบ) บทความนี้คือการตระหนักถึงฟังก์ชั่นนี้เพื่อทำความคุ้นเคยกับความรู้ที่เกี่ยวข้องเกี่ยวกับการเรียงลำดับอาร์เรย์ใน JS และสิ่งอื่น ๆ
ใช้คะแนนความรู้:
1. สร้างวัตถุในโรงงาน
2.JS Array Sort () วิธีการ
การคัดลอกรหัสมีดังนี้:
var testarr = [1, 3, 4, 2];
testarr.sort (ฟังก์ชั่น (a, b) {
กลับ A - B;
-
Alert (testarr.toString ()); // 1,2,3,4
testarr.sort (ฟังก์ชั่น (a, b) {
กลับ B- A;
-
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);
การแจ้งเตือน (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: ก่อนอื่นเราต้องเขียนวิธีการผลิตวัตถุการ์ดเล่น:
การคัดลอกรหัสมีดังนี้:
/*สร้างการ์ดต่าง ๆ ในโหมดโรงงาน
*หมายเลข: หมายเลขบนการ์ด
*ประเภท: สีของการ์ด
-
var cards = (function () {
var card = function (number, type) {
this.number = number;
this.type = type;
-
ฟังก์ชั่นส่งคืน (หมายเลข, พิมพ์) {
ส่งคืนการ์ดใหม่ (หมายเลขประเภท);
-
-
ขั้นตอนที่ 2: สร้างไพ่เล่นสลับและเก็บไว้
การคัดลอกรหัสมีดังนี้:
var radomcards = []; // อาร์เรย์ที่เก็บการ์ดแบบสุ่ม
var mycards = []; // จัดเก็บการ์ดที่คุณสัมผัส
// ดอกไม้สี 0-spad 1-plum blossom 2 กระแส 3-heart 4-big ghost 5-little ghost
// ค่า 0-13 หมายถึงผี, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, j, q, k;
ฟังก์ชั่น creatCompeleTecard () {
ดัชนี var = 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 [ดัชนี] = การ์ดใหม่ (i, j);
ดัชนี ++;
-
-
-
radomcards = sortcards (arr);
show (); // แสดงการ์ดปัจจุบันบนหน้า
-
// ปิดการ์ด
ฟังก์ชัน SortCards (arr) {
arr.sort (ฟังก์ชั่น (a, b) {
ส่งคืน 0.5 - Math.random ();
-
กลับ arr;
-
ขั้นตอนที่ 3: เริ่มสัมผัสการ์ด เมื่อสัมผัสการ์ดเราต้องกำหนดตำแหน่งการแทรกก่อนจากนั้นแทรกการ์ดใหม่ลงในตำแหน่งที่ระบุเพื่อสร้างลำดับใหม่
การคัดลอกรหัสมีดังนี้:
// วิธีสัมผัสการ์ด
ฟังก์ชั่น getCards (cardobj) {
var k = incardsIndex (mycards, cardobj); // พิจารณาตำแหน่งการแทรก
mycards.splice (k, 0, cardobj); // แทรกเพื่อสร้างคำสั่งซื้อใหม่
-
/*【รับตำแหน่งที่ควรใส่การ์ด】
*arr: การ์ดปัจจุบันในมือของคุณ
*OBJ: การ์ดที่เพิ่งสัมผัสใหม่
-
ฟังก์ชั่น IncardsIndex (arr, obj) {
var len = arr && arr.length || 0;
ถ้า (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 เพื่อสัมผัสการ์ดคลิกและแตะการ์ดทีละใบ! และแสดงให้เห็น
การคัดลอกรหัสมีดังนี้:
function 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 + "</div> </div>";
-
document.getElementById ("เก่า"). innerhtml = html;
html = "";
สำหรับ (var i = 0; i <lennew; i ++) {
html + = "<div class = 'pai ใหม่'> <b>" + mycards [i] .type + "</b>-<div class = 'nu'>" + mycards [i] .number + "</div> </div>";
-
document.getElementById ("ใหม่"). 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">
.BOOM {
ความกว้าง: 50px;
ความสูง: 50px;
ชายแดน: สีแดง 1px ของแข็ง;
ตำแหน่ง: สัมบูรณ์;
ด้านบน: 5px;
ซ้าย: 5px;
-
.pai
-
ความกว้าง: 50px;
ความสูง: 100px;
ชายแดน: สีแดง 1px ของแข็ง;
ขอบซ้าย: 3px;
ลอย: ซ้าย;
-
.ใหม่
-
เส้นขอบ: ทึบ 1px สีน้ำเงิน;
-
.nu
-
TEXT-ALIGN: CENTER;
ขนาดตัวอักษร: 24px;
ขอบด้านบน: 25px;
-
</style>
</head>
<body>
<!-<div> </div>->
<อินพุต type = "button" value = "start" onclick = "creatCompeleTecard ()" />
<อินพุต type = "ปุ่ม" value = "แตะการ์ด" onclick = "start ()" />
<br/>
การ์ดชื่อเรื่อง: <div id = "old"> </div>
<div style = "Clear: ทั้งสอง"> </div>
<HR />
การ์ดที่ฉันสัมผัส: <div id = "new"> </div>
</body>
</html>