Фронтальный файтинг на основе JavaScript

JavaScript

На поздней стадии прокрастинации я изначально планировал воспользоваться выходными, чтобы написать резюме на конец года, но у меня никогда не было никаких идей, и я написал такую ​​мелочь, не думая о том, что написать.

Я всегда был одержим игровой индустрией. Может быть, я не подхожу для фронтенда. Я должен изучать C++. …

Прежде всего, конечно, выберите фоновое изображение в качестве карты во всей сцене, и оно должно быть большим и высокого разрешения. Макет на странице.

Затем отобразите небольшую часть этого изображения со значением области просмотра. Здесь я использую ширину 600 и высоту 420. Лишнее сразу скрыто.

width: 600px;
height: 420px;

Написана такая простая сцена, а потом нам нужно добавить в эту сцену наших персонажей. То есть персонажи в игре. Однако текстура игры слишком сложна, и у меня нет времени на ее дизайн, поэтому я прямо нашел в Интернете гифку крупье, которая, кажется, является картой навыков DNF.Через PS-обработку я перехватил несколько важных действия и добавил его на страницу.

Теперь, когда у нас есть персонаж и карта, мы должны заставить персонажа двигаться.Мой подход заключается в том, чтобы зафиксировать персонажа в центре окна.Когда персонаж движется, перемещайте фон, чтобы персонаж выглядел движущимся.

Итак, я сделал здесь две вещи при прослушивании событий клавиатуры: во-первых, изменил текстуру персонажа, чтобы персонаж мог двигаться, а во-вторых, изменил положение фонового изображения, которое казалось бегущим.

import Scene from './components/Scene';
import Games from './components/Games';
import Person from './components/Person';

const direct = { // 有效按键
    87: 'up',
    65: 'left',
    83: 'down',
    68: 'right',
    74: 'j',
    75: 'k',
    76: 'l',
    13: 'enter',
    27: 'esc'
}

const keys = []; // 当前按键

// 初始化窗口
const App = new Games();
const client = App.getEle();
// 初始化场景, 场景要放在窗口中
const scene = new Scene(bgi, client);
// 初始化人物，人物也要放在窗口中
const person = new Person({
    name: '隐冬',
    level: 1,
}, client)

// 监听按键
window.addEventListener('keydown', (e) => {
    const key = direct[e.keyCode];
    if (!keys.includes(key) && key) { // 有效按键
        keys.push(key);
        scene.move(keys); // 执行场景变换
        person.action(keys); // 切换人物动作
    }
})
// 监听按键
window.addEventListener('keyup', (e) => {
    const key = direct[e.keyCode];
    const idx = keys.indexOf(key);
    if (idx >= 0 && key) { // 有效按键
        keys.splice(idx, 1);
        scene.move(keys); // 执行场景变换
        person.action(keys); // 切换人物动作
    }
})

Разные кнопки дают персонажам разные действия, которые на самом деле выполняются с помощью текстур.

Затем добавьте сюда уровень слота крови, имя персонажа и ценность крови.

Персонаж представляет собой класс класса. Вы можете создать множество персонажей путем создания экземпляров, а затем позволить им бегать по всему экрану. Я определяю, является ли персонаж роботом, создавая его экземпляры, и определяю собственные действия персонажа с помощью случайных чисел.

Скиллы более уродливые, и они тоже рендеры, которые можно найти в интернете.

Бороться тоже очень просто, то есть персонаж вычисляет расстояние до других персонажей вокруг себя, когда кастует умения, чтобы определить, бить или нет, а затем уменьшать объем крови. Система объявлений, это все написано, но слишком много таймеров вызвали утечку памяти, надо думать как их оптимизировать.

Адрес на гитхабе общий для всех Заинтересованные студенты могут писать сами Это довольно интересно Реально невозможно перестать писать больше и больше Что со мной не так?

ссылка для самовывоза

Ставь лайк или проси, на случай, если дадут.

Категории