Създайте игра с памет с HTML и JQuery Effects методи

Много уеб разработчици използват библиотеката Jquery, за да направят своите уеб страници по -интерактивни и функционални. Библиотеката jQuery предлага няколко метода и функции, включително Jquery Effect, който се използва за добавяне на интерактивност и анимация към елементите на уебсайт.
Анимациите не изискват никакъв специален плъгин и са съвместими с повечето браузъри, също така CSS3 се използва за графичната част.
Някои имоти са:

 Методът animate ()

Този метод позволява да се приложи css стил към елемент от уеб страница, например за уголемяване на слой.
Синтаксисът е следният

 (селектор). неодушевен ({стил}, скорост)

Прост пример за функцията animate, използвана за прилагане на css стил към елемент:

 Анимиране и разширяване по време на анимиране и свиване

Така че можем да видим как с метода animate () можем да приложим css към елемент и да го накараме да се промени за определено време (милисекунди), за да генерира всеки ефект, от който се нуждаем.
Създаваме играта с Jquery и метода Animate ()
Ние ще създадем с този метод игра в стил Саймън Дайс или игра с памет, която ще се състои от показване на редица червени кръгове на екрана и само някои от тях ще бъдат показани в синя последователност, играчът трябва да кликне, повтаряйки последователността, ако той успее последователността, екранът ще се прерисува, добавяйки още кръгове и повишавайки нивото на трудност. Ако играчът не успее в последователността, той трябва да повтаря това ниво на игра, докато не го завърши правилно. Също така предупреждение ще ви каже дали сте завършили нивото и по този начин ще преминете към следващото ниво.
Играта ще започне с 2 реда и 2 колони, 4 кръга от които 2 от тях ще бъдат показани за няколко секунди в синьо. След това трябва да кликнете върху двете, които бяха в синьо. Така на всяко ниво ще бъде добавена колона, а на друго ниво ще бъдат добавени и по -активни кръгове в синьо, за да се опита по -късно да запомни същата последователност.
Редът на изобразяване няма значение, а по -скоро всички кръгове, които са в синьо, са щракнати.
Максималният размер на дъската или сцената ще бъде 6 колони по 6 реда, което ще даде решетка от 36 кръга.

Търсим фоново изображение за нашата игра, то ще бъде фонът на мрежата или можем да използваме плосък цвят. Започваме със създаване на директория с игри и във файл index.html, който ще съдържа уеб страницата, уеб кодът ще бъде следният:

 Игра на паметта
Саймън казва игра
Трябва да помним последователността от сини кръгове и
щракнете върху повтаряне на последователността

Версията на Jquery с използване на 1.9 или по -нова версия е добре за този пример. След това ще създадем файла styles.css за таблиците със стилове, ще използваме CSS3 за сенките и някои ефекти за нашите игри. След това идентификаторите и класовете ще бъдат използвани от Jquery, за да могат да изпълняват анимацията и интерактивността на играта.

 body {margin: 0px; подложка: 0px; } # background {background: # 333 url (background.jpg.webp); подравняване на текст: център; margin -top: -20px; подплата: 10px; височина: 800px; дисплей: блок; } h2 {цвят: #fff; } h3 {цвят: #ccc; } .контейнер {padding: 4px; дисплей: вграден блок; background-color: #ffffff; ширина: 200px; височина: 200px; рамка: 1px черно плътно; граница: 1px твърд rgb (204, 204, 204); граничен радиус: 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); box-shadow: 6px 5px 8px 0px rgba (50, 50, 50, 0.75) ;; } .фигура {border: 2px #fff solid; фон: червен; марж: 0px; подложка: 0px; дисплей: вграден блок; box-shadow: 2px 2px 2px rgb (136, 136, 136); марж: 2px; }. фигура: hover {курсор: показалец; } .активен {background-color: # 4D90FE; }. грешка {background-color: red; }. кръг {/ * рамка-радиус: 50px; * / ширина: 100px; височина: 100px; -moz-border-radius: 50px; -webkit-border-radius: 50px; рамка-радиус: 50px; }

