Как сделать игру на js

Добавил пользователь Валентин П.
Обновлено: 19.09.2024

Сделаем игру крестики нолики на javascript.

Будет девять ячеек, по нажатию на ячейку будет добавляться функция с записью номера ячейки, на которую кликнули.

Затем проверим ячейку есть ли в данной ячейки текст, если нет, то записываем текущее значение игрока икс или ноль.

Записываем это в массив dataX или dataO каждого игрока.

Добавляем класс икс X и O ячейки на которую нажали, чтобы окрасить ячейку.

Делаем проверку на длину массива, если он больше двух с функцией проверки на победу из комбинаций.

Приветствую всех, кто читает данную статью и загорелся желанием написать свою собственную игру. Сегодня я расскажу вам, как создается игра змейка на JavaScript. Я приведу код для html-разметки, после мы проработаем с вами стили оформления элементов и в конце пропишем логику работы приложения при помощи JavaScript. Давайте приступим!

Займемся разметкой игрового поля

Для начала необходимо прописать разметку игры. В первую очередь на странице выделим отдельное пространство под рабочую область:

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

Как вы уже заметили, на каждую кнопку я навешиваю событие. Поэтому при нажатии на какую-либо из них будет запускаться определенная функция обработки.

Ну и в конце я хочу, чтобы у меня выводился счет.

Зададим правильное отображение элементов

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

Или же создайте файл style.css и без указания style вставляйте описание стилей.

Итак, для начала сбросим стандартные параметры браузера, т.е. обнулим внутренние и внешние отступы:

Теперь создадим подложку под игровое поле:

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

Остальная разметка будет добавляться в скрипте. А пока подготовим для этого стили.

Само игровое поле мы опишем при помощи класса .field, а внешний вид клеток – с помощью класса .cell.

Далее нам нужна змея. Поэтому задаем ее классом .snake и указываем:

Ну и наконец змея должна что-то собирать. Поэтому описываем еду. В моей программе это будет квадрат красного цвета.

Дизайн игры готов. Теперь переходим к самому главному!

Заставим игру работать!

Ну вот игра готова!

Вступайте в ряды моих верных подписчиков и делитесь интересными статьями с друзьями. Приятной игры! Пока-пока!

JavaScript – очень мощный язык, гораздо более мощный, чем можно предположить.
Я понял, на что способны скриптовые языки после того, как поэкспериментировал с обработчиками событий от клавиатуры и полной перерисовкой экрана в сжатые сроки. В IE 5.0 я поставил перерисовку экрана каждые 10 милисекунд, и это не вызвало ни задержек, ни увеличения потребляемого объема памяти. Когда я это увидел, я понял, что просто обязан углубиться в изучение JavaScript. В результате получилась в чем-то простая, а в чем-то сложная игра, которая пользовалась успехом среди моих друзей. Сейчас я собираюсь попытаться создать универсальную относительно браузера игру с дружественным интерфейсом. Пусть семейство браузеров с открытым кодом представляет FireFox, как наиболее стандартный из них.

Взгляните на нижеследующий код. Он корректно работает и в IE, и в FireFox. Что меня поразило, так это то, что FireFox по сравнению с IE предоставляет расширенную поддержку обработки событий:

Это отличная новость.

Как все собрать.

Начинать следует с передвижения объекта (квадрата) по экрану. Для этого потребуются обработчики событий, передвигаемый объект, перерисовка экрана и система координат. Перед тем как создать систему координат, нужно получить реальные размеры клиентской области окна. В IE они хранятся в document.body.offsetWidth и document.body.offsetHeight. А как в Firefox? Воспользовавшись Google, я нашел свойства window.innerWidth и window.innerHeight. И все прекрасно работает.
Итак, высота и ширина системы координат определена. Теперь надо расположить наш объект точно в центре экрана. Как? Я попробовал разные способы, но наиболее подходящей мне показалась система позиционирования CSS. Перерисовывая конкретный участок экрана (ограниченный ячейкой таблицы), можно добиться высокой эффективности перерисовки.

Создание ядра

ID тела документа – gContainer, а ID перерисовываемой поверхности – gSurface. Я также создал функцию, выполняющуюся всякий раз при загрузке страницы (не обновлении, а именно загрузке). В ней инициализируется передвигаемый слой (gBox).

Инициализация сцены

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

(ширина поверхности – ширина объекта)/2
(высота поверхности – высота объекта)/2

Ix, dx, iy и dy – флаги увеличения (increase) и уменьшения (decrease) координат x и y. Так как сначала объект должен покоиться, установим все четыре флага в false. Объект не движется ни вниз, ни вверх, ни влево, ни вправо.
Теперь давайте напишем функцию, создающую движущийся объект. Для этого понадобится объявить глобальную переменную box.

Объявив её, можно перейти к написанию функции:

Если Вы новичок в объектно-ориентированном программировании на JavaScript, поясняю, что я определил экземпляр класса _box как переменную box. Параметрами конструктора являются начальные значения свойств. Обратиться к свойству созданного экземпляра можно посредством точки и имени нужного свойства.
Как Вы могли заметить, я использовал ещё не определенную функцию getScreenSize. Нам нужно быстро получать размеры экрана, а так как соответствующие команды для разных браузеров различны, я решил выделить определение размеров в самостоятельную функцию:

