Примечание. Это введение предназначено для того, чтобы поделиться процессом и получить рекомендации. Я надеюсь, что каждый сможет внести больше предложений и принять в нем участие.
недавно для знакомстваBoneFramework, я готов использовать react для написания простого файтинга для тренировки рук. На данный момент подготовительные работы к игре завершены за 2 дня. Вы можете управлять персонажами, чтобы они двигались вперед, назад, атаковали, прыгали, активировали навыки и выполняли другие операции, но мне всегда кажется, что эта операция немного не гладкая. Далее мы готовимся улучшить больше действий и комбо персонажей, а также добавить удержание крови, жесткости и т. д. после того, как два персонажа атакуют друг друга, а также самодействие компьютерного ИИ и т. д. Я надеюсь, что студенты с опытом могут поделиться больше.
предварительная работа
Хотя анимационный эффект кажется целым, на самом деле это покадровое переключение нескольких картинок. Все, что мы можем переключить src-адрес изображения, чтобы добиться эффекта анимации. Хотя проект написан на React, идея остается той же, что и в JS, манипулируя DOM. Используйте атрибут ref, чтобы получить DOM, а затем манипулировать им.
продвижение персонажа
Ставим картинку персонажа на страницу первой, в первую очередь реализуем движение этой картинки с помощью клавиатуры. Давайте сначала определим клавиши: A — назад, D — вперед, S — присесть, а пробел — прыгнуть. В componentDidMount добавляем к изображению событие keydown, когда мы нажимаем клавишу, мы можем получить код клавиши. Зная этот код, мы можем выбрать, куда переместить изображение. Например, когда мы нажимаем D, мы получаем код клавиши 68, и мы знаем, что она предназначена для управления персонажем, чтобы двигаться вперед. Далее мы можем получить позицию персонажа через this.refs.xx.offsetLeft Допустим, мы оговариваем, что мы смещаемся вперед на 25px, мы можем установить свойства этого IMG так: this.refs.xx.style.left = this.refs.xx .offsetLeft+25+"px" Измените положение изображения, изменив свойство left изображения.
Конечно, мы должны добавить действие персонажей, иначе это не будет выглядеть как анимация. Используйте setTimeout для установки интервала переключения картинок, например, если в прямом действии 5 картинок, то картинки будут переключаться каждые 80 миллисекунд. Это обеспечивает эффект анимации. Конечно, так как изображение переключается каждые 80 миллисекунд, мы не можем переместиться вперед на 25 пикселей сразу, разделите 25 пикселей на 5 периодов переключения изображения и каждый раз перемещайтесь на 5 пикселей, чтобы это не было резко.
Здесь также есть проблема, то есть событие keydown будет продолжать вызывать это событие, когда вы нажимаете клавиатуру и не двигаетесь, так что другое действие вперед будет запускаться до завершения одного действия вперед, что делает движение персонажа очень призрачный. Здесь у нас есть 2 решения.
- Сделайте так, чтобы событие нажатия клавиши срабатывало только один раз после ее нажатия
- Позвольте персонажу закончить прямое действие, а затем активируйте другое прямое действие.
Первый метод не подходит, потому что мы продолжаем нажимать клавишу D, когда позволяем персонажу двигаться вперед, и атакующее действие персонажа может использовать первый метод. Поэтому здесь мы используем второй метод. Общая идея состоит в том, что мы сначала добавляем состояние блокировки, а начальное состояние - false. Всякий раз, когда нажимается клавиша D, если блокировка истинна, операция вперед не будет выполняться. Когда блокировка ложна, блокировка будет изменится на true, и тогда будет выполнена прямая операция. Когда действие вперед персонажа не завершено, блокировка всегда истинна, и операцию вперед нельзя выполнить снова. Когда действие персонажа вперед будет завершено, то есть когда он переключится на пятую картинку, установите блокировку в false, и персонаж снова сможет продолжить движение вперед. Назад, прыжок, действие примерно такое же, как и вперед.
атака персонажа
Существует разница между операцией атаки персонажа и операцией продвижения, то есть персонаж будет атаковать только один раз, когда клавиша J нажата все время. Здесь к картинке нужно добавить событие keyup, при этом состояние блокировки не станет ложным после того, как действие атаки персонажа завершится, а состояние блокировки должно быть изменено только после срабатывания события keyup.
персонаж приседает
Работа приседания также отличается от предыдущей операции. Работа приседания должна быть запущена нажатием S все время. Когда вы отпустите кнопку S, символ будет встать. Предыдущее состояние блокировки полезно в комбинациях ключей, поэтому мы добавляем состояние сохранения здесь. Начальное состояние является false. Когда сохранить истинно, операция не запускается. При сохранении неверно, действие приседания срабатывает и сохраняют Событие на KeyUp происходит только Make Store Make False, когда оно срабатывает.
операция комбинации клавиш
Событие keydown не может отслеживать две клавиши одновременно. Вы нажимаете две клавиши одновременно. На самом деле, событие keydown может получить только один код, так как же нам активировать комбинированную клавишу? Моя идея состоит в том, чтобы решить эту проблему с помощью государственной группы. Сначала объявите keyStatus = {}, добавьте keyStatus[e.keyCode] = true в событии keydown, а затем добавьте keyStatus[e.keyCode] = false в событии keyup. Например, мы хотим выполнить операцию атаки приседанием, когда мы нажимаем клавишу S и не отпускаем ее, тогда keyStatus[83] = true, затем снова нажимаем J, затем keyStatus[74] = true. Тогда мы судим
if(keyStatus[83]&&keyStatus[74]){
//添加事件
}
Операция комбинации клавиш может быть завершена.Конечно, когда мы отпускаем клавишу, keyStatus[e.keyCode] станет ложным.
Навыки персонажа
Здесь мы приводим пример волнового бокса.Моя идея состоит в том, чтобы продолжить создавать IMG (картинка волнового бокса), а затем скрыть его. Когда мы нажимаем кнопку, чтобы активировать навык персонажа, когда действие навыка персонажа завершено, сначала получаем позицию персонажа, затем помещаем позицию волны кулака после позиции персонажа и устанавливаем display:block для отображения изображения. Затем используйте setInterval, чтобы позволить волновому блоку летать и двигаться самостоятельно.Когда волновой блок достигает границы, clearInterval очищает и скрывает изображение волнового блока.
Конечно, здесь я реализовал управление только одним персонажем, а сражения персонажей, компьютерный ИИ и другие операции мне предстоит пройти позже, желающие могут скачать его и пройти вместе. Я надеюсь, что вы можете предложить области для улучшения. Прикрепите адрес загрузкиGitHub.com/Leslie233/День…
демо GIF