Това е част от курса „„Пробивна игра с JavaScript, React и SVG““.

В този курс изграждаме Breakout Game с JavaScript, React и SVG без библиотеки, просто обикновен модерен JS и React. Ние използваме функционално, неизменно програмиране и по пътя научаваме React Hooks, SVG изобразяване и основите на разработката на игри. Можете да намерите изходния код в това хранилище на GitHub и разгледайте играта тук. Това е последната част от курса, където ще накараме всички части да работят заедно.

Сцена

Днес ще работим само с един файл — scene.js, тъй като вече приключихме с разработването на всички останали части на играта. Първо, нека актуализираме импортирането и да декларираме няколко променливи в горната част.

8: // Имаме обект, който картографира движения към клавишни кодове на клавиатурата.

13: // Ако играчът натисне клавиша за интервал, ще спрем или възобновим играта.

15: // Ще актуализираме състоянието на играта и ще рендираме отново 60 пъти в секунда.

Няма толкова много действия, трябва да се справим само със ситуации, когато размерът на контейнера се промени (за да изобразим играта правилно); когато играчът натиска или пуска клавиши на клавиатурата; на всеки няколко милисекунди ще се нарича тик действие, а редукторът ще връща ново състояние на играта.

За да направим редуктора по-чист, ние заменяме превключвателя с по-функционален подход, като създаваме обект с манипулатор за всяко действие. Манипулаторът е функция, която получава старо състояние и полезен товар.

3: //Когато размерът на контейнерите се промени, ние актуализираме състоянието с нови проектори.

8: //Когато играчът натисне клавиша, ние проверяваме дали е ляв или десен ход.

16: // При вдигане на клавиша ние проверяваме дали играч иска да постави на пауза/поднови играта и извършваме подходящи операции с времето.

27: // Ако играта е на пауза, връщаме старото състояние. В противен случай изчисляваме колко време остава от последната актуализация и извикваме функция от предишната част.

В редуктора вземаме манипулатор за получен тип действие. Ако сме внедрили манипулатора за това действие, ние връщаме резултат от извикването на манипулатора.

След това нека работим върху компонента. За да опростим извикването за изпращане, можем да напишем малка помощна функция.

Искаме да актуализираме проекторите всеки път, когато размерът на контейнера се промени. За да направим това, ние използваме кука useEffect.

След като добавим тази кука, можем да видим, че играта изглежда добре, независимо от размера на екрана.

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

Честито! Завършихме разработката на играта. Комитът с окончателните промени можете да намерите тук. Ако харесвате повече видео формати, разгледайте този курс в YouTube.

Достигнете следващото ниво на фокус и продуктивност с increaser.org.