У нас есть класс движущегося объекта, функция для его создания и функция определения размеров экрана. Что осталось? Нужна функция, которая будет вызываться всеми нашими обрабтчиками событий, такими как OnKeyUp и OnKeyDown. Нужна также функция, которая будет вызываться каждые 25 милисекунд (это значение хранится в переменной iMs, см. второй листинг). Ну и, разумеется, нужна функция для вывода объекта на экран и передвижения его в целевую точку в соответствии с заданными параметрами движения.
Начнем с методов-обработчиков событий. Расположим их перед функцией PrepareBox().

Просто? Да, но больше ничего и не требуется. Теперь надо обработать события клавиатуры:

А теперь позвольте мне пояснить приведеннй код, так как он может оказаться непрозрачным. Здесь я меняю параметры движения объекта. Когда пользователь нажимает на правую стрелку, х-координата объекта должна увеличиваться, а сам объект – двигаться от левой границы экрана к правой. Поэтому я отслеживаю нажатие 39-ой кнопки (это и есть правая стрелка), и как только она нажата, сбрасываю флаг уменьшения х-координаты (нам не нужно двигаться влево) и устанавливаю флаг её увеличения (двигаемся вправо). Прямо противоположные действия нужно осуществить по нажатию левой стрелки (37-ой кнопки).
У-координата равна нулю в самом низу экрана. Если я хочу поднять объект вверх, я должен увеличивать у-координату. Для этого я устанавливаю флаг увеличения у-координаты (true) и сбрасываю флаг уменьшения (false).
Так как я хочу, чтобы объект двигался только пока нажаты соответствующие кнопки, нужно сбрасывать все флаги, когда кнопку отпускают. Например, если я отпускаю верхнюю стрелку, то это означает, что я не хочу, чтобы объект продолжал двигаться вверх. Поэтому я сбрасываю флаг увеличения у-координаты, что немедленно остановит дальнейшее движение объекта вверх. Если в это время я продолжаю нажимать, например, левую стрелку, то движение влево не остановится, пока я и её не отпущу.
А сейчас напишем функцию вывода объекта на экран! При изменении координат следует учитывать, что объект не должен выходить за пределы экрана.


HXXXXXX
XXXXXXX
XXXXXXX
XXXXXXX
XXXXXXX
OXXXXXW

Рис. 1 – Система координат

Мы почти достигли финала! Остался последний шаг. Нужна функция, которая будет вызываться через определенный интервал (25 милисекунд). После этого нужно будет вызвать все написанные функции в теле функции loadGame(), которая пока пуста.

Очистим поверхность и выведем новый объект. Повторяйте все время! А теперь – последний штрих!

Мы отследили все события, подготовили объект к движению (поместили его в центр экрана и инициализировали глобальную переменную для дальнейшего использования) и вызвали бесконечно повторяющуюся функцию updateScreen().
Вот готовый код:

Перейдем к делу , начал я с того, что написал страничку, на которой этот код будет запускаться:


Выглядит это следубщим образом:

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

Перейдем к самому коду игры:

в конце дописал .toLowerCase(), чтобы любой способ ввода распознавался одинаково и принимался функцией, далее это важно.

Обратите внимание, выбор компьютера — computerChoice мы определяем рандомно, задаем границы выбора для рандома:


Теперь немного информации по сабжу, Math.Random() — функция, которая рандомно выбирает число от 0 до 1, таким образом мы можем смело разбивать этот интервал на 3 части: от 0 до 0,34; от 0,34 до 0,68; от 0,68 до 1.
Расставим выбор компьютера следующим образом, первый интервал — камень, второй — бумага, третий — ножницы. (тут на ваше усмотрение, кому какой порядок больше нравится, разницы нет, рандом — он и в Африке рандом)

Далее у меня были большие проблемы с выводом результата, дело все в том, что первично при изучении JS рассказывают о console.log(), но при использовании console.log(), запись будет вестись в лог-файл, а я хотел, чтобы результаты выводились на странице. Решил эту проблему при помощи document.write():


Таким образом выводим на страницу выбор игрока и выбор компьютера.

Далее нам надо бы сравнить выбор игрока с выбором компьютера, тут зададим переменную compare, она будет содержать в себе выбор обоих игроков.


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

А как же нам быть со случаями, когда игрок оставляет поле ввода пустым или пишет слово, не соответствующее тому, которое нам подходит для игры (камень, ножницы или бумага)? Воспользуемся еще несколькими условиями:

Сначала мы определяем результат для случая, когда слово не ввели, затем определяем результат для случая, когда введенный текст не соответсвует ни одному из предложенных вариантов, напомню, что отрицание обозначается как "!= javascript">HTMLElement.write(compare(userChoice, computerChoice));



Результат выглядит так:

Под спойлер спрячу код игры целиком, не жадный, можно заимствовать, не обижусь, если автора укажете. (:

Читайте также: