Sukurkite atminties žaidimą naudodami HTML ir „JQuery Effects“ metodus

Daugelis žiniatinklio kūrėjų naudoja „Jquery“ biblioteką, kad tinklalapiai taptų interaktyvesni ir funkcionalesni. „JQuery“ biblioteka siūlo kelis metodus ir funkcijas, įskaitant „Jquery Effect“, kuris naudojamas interaktyvumui ir animacijai pridėti prie svetainės elementų.
Animacijoms nereikia specialaus papildinio ir jos yra suderinamos su dauguma naršyklių, taip pat CSS3 naudojama grafinei daliai.
Kai kurios savybės yra:

 Animacijos () metodas

Šis metodas leidžia pritaikyti css stilių tinklalapio elementui, pavyzdžiui, norint padidinti sluoksnį.
Sintaksė yra tokia

 (parinkiklis) .animate ({style}, greitis)

Paprastas animacijos funkcijos, naudojamos elementui taikyti css stilių, pavyzdys:

 Animuoti ir išplėsti kartu Animuoti ir sutraukti

Taigi galime pamatyti, kaip naudojant animate () metodą galime pritaikyti css elementui ir priversti jį pasikeisti per tam tikrą laiką (milisekundes), kad būtų sukurtas bet koks mums reikalingas efektas.
Žaidimą kuriame naudodami „Jquery“ ir „Animate“ () metodą
Šiuo metodu sukursime Simono kauliukų stiliaus žaidimą arba atminties žaidimą, kurį sudarys ekrane rodomas raudonų apskritimų skaičius ir tik kai kurie iš jų bus rodomi mėlyna seka, žaidėjas turi spustelėti kartojant seką, jei jis pavyksta seka, ekranas bus perbraižytas pridedant daugiau apskritimų ir pakeliant sudėtingumo lygį. Jei žaidėjui nepavyksta sekos, jis turi pakartoti tą žaidimo lygį, kol teisingai užbaigs. Taip pat įspėjimas jums pasakys, ar baigėte lygį ir taip pereisite į kitą lygį.
Žaidimas prasidės 2 eilutėmis ir 2 stulpeliais, iš kurių 4 apskritimai bus rodomi kelioms sekundėms mėlyna spalva. Tada turime spustelėti du, kurie buvo mėlyni. Taigi kiekviename lygyje bus pridėtas stulpelis, o kitame - eilutė, taip pat aktyvesni apskritimai bus pridėti mėlynai, kad vėliau būtų galima prisiminti tą pačią seką.
Išvaizda nėra svarbi, o tai, kad spustelėjami visi mėlyni apskritimai.
Didžiausias lentos ar scenos dydis bus 6 stulpeliai po 6 eilutes, o tai suteiks 36 apskritimų tinklelį.

Mes ieškome savo žaidimo fono paveikslėlio, tai bus žiniatinklio fonas arba galime naudoti plokščią spalvą. Pradedame nuo žaidimų katalogo sukūrimo, o indekso.html faile, kuriame bus tinklalapis, bus toks interneto kodas:

 Atminties žaidimas
Simono žaidimas
Turime prisiminti mėlynų apskritimų seką ir
spustelėkite kartoti seką

Šiame pavyzdyje tinka „Jquery“ versija su 1.9 arba naujesne versija. Tada mes sukursime stiliaus lapų failą styles.css, šešėliams naudosime CSS3, o žaidimams - kai kuriuos efektus. Tada identifikatoriai ir klasės bus naudojami iš „Jquery“, kad būtų galima atlikti žaidimo animaciją ir interaktyvumą.

 body {paraštė: 0px; paminkštinimas: 0 taškų; } #background {background: # 333 url (background.jpg.webp); text-align: centre; viršutinė paraštė: -20 taškų; paminkštinimas: 10 pikselių; aukštis: 800 pikselių; ekranas: blokas; } h2 {spalva: #fff; } h3 {spalva: #ccc; } .konteineris {padding: 4px; ekranas: inline-block; fono spalva: #ffffff; plotis: 200 pikselių; aukštis: 200 pikselių; kraštinė: 1 pikselis juoda kieta spalva; kraštas: 1 pikselis kietas rgb (204, 204, 204); ribos spindulys: 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); dėžutė-šešėlis: 6px 5px 8px 0px rgba (50, 50, 50, 0,75) ;; } .figure {border: 2px #fff solid; fonas: raudonas; paraštė: 0 taškų; paminkštinimas: 0 taškų; ekranas: inline-block; dėžutė-šešėlis: 2px 2px 2px rgb (136, 136, 136); paraštė: 2px; }. figūra: užveskite žymeklį {žymeklis: žymeklis; } .active {background-color: # 4D90FE; } .klaidos {fono spalva: raudona; } .circle {/ * border-spindulys: 50px; * / plotis: 100 taškų; aukštis: 100 taškų; -moz-border-spindulys: 50px; -webkit-border-spindulys: 50px; ribos spindulys: 50 taškų; }

