Tambahkan Konsentrasi Game ke Halaman Web dengan JavaScript

Berikut adalah versi gim memori klasik yang memungkinkan pengunjung ke halaman web Anda untuk mencocokkan gambar dalam pola kisi menggunakan JavaScript.

Anda harus menyediakan gambar, tetapi Anda dapat menggunakan gambar apa pun yang Anda suka dengan skrip ini selama Anda memiliki hak untuk menggunakannya di web. Anda juga harus mengubah ukurannya menjadi 60 piksel kali 60 piksel sebelum Anda mulai.

Anda akan memerlukan satu gambar untuk bagian belakang "kartu" dan lima belas untuk "bagian depan".

Pastikan file gambar sekecil mungkin atau gim mungkin membutuhkan waktu terlalu lama untuk dimuat. Dengan versi ini saya telah membatasi skrip hingga 30 kartu karena semua gambar akan membuat halaman lebih lambat untuk memuat. Semakin banyak kartu dan gambar, semakin lambat halaman memuat. Ini mungkin bukan masalah bagi mereka yang memiliki koneksi broadband yang baik, tetapi mereka yang memiliki koneksi yang lebih lambat mungkin menjadi frustrasi pada waktu yang dibutuhkan.

Jika Anda belum pernah memainkan game ini sebelumnya, aturannya sangat sederhana. Ada 30 kotak, atau kartu. Setiap kartu memiliki satu dari 15 gambar, dengan tidak ada gambar yang muncul lebih dari dua kali — ini adalah pasangan yang akan dicocokkan.

Kartu mulai "menghadap ke bawah," menyembunyikan gambar pada 15 pasangan.

Tujuannya adalah untuk mengubah semua pasangan yang cocok dalam waktu sesingkat mungkin.

Putar dimulai dengan Anda memilih satu kartu, lalu memilih yang kedua. Jika mereka cocok, mereka tetap menghadap ke atas; jika mereka tidak cocok, kedua kartu dikembalikan, menghadap ke bawah. Saat bermain, Anda harus mengandalkan memori kartu sebelumnya dan lokasi mereka untuk membuat pertandingan yang sukses.

Dalam versi JavaScript permainan ini, Anda memilih kartu dengan mengkliknya. Jika dua yang Anda pilih cocok maka mereka akan tetap terlihat, jika tidak maka mereka akan menghilang lagi setelah sekitar satu detik.

Ada penghitung waktu di bagian bawah yang melacak berapa lama Anda mencocokkan semua pasangan.

Jika Anda ingin memulai dari awal, cukup tekan tombol penghitung dan seluruh tablo akan diacak ulang dan Anda bisa mulai lagi.

Gambar yang digunakan dalam sampel ini tidak datang dengan skrip, sehingga seperti yang disebutkan, Anda harus memberikan gambar Anda sendiri. Jika Anda tidak memiliki gambar untuk digunakan dengan skrip ini dan tidak dapat membuat sendiri, Anda dapat mencari clipart yang sesuai yang bebas untuk digunakan.

Skrip untuk permainan memori ditambahkan ke halaman web Anda dalam lima langkah.

Langkah 1: Salin kode berikut dan simpan dalam file bernama memoryh.js.

// Permainan Memori Konsentrasi dengan Gambar - Head Script
// hak cipta Stephen Chapman, 28 Februari 2006, 24 Desember 2009
// Anda dapat menyalin skrip ini asalkan Anda mempertahankan pemberitahuan hak cipta

var back = 'back.gif';
var tile = ['img0.gif', 'img1.gif', 'img2.gif', 'img3.gif', 'img4.gif', 'img5.gif', 'img5.gif',
'img6.gif', 'img7.gif', 'img8.gif', 'img9.gif', 'img10.gif', 'img11.gif', '
'img12.gif', 'img13.gif', 'img14.gif'];

function randOrd (a, b) {return (Math.round (Math.random ()) - 0.5);} var im = []; untuk
(var i = 0; i <15; i ++) {im [i] = Gambar baru (); im [i] .src = tile [i]; petak [i] =
''; petak [i + 15] =
petak [i];} fungsi displayBack (i) {document.getElementById ('t' + i) .innerHTML =
'

tinggi = "60" alt = "kembali" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload = mulai; function start () {for (var i = 0; i <= 29; i ++)
displayBack (i); clearInterval (tid); tmr = tno = cnt = 0; tile.sort (randOrd
); cntr (); tid = setInterval ('cntr ()', 1000);} function cntr () {var min =
Math.floor (tmr / 60); var sec = tmr% 60; document.getElementById ('cnt'). Value =
min + ':' + (dtk <10? '0': '') + dtk; tmr ++;} fungsi disp (sel) {if (tno> 1)
{clearTimeout (cid); sembunyikan ();} document.getElementById ('t' + sel) .innerHTML =
petak [sel]; jika (tno == 0) ch1 = sel; lain {ch2 = sel; cid = setTimeout ('menyembunyikan ()',
900);} tno ++;} fungsi menyembunyikan () {tno = 0; if (ubin [ch1]! = ubin [ch2])
{displayBack (ch1); displayBack (ch2);} else cnt ++; jika (cnt> = 15)
clearInterval (tid);}

Anda akan mengganti nama file gambar untuk kembali dan ubin dengan nama file gambar Anda.

Ingatlah untuk mengedit gambar Anda dalam program grafik Anda sehingga semuanya berukuran 60 piksel persegi sehingga tidak perlu waktu terlalu lama untuk memuatnya (ukuran gabungan dari 16 gambar yang digunakan untuk contoh saya hanya 4758 byte sehingga Anda seharusnya tidak memiliki masalah menjaga total di bawah 10rb).

Langkah 2: Pilih kode di bawah ini dan salin ke file yang disebut memory.css.

.blk {width: 70px; tinggi: 70px; overflow: tersembunyi;}

Langkah 3: Masukkan kode berikut ke bagian kepala dokumen HTML halaman web Anda untuk memanggil dua file yang baru saja Anda buat.

Langkah 4: Pilih dan salin kode di bawah ini, lalu simpan ke dalam file bernama memoryb.js.

// Permainan Memori Konsentrasi dengan Gambar - Script Tubuh
// hak cipta Stephen Chapman, 28 Februari 2006, 24 Desember 2009
// Anda dapat menyalin skrip ini asalkan Anda mempertahankan pemberitahuan hak cipta

document.write ('

Langkah 5: Sekarang yang tersisa adalah menambahkan game ke halaman web Anda di mana Anda ingin itu muncul dengan memasukkan kode berikut ke dalam dokumen HTML Anda.