Направите игру меморије помоћу метода ХТМЛ и ЈКуери Еффецтс

Многи веб програмери користе библиотеку Јкуери како би своје веб странице учинили интерактивнијим и функционалнијим. Библиотека јКуери нуди неколико метода и функција, укључујући Јкуери Еффецт, који се користи за додавање интерактивности и анимације елементима веб локације.
Анимације не захтевају никакве посебне додатке и компатибилне су са већином прегледача, такође се ЦСС3 користи за графички део.
Нека својства су:

 Метода анимате ()

Ова метода омогућава примену цсс стила на елемент веб странице, на пример за повећање слоја.
Синтакса је следећа

 (селектор) .живо ({стиле}, брзина)

Једноставан пример функције анимате која се користи за примену цсс стила на елемент:

 Анимирај и прошири уз Анимирај и Скупи

Тако можемо видети како помоћу методе анимате () можемо применити цсс на елемент и променити га за одређено време (милисекунде) да бисмо генерисали било који ефекат који нам је потребан.
Креирамо игру помоћу Јкуери и методе Анимате ()
Овом методом ћемо створити игру у стилу Симон Дицеа или игру меморије која ће се састојати од приказивања одређеног броја црвених кругова на екрану, а само ће неки од њих бити приказани у плавом низу, играч мора да кликне понављајући секвенцу, ако ако успе редослед, екран ће се поново исцртати додајући још кругова и подижући ниво тежине. Ако играч не успе низ, мора да понавља тај ниво игре док га не заврши исправно. Такође, упозорење ће вам рећи да ли сте завршили ниво и на тај начин ћете прећи на следећи ниво.
Игра ће почети са 2 реда и 2 колоне, од којих ће 4 круга бити приказана неколико секунди плавом бојом. Затим морамо кликнути на два која су била плаве боје. Тако ће се на сваком нивоу додати колона, а на другом нивоу ред, такође ће се додати још активнијих кругова плавом бојом како би касније покушали да запамте исти низ.
Редослед појављивања није битан, већ је потребно кликнути на све кругове који су плави.
Максимална величина плоче или позорнице биће 6 колона по 6 редова, што ће дати мрежу од 36 кругова.

Тражимо позадинску слику за нашу игру, то ће бити позадина веба или можемо користити равну боју. Почињемо стварањем директоријума игара и унутар датотеке индек.хтмл која ће садржати веб страницу, веб код ће бити следећи:

 Игра меморије
Симон каже игру
Морамо запамтити редослед плавих кругова и
кликните понављајући низ

Верзија Јкуери са 1.9 или вишом верзијом је у реду за овај пример. Затим ћемо креирати датотеку стилес.цсс за стилске листове, користићемо ЦСС3 за сенке и неке ефекте за наше игре. Идентификатори и класе ће се затим користити из Јкуери -ја да би могли да изведу анимацију и интерактивност игре.

 боди {маргин: 0пк; паддинг: 0пк; } # бацкгроунд {бацкгроунд: # 333 урл (бацкгроунд.јпг); поравнање текста: центар; маргин -топ: -20пк; паддинг-топ: 10пк; висина: 800пк; дисплеј блок; } х2 {боја: #ффф; } х3 {боја: #ццц; } .цонтаинер {паддинг: 4пк; приказ: инлине-блоцк; бацкгроунд-цолор: #фффффф; ширина: 200пк; висина: 200пк; ивица: 1пк црна чврста материја; ивица: 1пк чврсти ргб (204, 204, 204); бордер-радиус: 3пк 3пк 3пк 3пк; -вебкит-бок-схадов: 6пк 5пк 8пк 0пк ргба (50, 50, 50, 0.75); -моз-бок-схадов: 6пк 5пк 8пк 0пк ргба (50, 50, 50, 0.75); бок-схадов: 6пк 5пк 8пк 0пк ргба (50, 50, 50, 0.75) ;; } .фигуре {бордер: 2пк #ффф солид; позадина: црвена; маргина: 0пк; паддинг: 0пк; приказ: инлине-блоцк; бок-схадов: 2пк 2пк 2пк ргб (136, 136, 136); маргина: 2пк; }. фигуре: ховер {цурсор: поинтер; } .активан {бацкгроунд-цолор: # 4Д90ФЕ; }. грешка {бацкгроунд-цолор: ред; } .цирцле {/ * бордер-радиус: 50пк; * / ширина: 100пк; висина: 100пк; -моз-бордер-радиус: 50пк; -вебкит-бордер-радиус: 50пк; бордер-радиус: 50пк; }

