В този урок ние създаваме игра за обличане (или генератор на знаци) с помощта на React и Sass. Този урок и проект са вдъхновени от тази статия, която обяснява как да направите игра за обличане с помощта на JavaScript, HTML и CSS.
Бих дефинирал генератор на символи като потребителски интерфейс (UI), който ви позволява да избирате между прически, цвят на кожата, очи, нос, уста и други характеристики, определящи характера, за да създадете уникален герой. Пример за това е „генераторът на аватари на South Park“. Бих определил играта за обличане като потребителски интерфейс, който ви позволява да избирате между дрехи за статичен герой. Игрите за обличане и генераторите на герои могат да имат известно припокриване, тъй като генераторите на герои могат да ви дадат опции за облекло, а игрите за обличане могат да ви дадат известен контрол върху външния вид на героя, като цвета на косата и прическата. В този блог ще използвам термините „обличане“ и „генератор на знаци“ взаимозаменяемо.
Крайният продукт (за да знаете в какво се захващате, когато четете този урок) може да се види тук и тук:
Кодът, обсъден в тази статия, е наличен в моя акаунт в GitHub в хранилище, наречено React_Dressup_Game:
Вземете вашите изображения
Нарисувах изображенията си с помощта на Inkscape, безплатен векторен графичен редактор с отворен код, използван за създаване на векторни изображения. Исках изображенията ми да бъдат векторни графики, така че в крайна сметка да мога да програмирам начин за превключване на цветовете за изображенията, без да се налага да записвам множество версии на едно и също изображение в различни цветове (все още не съм разбрал как да направя това, но знам, че е възможно). Експортирах изображенията като PNG файлове за този проект, но можете да опитате да използвате различни файлови формати.
Играта за обличане, която правим в този урок, ще има следните сменяеми елементи: очи, нос, уши, уста и дрехи.
Запазих всеки елемент в различни слоеве. Има изображение за тялото и изображения за различните очи, носове, уши, уста и дрехи.
Елементите не се припокриват един с друг, така че няма да се налага да обработваме реда на припокриване (z-индекс) в CSS.
Конвенцията за именуване на файлове ще бъде важна за работата на програмата. Това ще трябва да бъде твърдо кодирано.
Инсталирайте NPM
Инсталирайте NPM или друг мениджър на пакети като Yarn, ако вече нямате инсталиран. Инсталирах най-новата версия на Node и NPM.
Създайте проект React
Създадох основен React проект с помощта на Create React App, което според reactjs.org е най-добрият начин да започнете да създавате ново едностранично приложение в React.
npm start ще стартира проекта локално и ще го отвори във вашия браузър. Ще презапишем кода, който в момента е в App.js, където се намира основната логика.
Инсталирайте Sass
Sass означава Syntactically Awesome Style Sheets. Това е CSS препроцесор, което означава, че е скриптов език, който разширява CSS, като позволява на разработчиците да пишат код на един език и след това да го компилират в CSS. Той добавя специални функции като променливи, вложени правила и миксини в обикновен CSS, което прави процеса на кодиране по-прост и по-ефективен. Sass намалява повторението на CSS и следователно спестява време.
Реших да използвам Sass вместо CSS, за да запазя кода кратък, защото има много повтарящи се стилове за различните елементи за обличане.
За да използвате Sass в React проект, трябва да инсталирате пакета node-sass, което можете да направите с помощта на мениджъра на пакети npm или yarn.
След като изпълните командата, трябва да видите node-sass във вашия файл package.json.
ЗАБЕЛЕЖКА: При инсталиране на node-sass без посочване на версия (след инсталиране на най-новите версии на Node и NPM) и изпълнение на проекта, получих следната грешка:
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.
Прочетох в тази публикация за препълване на стека, че за да коригирате този проблем, трябва да инсталирате най-новата версия на node-sass преди 5.0 (която е [email protected]). Направих това и проектът стартира без грешки.
Показване на изображения на екрана
Създайте папка с активи под папката /src. В папката с активи създайте 2 папки, една за изображенията (която нарекох „img“) и друга за Sass файловете (която нарекох „scss“).
В папката /scssще запишете файл със заглавие style.scss (може да е всяко друго име, но трябва разширение scss). В папка /img запазете изображенията за играта (основата/статичното тяло и сменяемите елементи). Имайте папка за всеки елемент (напр. /eyes, /clothes, /nose и т.н.).
Ние показваме изображенията, като използваме CSS свойството background-image. Ние дефинираме тагове div в кода с име на клас, съответстващо на общия елемент (напр. очи), и идентификатор, съответстващ на конкретен елемент (напр. eyes1), който ще бъде превключван въз основа на въвеждането на потребителя. Ето как ще променим конкретните показани елементи.
Ако заменим кода в App.js със следния код:
И добавяме следното към style.scss:
Виждаме следното на екрана (съответства на моите файлове с изображения, които можете да проверите в repo):
Трябва да добавим останалите изображения към листа със стилове и имам различни количества изображения за елемент. Можете да си представите колко дълъг ще стане файлът style.scss, ако просто продължа да копирам и поставям стиловете и променям числата, така че да съответстват на правилните изображения.
Ще стане трудно, досадно и податливо на грешки добавянето на нови елементи и нови изображения на елемент. Би било неподдържано и разочароващо. Тук идва Sass!
Нека първо се заемем с изображенията за всеки елемент. Всеки елемент основно има едно и също име на файл, с изключение на номера в края. Можем да генерираме стиловете за изображение под даден елемент, като използваме for цикъл.
Намалихме кода, но можем да го направим по-добре. Ако създадем карта (карта в SASS има двойки ключ/стойност), където ключовете са имената на папките на елементите, а стойностите са общият брой изображения за всеки елемент, можем да намалим горния код до това, което прилича на вложен цикъл for, използвайки правилото @each.
Сега, след като добавихме всички изображения към листа със стилове по кратък начин, нека работим върху внедряването на логиката за превключване между изображения на артикули на героя (функционалността за обличане).
Добавете функция за обличане
В предишния раздел дефинирахме div тагове в React с име на клас, съответстващо на общия елемент (напр. очи) и идентификатор, съответстващ на конкретен елемент (напр. eyes1) с намерението да превключваме тези елементи въз основа на въвеждането на потребителя. ID, който се променя, ще промени изображението, показано за конкретен елемент. Можете да тествате това, като промените идентификаторите на div в кода на React и презаредите сайта, или като промените идентификаторите с помощта на Chrome DevTools в браузъра Chrome.
Ще започнем с добавяне на бутони „следващ“ за всеки елемент, така че потребителят да може да превключва всеки елемент.
Добавете стил към бутоните „следващ“, така че да са поставени отдясно на персонажа за обличане:
Когато се щракне върху бутон за елемент, ние искаме името на класа за съответния елемент div да се актуализира до следващия елемент. Например, когато се щракне върху бутона, озаглавен „следващи очи“, искаме името на класа за div с id, равен на „eyes“, да се промени от „eyes1“ на „eyes2“ или от „eyes2“ на „eyes3“, и така нататък. За да постигнем това, трябва да следим текущия брой на всеки показван артикул и общия брой налични изображения за артикул.
Реших да използвам React Hooks, за да използвам state, за да следя текущото изображение на елемент и общия брой изображения на елемент.
Във функцията App() дефинирайте променлива на състоянието, наречена dressupState, където ще следим текущото изображение на елемент и общия брой изображения на елемент:
Дефинирайте функция, озаглавена next за актуализиране на изображението за елемент:
Добавете функция next() към бутоните „следващ“:
Следващите бутони могат да бъдат написани в по-кратък код чрез итерация върху ключовете на променливата dressupState:
Актуализирайте div, които бяха добавени по-рано, така че техните класови стойности да се дефинират въз основа на текущото изображение за елемент:
Divs могат също да бъдат написани в по-кратък код чрез итерация върху ключовете на променливата dressupState:
Сега потребителят може да избира различни елементи с помощта на бутоните „следващ“.
[Бонус] Добавете бутон за рандомизиране
За да бъдат показани произволно избрани елементи, трябва да получим произволно цяло число от 0 до общия брой изображения за даден елемент и да го присвоим на името на класа на div на съответния елемент.
Реших да направя функция, наречена updateDressUp(), която актуализира променливата на състоянието dressUpState, дадени item и new_current стойности. Направих това, за да избегна повтарянето на продължителното обаждане до setDressupState.
Създадох функция, наречена randomize, която за всеки елемент получава произволно цяло число от 0 до общия брой изображения за елемента и задава новото (или същото) число като новото текущо за този елемент.
След това добавих бутон, който извиква функцията randomize при щракване.
Накрая добавих стил към бутона. Поставих го под бутоните „следващ“ и направих текста на бутона удебелен.
Краен резултат
Пълен код App.js:
Пълен style.scss стилов лист:
Геймплей за обличане:
Внедрена игра за обличане: https://meramos.github.io/React_Dressup_Game/
Сега имате основна игра за обличане или генератор на герои, към които можете да добавите още функции и да персонализирате. Можеш:
- добавете бутони „предишен“, за да отидете до бутоните „следващ“,
- добавете панел с бутони за изображение за всеки елемент, така че вместо потребителят да трябва да щрака през следващите бутони, те могат да видят и да щракнат върху точния елемент, който искат да използват,
- добавете функционалност за изтегляне на изображение с избраните от потребителя елементи,
- направи сайта красив,
- и т.н.
Забавлявай се!
Ако ви е харесала тази статия, моля, препоръчайте и споделете.
Препратки
- Направете игра за обличане с помощта на Javascript, HTML и CSS
- „React: Създайте ново приложение React“
- „Какво е Sass? Вашето ръководство за този най-добър CSS препроцесор»
- „Въведение в Sass“
- „Добавяне на Sass за създаване на приложения за React App“
- Препълване на стека: Грешка: Node Sass версия 5.0.0 е несъвместима с ^4.0.0
- Документация на Sass: за правило
- Документация на Sass: карти
- Документация на Sass: всяко правило
- „Инструменти за разработка на Chrome“
- „React: Представяне на куки“
- „React: състояние и жизнен цикъл“
- „React: Използване на State Hook“
