Klasik bellek oyununun, web sayfanıza gelen ziyaretçilerin JavaScript kullanarak ızgara desenindeki resimleri eşleştirmelerine olanak tanıyan bir sürümü.
Görüntüleri Sağlama
Görüntüleri sağlamanız gerekecek, ancak web'de kullanma haklarına sahip olduğunuz sürece bu komut dosyasıyla istediğiniz görüntüleri kullanabilirsiniz. Başlamadan önce bunları 60 piksele 60 piksel olarak yeniden boyutlandırmanız gerekir.
"Kartların" arkası için bir resme ve "cepheler" için on beş resme ihtiyacınız olacak.
Görüntü dosyalarının olabildiğince küçük olduğundan veya oyunun yüklenmesi çok uzun sürebildiğinden emin olun. Tüm resimler sayfanın yüklenmesini çok daha yavaş hale getireceğinden, bu sürümle komut dosyasını 30 kartla sınırlandırdım. Sayfada ne kadar çok kart ve görüntü varsa sayfa o kadar yavaş yüklenir. Bu, iyi geniş bant bağlantıları olan kişiler için bir sorun olmayabilir, ancak daha yavaş bağlantıları olanlar zaman alır.
Konsantrasyon Hafıza Oyunu Nedir?
Bu oyunu daha önce oynamamışsanız, kurallar çok basittir. 30 kare veya kart var. Her kartta iki resimden fazla görünmeyen 15 resimden biri bulunur; bunlar eşleşen çiftlerdir.
Kartlar "yüzü kapalı" olarak başlar ve 15 çiftteki görüntüleri gizler.
Amaç, eşleşen tüm çiftleri mümkün olan en kısa sürede açmaktır.
Oynatma, bir kart seçip bir saniye seçerek başlar. Eğer bir maçsa, yüzleri açık kalır; eşleşmezlerse, iki kart ters çevrilir, yüzü aşağı dönük. Oynarken başarılı maçlar yapabilmek için önceki kartların hafızasına ve konumlarına güvenmeniz gerekecek.
Konsantrasyonun Bu Sürümü Nasıl Çalışır?
Oyunun bu JavaScript sürümünde, üzerlerine tıklayarak kartları seçersiniz. Eğer seçtiğiniz iki maç görünür kalırsa, görünmezlerse bir saniye sonra tekrar kaybolurlar.
Altta, tüm çiftleri eşleştirmenin ne kadar sürdüğünü takip eden bir zaman sayacı var.
Baştan başlamak istiyorsanız, sayaç düğmesine basmanız yeterlidir; tüm tablo yeniden karıştırılır ve yeniden başlayabilirsiniz.
Bu örnekte kullanılan görüntüler komut dosyasıyla birlikte gelmez, bu nedenle belirtildiği gibi, kendinizinkini sağlamanız gerekir. Bu komut dosyasıyla kullanılacak resimleriniz yoksa ve kendinizinkini oluşturamıyorsanız, ücretsiz olan uygun küçük resimleri arayabilirsiniz.
Oyunu Web Sayfanıza Ekleme
Hafıza oyunu betiği beş adımda web sayfanıza eklenir.
Aşama 1: Aşağıdaki kodu kopyalayın ve adlı bir dosyaya kaydedin memoryh.js.
// Görüntülerle Konsantrasyon Hafıza Oyunu - Head Script
// telif hakkı Stephen Chapman, 28 Şubat 2006, 24 Aralık 2009
// telif hakkı bildirimini saklamak şartıyla bu komut dosyasını kopyalayabilirsiniz
var back = 'back.gif';
var tile = ['img0.gif', 'img1.gif', 'img2.gif', 'img3.gif', 'img4.gif', 'img5.gif',
'İmg6.gif', 'img7.gif', 'img8.gif', 'img9.gif', 'img10.gif', 'img11.gif',
'İmg12.gif', 'img13.gif', 'img14.gif'];
fonksiyon randOrd (a, b) {return (Math.round (Math.random ()) - 0.5);} var im = []; için
(var i = 0; i <15; i ++) {im [i] = yeni Resim (); im [i] .src = döşeme [i]; kutucuk [i] =
''; kutucuk [i + 15] =
tile [i];} işlev displayBack (i) {document.getElementById ('t' + i) .innerHTML =
'height = "60" alt = "geri" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload = başlar; 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);} işlev cntr () {var min =
Math.floor (tmr / 60); var sec = tmr% 60; document.getElementById ('cnt'). Değer =
min + ':' + (sn <10? '0': '') + sn; tmr ++;} işlev disp (sel) {if (tno> 1)
{clearTimeout (cid); conceal ();} document.getElementById ('t' + sel) .innerHTML =
kiremit [sel]; if (tno == 0) ch1 = sel; başka {ch2 = sel; cid = setTimeout ('conceal ()',
900);} tno ++;} işlev gizleme () {tno = 0; if (döşeme [ch1]! = döşeme [ch2])
{displayBack (ch1); displayBack (ch2);} başka cnt ++; eğer (cnt> = 15)
clearInterval (tid);}
İçin resim dosyası adlarını değiştireceksiniz geri ve kiremit resimlerinizin dosya adlarıyla birlikte.
Grafik programınızdaki resimlerinizi 60 piksel kare olacak şekilde düzenlemeyi unutmayın, böylece yüklenmesi çok uzun sürmez (örneğim için kullanılan 16 görüntünün birleştirilmiş boyutu sadece 4758 bayttır, bu nedenle toplamı altında tutmakta sorun yaşamamanız gerekir 10k).
Adım 2: Aşağıdaki kodu seçin ve adlı bir dosyaya kopyalayın. memory.css.
.blk {genişlik: 70 piksel; yükseklik: 70 piksel; taşma: gizli;}
Aşama 3: Yeni oluşturduğunuz iki dosyayı çağırmak için web sayfanızın HTML belgesinin baş bölümüne aşağıdaki kodu ekleyin.
4. Adım: Aşağıdaki kodu seçin ve kopyalayın ve ardından adlı bir dosyaya kaydedin. memoryb.js.
// Görüntülerle Konsantrasyon Hafıza Oyunu - Body Script
// telif hakkı Stephen Chapman, 28 Şubat 2006, 24 Aralık 2009
// telif hakkı bildirimini saklamak şartıyla bu komut dosyasını kopyalayabilirsiniz
'(Document.write'); için (var b =
0; b <= 4; b ++) {document.write ('id = " 't + ((5 *) + b) +'">');} Document.write (' ');} document.write ('
Adım 5: Artık geriye kalan tek şey oyunu HTML sayfanıza aşağıdaki kodu ekleyerek oyunu web sayfanıza eklemektir.