Sukūrę stilius, galime sukurti žaidimo funkcionalumą ir animaciją. Mes kuriame failą game.js Mes rašome šį „JavaScript“ kodą, čia turime nurodyti, kurios klasės ir CSS identifikatoriai dalyvauja žaidime ir kam juos naudojame. Kiekvienas iš jų turi atrr atributą ir prie jo galima pridėti klases naudojant addClass.

 var Tfigūra = 55; // Paveikslo dydis var StartGame = false // Pradėti žaidimą False = No var NextLevel = true; // Tiesa, tęskite žaidimą, jei tai klaidinga žaidimas pagal kiekvieno sudėtingumo lygio „GeneraJuego“ stulpelių ir eilučių skaičių (stulpeliai, eilutės);}); funkcija GameGenerate (c, r) {// Jei NextLevel lygus false, nurodo, kad žaidimas turėtų sustoti, jei (! NextLevel) grįš; // Aš sustabdau žaidimą NextLevel = false; // Ištriname visus scenos ar žaidimo lentos elementus $ (".game") .fadeOut (1000, // fade metodo pabaigoje // ištuštiname žaidimo elementus scenoje arba žaidimo lentos funkciją ( ) {$ (".game") .empty (); // Išplėskite sceną ar žaidimų lentą, kad tilptų apskritimai $ (".container") .animate ({height: ((Tfigure + 8) * r) + " px ", plotis: ((Tfigure + 8) * c) +" px "}, 1000, // pasibaigus plėtimui naudojant amimate () // Naujas figūras kuriu pagal naują ekrano matmenį i žaidimo lygio funkcija () {for (i = 0; i <(c * r); i ++) $ (".game") .append (CreateFigure ("circle", Tfigure)); $ (".game" ) .fadeIn (200); // Atsitiktinai sukuriu apskritimus lentoje, kuriuos galima spustelėti, o kurie nėra „CreateBlueFigure ();})}); } funkcija CreateFigure (shapetype, r) {// Jei spustelėjama bet kuri figūra, grąžinkite $ ("") .addClass (" figūra "+ typeFigure) .width (r) .height (r) .click (function () {if (StartGame) {// Tikrinu, ar ta figūra turi pasirinktą atributą, tai yra, jei yra vienas iš tų, kurie buvo aktyvūs mėlyna spalva, jei ($ (this) .attr ("selected") == "selected") $ (this) .addClass ("active"); else $ (this) .addClass ("error") ); var TotalSelected = $ (".figure [selected = 'selected']") .length // Jei paspaudimų aktyviuose draugų ratuose ir paspaudimų neaktyviuose draugų ratuose skaičius yra didesnis nei paspaudimų skaičius, mes netęsime žaidimo ir vėliau vėl atkursime ekraną nekeisdami lygio, jei (($ (". active"). length + $ (". error"). length)> = TotalSelected) {StartGame = false; $ (".figure [selected = 'selected']: not (.activa)") .addClass ("activa"); // Jei paspaudimo nesėkmės lygis yra 0, tai reiškia, kad pasieksime seką, jei ($ (". klaida "). ilgis == 0) {įspėjimas (" Paspaudėte seką, eikite į kitą lygį "); if (stulpeliai == eilutės) stulpeliai ++; kitaip jei (stulpeliai> eilutės) eilutės ++; / / Maksimalus lygis taip n 6 eilutės 6 stulpeliais, jei (stulpeliai> 6) {stulpeliai = 6; eilutės = 6; }} GeneraJuego (stulpeliai, eilutės); }}}); } funkcija CreateBlueFigure () {var count = 0; var ilgis = $ (".game> .figure") .length for (count = 0; count <Math.ceil (length / 3);) {var random = Math.ceil (Math.random () * length); if (random .figure ") .eq (atsitiktinis) .hasClass (" active ")) {$ (" .game> .figure ") .eq (random) .addClass (" active "). attr (" selected ", "pasirinktas"); count ++;}}} // Paslėpti pasirinktus skaičius, parodžius kartojamą seką window.setTimeout (HideBlueFigures, 1200)} funkcija HideBlueFigures () {$ (".game> .figure"). removeClass ("active"); GameStart = true; NextLevel = true;}

Taigi baigdami žaidimą galime pridėti balų, įspėjimų ir pranešimų, kurie taip pat skamba, jei norime, be galimybės sustabdyti ir tęsti žaidimą, nepamirškite, kad tai tik „Javascript“, HTML ir CSS, tačiau būtų lengva išplėsti rezultatų pridėjimą prie duomenų bazės duomenų arba įtraukti didesnio sunkumo lygį.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką