Практический пример использования классов JavaScript

Веселое, практичное использование - простая игра.

Давайте создадим очень простую игру!

Цель состоит в том, чтобы использовать класс JavaScript.

В серии, состоящей из нескольких частей, я подробно рассмотрел классы JavaScript (часть 1, часть 2, часть 3, часть 4). Здесь я хотел бы создать только один класс JavaScript и использовать его.

Этот проект не займет у вас много времени, вы можете поэкспериментировать с ним, расширить его и просто повеселиться.

Игра

Очень простой. У нас будут два игрока (хороший парень, враг) сражаться друг с другом, пока здоровье одного игрока не достигнет нуля и этот человек не умрет.

Объекты Player будут экземплярами класса Player.

Мы не будем создавать ничего со сложным интерфейсом или сложным JavaScript. Это будет вам делать на досуге. Но это сработает!

Вы можете увидеть весь код, воспроизвести его и скопировать при желании сюда. (Я могу изменить его со временем, так как это меня развлекает после дня программирования.)

Класс игрока

Этот класс JavaScript будет содержать несколько основных свойств. Большинство из них предназначены для того, чтобы вы могли экспериментировать / реализовывать самостоятельно. Для нас самым важным будет Здоровье.
Но у вас будет Оружие, Тип (персонажа) и Уровень, которые вы можете реализовать, чтобы добавить много интересных функций.

Создайте этот класс в своем любимом редакторе и протестируйте его. Изначально я использовал VSCode. Сохраните его как хотите.
(Для тестирования только класса Player я сохранил его как playerclass.js, но позже, после добавления нескольких функций, я сохраняю его как script.js, чтобы на него ссылались на веб-странице.)

Мы будем изменять и дополнять это, но это ядро нашего Player.

Затем я хочу, чтобы мы добавили два метода после конструктора.

Метод reset () будет использоваться для инициализации наших игроков и перезапуска.
Метод getAllInfo () предоставит текущую информацию обо всех свойствах наших плееров. Опять же, для этого поменяется только здоровье (уровень тоже, но я им не пользуюсь). В основном он возвращает статус.

Добавьте эти два метода после конструктора и проверьте, чтобы убедиться, что он работает.

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

Метод doBattle () получит случайное число из метода getRan (). Мы получим случайное число для каждого игрока и скорректируем его здоровье в зависимости от того, чье значение больше.

Важно. В строках 77, 80 и 86 есть ссылка на элемент HTML, действие, который мы еще не создали.

Примечание. Я настраиваю уровень игрока, но ничего с ним не делаю. По крайней мере, сейчас!

HTML

Далее мы создадим простой HTML-файл. В ‹head› мы будем ссылаться на очень простой файл CSS, а в ‹body›, script.js, который содержит наш класс Player и три функции JavaScript, которые помогут нам в игре. Присвойте HTML-файлу желаемое имя.

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

Опять же, сохраните HTML очень простым, чтобы вы могли делать это быстро и позже вносить улучшения.

Он ссылается на файл CSS, строка 6, который будет следующей. В строке 26 я сослался на свой script.js, который является классом Player и тремя дополнительными функциями.

CSS

Здесь ничего особенного. Создайте файл с именем style.css следующим образом.

Последний файл JavaScript

Я назвал его script.js. Он содержит класс Player и три функции, которые помогают нам играть в игру.

Создайте файл и назовите его script.js. Поместите в него свой класс игрока и три функции ниже, чтобы играть в игру. Ссылка на script.js - это строка 26 вашего HTML-файла.

Функция initGame () в основном настраивает игроков.
Функция startGame () запускает битву! Он заставляет player1 сражаться против player1. Кто получает урон? Пытливые умы хотят знать.
Функция status () показывает текущий статус каждого игрока, опять же, здоровье является важным для нас.

Запуск игры

Откройте HTML-файл в браузере и попробуйте. После того, как вы нажмете «Play / Reset», он должен выглядеть следующим образом. Продолжайте нажимать кнопку «Начать бой» и следите за здоровьем. Когда один достигает нуля, этот игрок умирает.