Когато създадем стиловете, можем да създадем функционалността и анимацията на играта. Създаваме файл game.js Пишем следния код на Javascript, тук трябва да идентифицираме кои са класовете и css идентификаторите, които участват в играта и за какво ги използваме. Всеки от тях има атрибут atrr и класовете могат да бъдат добавени към него с addClass.

 var Tfigure = 55; // Размер на фигурата var StartGame = false // Стартиране на играта False = No var NextLevel = true; // Вярно продължаване на играта, ако е невярно, играта спира var columns = редове = 2 // Начален размер на чипове или кръгове на дъската 2x2, което е 4 кръга $ (document) .ready (function () {// генерирам играта според броя колони и редове на всяко ниво на трудност GeneraJuego (колони, редове);}); функция GameGenerate (c, r) {// Ако NextLevel е равен на false, показва, че играта трябва да спре, ако (! NextLevel) се върне; // Спирам играта NextLevel = false; // Изтриваме всички елементи на сцената или игралната дъска $ (".game") .fadeOut (1000, // в края на метода на избледняване // изпразваме елементите на играта на сцената или функцията на дъската за игра ( ) {$ (".game") .empty (); // Разгънете сцената или дъската за игри, за да побере кръговете $ (".container") .animate ({height: ((Tfigure + 8) * r) + " px ", ширина: ((Tfigure + 8) * c) +" px "}, 1000, // в края на разширяването с amimate () // Създавам новите фигури според новото измерение на екрана i функция на ниво игра () {for (i = 0; i <(c * r); i ++) $ (".game") .append (CreateFigure ("кръг", Tfigure)); $ (".game" ) .fadeIn (200); // Създавам произволно кои са кръговете на дъската, върху които може да се щракне и кои не са CreateBlueFigure ();})}); } функция CreateFigure (shapetype, r) {// Ако се натисне някоя форма, върнете $ ("") .addClass (" figure "+ typeFigure) .width (r) .height (r) .click (function () {if (StartGame) {// Проверявам дали тази цифра има избрания атрибут, т.е. е един от тези, които са активни в синьо, ако ($ (this) .attr ("selected") == "selected") $ (this) .addClass ("active"); else $ (this) .addClass ("error" ); var TotalSelected = $ (".figure [selected = 'selected']") .length // Ако броят на кликванията в активните кръгове и броят на кликванията в неактивните кръгове е по-голям от броя на направените кликвания, не продължаваме играта и по -късно ще регенерираме екрана отново, без да променяме нивото if (($ (". active"). length + $ (". error"). length)> = TotalSelected) {StartGame = false; $ (".figure [selected = 'selected']: not (.activa)") .addClass ("activa"); // Ако нивото на неуспех при кликване е 0, това означава, че ударихме последователността if ($ (". грешка "). дължина == 0) {alert (" Попаднали сте в последователността, преминете към следващото ниво "); if (колони == редове) колони ++; иначе ако (колони> редове) редове ++; / / Максималното ниво така n 6 реда по 6 колони if (колони> 6) {колони = 6; редове = 6; }} GeneraJuego (колони, редове); }}}); } функция CreateBlueFigure () {var count = 0; var length = $ (".game> .figure") .length for (count = 0; count <Math.ceil (length / 3);) {var random = Math.ceil (Math.random () * length); if (random .figure ") .eq (random) .hasClass (" active ")) {$ (" .game> .figure ") .eq (random) .addClass (" active "). attr (" избрано ", "selected"); count ++;}}} // Скрива избраните фигури, след като показва последователността, която трябва да се повтори window.setTimeout (HideBlueFigures, 1200)} функция HideBlueFigures () {$ (".game> .figure"). removeClass ("active"); GameStart = true; NextLevel = true;}

Така че приключваме играта, можем да добавим резултат, предупреждение и съобщения, също звучащи, ако искаме, в допълнение към възможността за спиране и продължаване на играта, имайте предвид, че това е само Javascript, HTML и CSS, но би било лесно да разширяване на добавянето на резултати към данни от база данни или включване на по -високо ниво на трудност.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка