Kami biasanya memilah kartu yang disentuh secara acak secara acak dari kecil ke besar (saya ingat ketika saya masih kecil, pemain tidak dapat menangkap kedua deck kartu). Esai ini adalah untuk mewujudkan fungsi ini untuk membiasakan diri dengan pengetahuan yang relevan tentang penyortiran array dalam JS dan hal -hal lain.
Gunakan Poin Pengetahuan:
1. Buat objek di pabrik
Metode 2.JS Array Sort ()
Salinan kode adalah sebagai berikut:
var testarr = [1, 3, 4, 2];
testarr.sort (function (a, b) {
mengembalikan a - b;
})
waspada (testarr.tostring ()); // 1,2,3,4
testarr.sort (function (a, b) {
mengembalikan b- a;
})
alert (testarr.tostring ()); // 4,3,2,1
3.JS-math.radom () Nomor acak
Math.random (); // 0-1 Angka acak yang diperoleh lebih besar dari atau sama dengan 0 dan kurang dari 1
4. JS Array Penggunaan sambungan
Salinan kode adalah sebagai berikut:
// Parameter pertama adalah posisi mulai dari penyisipan
// Parameter kedua adalah jumlah elemen yang dihapus dari posisi awal
// Parameter ketiga adalah elemen yang mulai dimasukkan pada posisi awal
//contoh
var testarr = [1, 3, 4, 2];
testarr.splice (1, 0, 8);
peringatan (testarr.tostring ()); // 1,8,3,4,2
var testarr1 = [1, 3, 4, 2];
testarr1.splice (1, 1, 8);
peringatan (testarr1.tostring ()); // 1,8,3,4,2
5. JS Array Shift Penggunaan
Salinan kode adalah sebagai berikut:
// Kembalikan elemen pertama dalam array, dan hapus elemen pertama dalam array.
//contoh
var testarr = [1, 3, 4, 2];
var k = testarr.shift ();
peringatan (testarr.tostring ()); // 3,4,2
Peringatan (k); // 1
Dengan pengetahuan dasar ini, kita dapat mulai bermain kartu. Misalkan satu orang menyentuh kartu, kartu Trump acak. Setiap kali kami menggambar kartu, kami harus memasukkannya ke dalam kartu di tangan kami, memastikan bahwa pesanan dari kecil hingga besar!
Langkah 1: Pertama kita perlu menulis metode untuk menghasilkan objek kartu bermain:
Salinan kode adalah sebagai berikut:
/*Buat berbagai kartu dalam mode pabrik
*Nomor: Nomor pada kartu
*Ketik: Warna kartu
*/
var cards = (function () {
var card = fungsi (angka, type) {
this.number = angka;
this.type = type;
}
fungsi pengembalian (angka, ketik) {
mengembalikan kartu baru (nomor, jenis);
}
}) ()
Langkah 2: Buat kartu bermain, kocok, dan simpan
Salinan kode adalah sebagai berikut:
var radomcards = []; // array penyimpanan kartu acak
var mycards = []; // penyimpanan kartu yang Anda sentuh
// warna bunga 0-spad 1-plum Blossom 2-Current 3-Heart 4-Big Ghost 5-Little Ghost
// Nilai 0-13 mewakili hantu, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, j, q, k;
function creatceleteCard () {
indeks var = 2;
var arr = [];
untuk (var i = 0; i <= 13; i ++) {
if (i == 0) {
arr [0] = kartu baru (i, 4);
arr [1] = kartu baru (i, 5);
} kalau tidak {
untuk (var j = 0; j <= 3; j ++) {
arr [index] = kartu baru (i, j);
indeks ++;
}
}
}
Radomcard = sortcards (arr);
Show (); // Tampilkan kartu saat ini di halaman
}
// Tutup kartu
function sortcards (arr) {
arr.sort (function (a, b) {
Return 0,5 - Math.Random ();
})
return arr;
}
Langkah 3: Mulai menyentuh kartu. Saat menyentuh kartu, pertama -tama kita harus menentukan posisi penyisipan, dan kemudian masukkan kartu baru ke posisi yang ditentukan untuk membentuk urutan rapi baru.
Salinan kode adalah sebagai berikut:
// Cara Menyentuh Kartu
function getCards (cardobj) {
var k = incardindex (mycards, cardobj); // Pertimbangkan posisi penyisipan
MyCards.splice (k, 0, cardobj); // masukkan untuk membentuk pesanan baru
}
/*【Dapatkan posisi di mana kartu harus dimasukkan】
*ARR: Kartu saat ini di tangan Anda
*OBJ: Kartu yang baru disentuh
*/
fungsi incardindex (arr, obj) {
var len = arr && arr.length || 0;
if (len == 0) {
kembali 0;
} lain jika (len == 1) {
if (obj.number> = arr [0] .number) {
kembali 1;
} kalau tidak {
kembali 0;
}
} kalau tidak {
var backi = -1;
untuk (var i = 0; i <len; i ++) {
if (obj.number <= arr [i] .number) {
backi = i;
merusak;
}
}
if (backi == -1) {
backi = len;
}
Backi kembali;
}
}
OKE! Mulailah melalui tombol pada HTML untuk menyentuh kartu, klik dan sentuh satu kartu sekaligus! Dan menunjukkannya
Salinan kode adalah sebagai berikut:
function start () {// Cara menyentuh kartu, menyentuh satu per satu
if (radomcards.length> 0) {
GetCard (radomcards.shift ());
Menunjukkan();
} kalau tidak {
peringatan ("tidak");
}
}
// Metode acara ini digunakan untuk menunjukkan pergerakan kartu saat ini di halaman
function show () {
var lenold = radomcards.length;
var lennew = mycards.length;
var html = "";
untuk (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 = "";
untuk (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 ("baru"). innerHtml = html;
}
Kode tentang HTML dan CSS
Salinan kode adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<Html>
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<type style = "text/css">
.ledakan{
Lebar: 50px;
Tinggi: 50px;
Border: Solid 1px Red;
Posisi: Absolute;
Atas: 5px;
Kiri: 5px;
}
.pai
{
Lebar: 50px;
Tinggi: 100px;
Border: Solid 1px Red;
margin-kiri: 3px;
float: kiri;
}
.baru
{
Border: Solid 1px Blue;
}
.nu
{
Teks-Align: tengah;
Ukuran font: 24px;
margin-top: 25px;
}
</tyle>
</head>
<body>
<!-<div> </div>->
<input type = "Tombol" value = "start" onClick = "createCompeleteCard ()" />
<input type = "tombol" value = "Touch the card" ontClick = "start ()" />
<br/>
Kartu Judul: <Div ID = "Lama"> </Div>
<Div style = "Clear: keduanya"> </div>
<hr />
Kartu yang saya sentuh: <div id = "new"> </div>
</body>
</html>