İçindekiler
Birçok web geliştiricisi, web sayfalarını daha etkileşimli ve işlevsel hale getirmek için Jquery kitaplığını kullanır. jQuery kitaplığı, bir web sitesinin öğelerine etkileşim ve animasyon eklemek için kullanılan Jquery Effect dahil olmak üzere çeşitli yöntemler ve işlevler sunar.Animasyonlar herhangi bir özel eklenti gerektirmez ve çoğu tarayıcı ile uyumludur, ayrıca grafik kısmı için CSS3 kullanılır.
Bazı özellikler şunlardır:
canlandırma () yöntemiBu yöntem, örneğin bir katmanı büyütmek için, bir web sayfasının bir öğesine bir css stili uygulanmasına izin verir.
Sözdizimi aşağıdaki gibidir
(seçici) .animate ({style}, hız)Bir öğeye css stili uygulamak için kullanılan canlandırma işlevinin basit bir örneği:
Canlandırın ve Boyunca Genişletin Animate ve DaraltınBöylece animate () yöntemiyle bir öğeye css uygulayabileceğimizi ve ihtiyacımız olan herhangi bir efekti oluşturmak için belirli bir süre (milisaniye) içinde nasıl değiştirebileceğimizi görebiliriz.
Oyunu Jquery ve Animate() metodu ile oluşturuyoruz.
Bu yöntemle, ekranda birkaç kırmızı daire göstermekten oluşacak ve sadece bir kısmı mavi bir sırayla gösterilecek olan bir Simon Dice tarzı oyun veya hafıza oyunu oluşturacağız, oyuncu sırayı tekrarlamak zorundaysa, sırayı tekrarlamak zorundadır. sırayı başarırsa ekran yeniden çizilir ve daha fazla daire eklenir ve zorluk seviyesi yükseltilir. Oyuncu dizide başarısız olursa, doğru bir şekilde tamamlayana kadar o oyun seviyesini tekrar etmelidir. Ayrıca bir bölümü tamamlayıp tamamlamadığınızı size bildirecek ve böylece bir sonraki bölüme geçeceksiniz.
Oyun 2 satır ve 2 sütunla başlayacak, 2 tanesi birkaç saniye mavi renkte gösterilecek 4 daire. O zaman mavi olan ikisine tıklamalıyız. Böylece her seviyede bir sütun ve başka bir seviyede bir satır eklenecek, daha sonra aynı sırayı hatırlamaya çalışmak için mavi renkte daha aktif daireler eklenecektir.
Görünüş sırası önemli değildir, bunun yerine mavi olan tüm dairelerin tıklanması önemlidir.
Tahtanın veya sahnenin maksimum boyutu, 36 daireden oluşan bir ızgara verecek olan 6 satıra 6 sütun olacaktır.
Hafıza oyunuSimon Oyun Diyor
Mavi dairelerin sırasını hatırlamalıyız ve
diziyi tekrarlamak için tıklayın
Bu örnek için 1.9 veya daha üstünü kullanan Jquery sürümü uygundur. Sonra stil sayfaları için style.css dosyasını oluşturacağız, gölgeler için CSS3 ve oyunlarımız için bazı efektler kullanacağız. Tanımlayıcılar ve sınıflar daha sonra oyunun animasyonunu ve etkileşimini gerçekleştirebilmek için Jquery'den kullanılacaktır.
gövde {kenar boşluğu: 0px; dolgu: 0 piksel; } #background {background: # 333 url (background.jpg.webp); metin hizalama: merkez; üst kenar boşluğu: -20 piksel; üst dolgu: 10 piksel; yükseklik: 800 piksel; Ekran bloğu; } h2 {renk: #fff; } h3 {renk: #ccc; } .container {dolgu: 4px; ekran: satır içi blok; arka plan rengi: #ffffff; genişlik: 200 piksel; yükseklik: 200 piksel; kenarlık: 1 piksel siyah düz; kenarlık: 1 piksel katı rgb (204, 204, 204); sınır yarıçapı: 3px 3px 3px 3px; -webkit-box-shadow: 6px 5px 8px 0px rgba (50, 50, 50, 0.75); -moz-box-shadow: 6px 5px 8px 0px rgba (50, 50, 50, 0.75); kutu gölgesi: 6px 5px 8px 0px rgba (50, 50, 50, 0.75);; } .figure {kenarlık: 2px #fff katı; arka plan: kırmızı; kenar boşluğu: 0 piksel; dolgu: 0 piksel; ekran: satır içi blok; kutu gölgesi: 2px 2px 2px rgb (136, 136, 136); kenar boşluğu: 2 piksel; }.şekil: vurgulu {imleç: işaretçi; } .active {arka plan rengi: # 4D90FE; } .error {arka plan rengi: kırmızı; } .circle {/ * sınır yarıçapı: 50 piksel; * / genişlik: 100 piksel; yükseklik: 100 piksel; -moz-border-radius: 50px; -webkit-border-radius: 50px; sınır yarıçapı: 50 piksel; }Stilleri oluşturduğumuzda, oyunun işlevselliğini ve animasyonunu oluşturabiliriz. Bir dosya oluşturuyoruz oyun.js Aşağıdaki Javascript kodunu yazıyoruz, burada oyuna katılan sınıfların ve css tanımlayıcılarının hangileri olduğunu ve bunları ne için kullandığımızı belirlememiz gerekiyor. Her birinin bir atrr niteliği vardır ve buna addClass ile sınıflar eklenebilir.
var Tfigure = 55; // Şeklin boyutu var StartGame = false // Oyunu başlat False = Hayır var NextLevel = true; // Doğru ise yanlışsa oyuna devam et oyun durur var sütunlar = satırlar = 2 // Tahtadaki çiplerin veya dairelerin başlangıç boyutu 2x2 yani 4 daire $ (belge) .ready (işlev () {// oluştururum oyun GeneraJuego (sütunlar, sıralar);}); function GameGenerate (c, r) {// NextLevel, false değerine eşitse oyunun durması gerektiğini belirtir (! NextLevel) dönerse; // Oyunu durduruyorum NextLevel = false; // Sahnenin veya oyun tahtasının tüm öğelerini siliyoruz $ (".game") .fadeOut (1000, // fade yönteminin sonunda // oyunun öğelerini sahnede veya oyun tahtası işlevinde boşaltın ( ) {$ (".game") .empty (); // Sahneyi veya oyun tahtasını daireleri içerecek şekilde genişletin $ (".container") .animate ({height: ((Tfigure + 8) * r) + " px" , width: ((Tfigure + 8) * c) + "px"}, 1000, // amimate () ile açılımın sonunda // Ekranın yeni boyutuna göre yeni figürleri oluşturuyorum i oyun seviyesi işlevi () {for (i = 0; i <(c * r); i ++) $ (".game") .append (Create Figure ("daire", Tfigure)); $ (".game" ) .fadeIn (200); // Tahtadaki tıklanabilir ve CreateBlue Figure olmayan daireleri rastgele oluşturuyorum (;})}); } function Create Figure (shapetype, r) {// Herhangi bir şekle tıklandığında $ ("") .addClass (" şekil "+ type Figure) .width (r) .height (r) .click (function () {if (StartGame) {// Bu şeklin seçili özniteliğe sahip olup olmadığını, yani olup olmadığını kontrol ediyorum. mavi renkte aktif olanlardan biri if ($ (bu) .attr ("seçili") == "seçili") $ (this) .addClass ("etkin"); değilse $ (bu) .addClass ("hata" ); var TotalSelected = $ (".figure [seçili = 'seçili']") .length // Etkin çevrelerdeki tıklama sayısı ve etkin olmayan çevrelerdeki tıklama sayısı yapılan tıklama sayısından fazlaysa, oyuna devam etmiyoruz ve daha sonra seviyeyi değiştirmeden ekranı yeniden oluşturacağız if (($ (". aktif"). uzunluk + $ (". hata"). uzunluk)> = TotalSelected) {StartGame = false; $ (".figure [selected = 'selected']: not (.activa) ") .addClass (" activa "); // Tıklama hatası seviyesi 0 ise, if ($ (". error "). uzunluk == 0 ) {alert ("Sıraya ulaştınız, bir sonraki seviyeye geçin"); if (sütunlar == satırlar) sütunlar ++; else if (sütunlar> satırlar) satırlar ++; / / Maksimum seviye yani n 6 satır 6 sütun if (sütunlar> 6) {sütunlar = 6; satırlar = 6; }} GeneraJuego (sütunlar, satırlar); }}}); } function CreateBlue Figure () {var sayısı = 0; var uzunluk = $ (".game> .figure") .length for (count = 0; count <Math.ceil (uzunluk / 3);) {var rastgele = Math.ceil (Math.random () * uzunluk); if (rastgele .figure ") .eq (rastgele) .hasClass (" aktif ")) {$ (" .game> .figure ") .eq (rastgele) .addClass (" aktif "). attr (" seçili ", "selected"); count ++;}}} // Tekrarlanacak diziyi gösterdikten sonra seçilen rakamları gizler window.setTimeout (HideBlue Figures, 1200)} function HideBlue Figures () {$ (".game> .figure") . removeClass ("etkin"); GameStart = true; NextLevel = true;}Böylece oyunu sonlandırıp puan, uyarı ve mesaj ekleyebiliyoruz, istersek ses de, oyunu durdurma ve devam ettirme imkanına ek olarak, bunun sadece Javascript, HTML ve CSS olduğunu unutmayın, ancak bunun kolay olacağını unutmayın. sonuçları bir veritabanı verisine eklemeyi genişletin veya daha yüksek bir zorluk seviyesi ekleyin.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.