Када створимо стилове, можемо створити функционалност и анимацију игре. Креирамо датотеку гаме.јс Пишемо следећи Јавасцрипт код, овде морамо идентификовати које класе и цсс идентификатори учествују у игри и за шта их користимо. Сваки од њих има атрр атрибут и класе му се могу додавати помоћу аддЦласс.

 вар Тфигуре = 55; // Величина фигуре вар СтартГаме = фалсе // Покретање игре Фалсе = Нема вар НектЛевел = труе; // Тачно настави игру ако је нетачно игра се зауставља вар цолумнс = ровс = 2 // Почетна величина жетона или кругова на табли 2к2 то су 4 круга $ (доцумент) .реади (фунцтион () {// Генеришем игра према броју колона и редова сваког нивоа тежине ГенераЈуего (колоне, редови);}); функција ГамеГенерате (ц, р) {// Ако је НектЛевел једнак фалсе, значи да би игра требала престати ако се (! НектЛевел) врати; // Заустављам игру НектЛевел = фалсе; // Бришемо све елементе бине или плоче за игру $ (".гаме") .фадеОут (1000, // на крају методе фаде // празнимо елементе игре на сцени или функцији табле за игру ( ) {$ (".гаме") .емпти (); // Проширите сцену или плочу за игру тако да се прилагоде круговима $ (".цонтаинер") .анимате ({хеигхт: ((Тфигуре + 8) * р) + " пк ", видтх: ((Тфигуре + 8) * ц) +" пк "}, 1000, // на крају проширења са амимате () // Креирам нове фигуре према новој димензији екрана и функција нивоа игре () {фор (и = 0; и <(ц * р); и ++) $ (".гаме") .аппенд (ЦреатеФигуре ("круг", Тфигуре)); $ (".гаме" ) .фадеИн (200); // Насумично креирам кругове на плочи на које се може кликнути, а који нису ЦреатеБлуеФигуре ();})}); } функција ЦреатеФигуре (облик облика, р) {// Ако кликнете на било који облик, вратите $ ("") .аддЦласс (" фигуре "+ типеФигуре) .видтх (р) .хеигхт (р) .цлицк (фунцтион () {иф (СтартГаме) {// Проверавам да ли та фигура има изабрани атрибут, односно да ли има је један од оних који су били активни плавом бојом иф ($ (тхис) .аттр ("селецтед") == "селецтед") $ (тхис) .аддЦласс ("ацтиве"); елсе $ (тхис) .аддЦласс ("еррор" ); вар ТоталСелецтед = $ (".фигуре [селецтед = 'селецтед']") .ленгтх // Ако је број кликова у активним круговима и број кликова у неактивним круговима већи од броја кликова, не настављамо игру и касније ћемо поново регенерисати екран без промене нивоа иф (($ (". ацтиве"). ленгтх + $ (". еррор"). ленгтх)> = ТоталСелецтед) {СтартГаме = фалсе; $ (".фигуре [селецтед = 'селецтед']: нот (.ацтива)") .аддЦласс ("ацтива"); // Ако је ниво неуспеха клика 0, то значи да смо погодили низ иф ($ (". еррор "). ленгтх == 0) {алерт (" Добили сте низ, пређите на следећи ниво "); иф (колоне == редови) колоне ++; елсе иф (колоне> редови) редови ++; / / Максимални ниво тако н 6 редова са 6 колона иф (колоне> 6) {колоне = 6; редови = 6; }} ГенераЈуего (колоне, редови); }}}); } функција ЦреатеБлуеФигуре () {вар цоунт = 0; вар ленгтх = $ (".гаме> .фигуре") .ленгтх фор (цоунт = 0; цоунт <Матх.цеил (ленгтх / 3);) {вар рандом = Матх.цеил (Матх.рандом () * ленгтх); иф (рандом .фигуре ") .ек (рандом) .хасЦласс (" ацтиве ")) {$ (" .гаме> .фигуре ") .ек (рандом) .аддЦласс (" ацтиве "). аттр (" селецтед ", "селецтед"); цоунт ++;}}} // Сакрива изабране фигуре након што прикаже низ који се понавља виндов.сетТимеоут (ХидеБлуеФигурес, 1200)} функција ХидеБлуеФигурес () {$ (". игра> .фигуре"). ремовеЦласс ("ацтиве"); ГамеСтарт = труе; НектЛевел = труе;}

Дакле, закључујемо игру у коју можемо додати бодове, упозорења и поруке, такође звучне ако желимо, поред могућности заустављања и наставка игре, имајте на уму да је то само Јавасцрипт, ХТМЛ и ЦСС, али би било лако проширити додавање резултата у базу података или укључити виши ниво тежине.Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен