Русский
Русский
English
Статистика
Реклама

PIXI.js создание кликера

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

image

Ладно, давай ближе к делу. Создать кликер при помощи pixi.js.

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

Почему Js? Почему pixi.js? Почему вообще кликер?!

Я решил показать лишь свою реализацию задачи. Не хочу учить кого-то какими технологиями пользоваться, как писать код. Просто мое решение задачи.

Перед началом написания кода:

Во-первых

Это видео с процессом создания игр. Если вам лень читать, то можно посмотреть и послушать


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

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

Для начала мы объявляем алиасы и инициализируем само приложение.

Создаем нужные переменные под все элементы игры и загружаем картинки.

image

Для картинок я выбрал формат атласа.

Если не знаком с атласом, то это json формат для загрузки большого количества картинок за один раз.

Вот так это выглядит в коде

image

Я создавал это с помощью TexturePacker. Делать такое вручную, на мой взгляд, не целесообразно.

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

image

Это стандартные действия для всего(расположение). Самое интересное это три свойства у target. interactive, buttonMode и on(pointerdown, handlerClick). Первые два нужны для взаимодействия клика и элемента target. on это обычный обработчик событий.

Теперь нам нужно написать все необходимые функции для работы игры.

image

Игровой цикл gameLoop
Состояние игры play
Обработка клика handlerClick

gameLoop просто вызывает функцию state.

В play я проверяю значение timer(он равен 10) и разрешаю клик по кнопке, так же обновляю размеры target.

handlerClick идет проверка на возможность клика и производится клик.

Из недостатка, который я вижу, это изменение размеров у target элемента. Он изменяется с 0.9 до 1. Сразу. Без анимации. Но когда ты играешь это не заметить, оставил как есть.

Как и обещал, ниже ссылка на github проект.

Если вы не сталкивались с pixi, но хотите развернуть игру у себя, то вам потребуется сервер. Я использовал openserver. Это нужно для ajax запросов.

Как и обещал ссылка на код.

pixi.js
github
Источник: habr.com
К списку статей
Опубликовано: 14.06.2020 14:16:56
0

Сейчас читают

Комментариев (0)
Имя
Электронная почта

Css

Canvas

Html

Javascript

Gamedev

Pixi.js

Категории

Последние комментарии

  • Имя: Murshin
    13.06.2024 | 14:01
    Нейросеть-это мозг вселенной.Если к ней подключиться,то можно получить все знания,накопленные Вселенной,но этому препятствуют аннуннаки.Аннуннаки нас от неё отгородили,установив в головах барьер. Подр Подробнее..
  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru