Saved searches
Use saved searches to filter your results more quickly
Cancel Create saved search
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
mrreads / clicker Public
Clicker build with JavaScript.
mrreads/clicker
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Switch branches/tags
Branches Tags
Could not load branches
Nothing to show
Could not load tags
Nothing to show
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Cancel Create
- Local
- Codespaces
HTTPS GitHub CLI
Use Git or checkout with SVN using the web URL.
Work fast with our official CLI. Learn more about the CLI.
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
Latest commit message
Commit time
README.md
Кликер написан в стиле ООП.
Добавление «новых опций улучшения» происходит путём создания экземпляра класса.
Использование сторонних графических ресурсов
Кликер исполнен в стилистике игры Sonic The Hedgehog, спрайты были найдены на просторах интернета.
PIXI.js создание кликера
Большинство тех, кто начинает изучать программирование, начали это из-за желания сделать свою игру. Нууу… я не исключение, но судьба меня занесла в веб разработку.
Ладно, давай ближе к делу. Создать кликер при помощи pixi.js.
Задача тривиальная, но т.к. в разработке игр я мало разбираюсь, то пришлось изучить чуть лучше эту тему.
Почему Js? Почему pixi.js? Почему вообще кликер?!
— Я решил показать лишь свою реализацию задачи. Не хочу учить кого-то какими технологиями пользоваться, как писать код. Просто мое решение задачи.
Перед началом написания кода:
Это видео с процессом создания игр. Если вам лень читать, то можно посмотреть и послушать
Во-вторых весь код я вставлю картинкой, но в конце статьи будет ссылка на github с исходниками проекта, чтобы вы могли сами потыкать.
В коде я оставил поясняющие комментарии для вас, надеюсь понятно будет.
Для начала мы объявляем алиасы и инициализируем само приложение.
Создаем нужные переменные под все элементы игры и загружаем картинки.
Для картинок я выбрал формат атласа.
Если не знаком с атласом, то это json формат для загрузки большого количества картинок за один раз.
Вот так это выглядит в коде
Я создавал это с помощью TexturePacker. Делать такое вручную, на мой взгляд, не целесообразно.
С помощью функции setup я разбираю атлас, задаю расположение элементов, стили для текста, добавляю начальное значение очков.
Это стандартные действия для всего(расположение). Самое интересное это три свойства у target. interactive, buttonMode и on(«pointerdown», handlerClick). Первые два нужны для взаимодействия клика и элемента target. on — это обычный обработчик событий.
Теперь нам нужно написать все необходимые функции для работы игры.
Игровой цикл — gameLoop
Состояние игры — play
Обработка клика — handlerClick
gameLoop просто вызывает функцию state.
В play я проверяю значение timer(он равен 10) и разрешаю клик по кнопке, так же обновляю размеры target.
handlerClick идет проверка на возможность клика и производится клик.
Из недостатка, который я вижу, это изменение размеров у target элемента. Он изменяется с 0.9 до 1. Сразу. Без анимации. Но когда ты играешь это не заметить, оставил как есть.
Как и обещал, ниже ссылка на github проект.
Если вы не сталкивались с pixi, но хотите развернуть игру у себя, то вам потребуется сервер. Я использовал openserver. Это нужно для ajax запросов.
Как и обещал ссылка на код.
Как сделать кликер на простой html кнопке? (Нужен чистый javascript)
Вот вопрос: как сделать кликер, на обычный html кнопке? На чистом коде javascript. Например id кнопки «b1». Нужно чтобы при нажатии на кнопку, прибавлялось +1 к div с айди money (допустим его переменная «mon1») Скиньте готовую версию кода плиз. Долго не могу это сделать. Если не понятно, то в коментариях постараюсь объяснить как можно лучше.
Дополнен 5 лет назад
тобеш ты нажимаешь на кнопку, и к строке с айди «money» прибавляется 1.
Лучший ответ
const reducer =startm=>display.innerHTML = `Money : $ $`;
reducer(startmoney);
button.addEventListener(«click», () => startmoney += 1;
reducer(startmoney);
>);
———————————->
Loxoped LosharikУченик (157) 5 лет назад
Спасибо! Попробую обязательно! Но вот что мне тут нужно изменить под свой айди элементов? Айди кнопки one, а айди индикатора money.
Loxoped LosharikУченик (157) 5 лет назад
А нет, я затупил, не надо.
Loxoped LosharikУченик (157) 5 лет назад
Это же чистый js?
Loxoped LosharikУченик (157) 5 лет назад
Но тут проблема, нужно сделать еще таких 3 штуки, но при написании такого же кода (только с изменением айди кнопки, и в 9 строке как у Вас на картинке) ничего не работает. Ошибку пишет в консоли с самого начало второго кода. Что не так?
Loxoped LosharikУченик (157) 5 лет назад
Вторая кнопка — айди b2
Третья кнопка — b3
И естественно четвертая — b4.
Я уже не знаю. Ничего не выходит.
Loxoped LosharikУченик (157) 5 лет назад
Получается что я переименовал все дальне идущие let (сделал их var). Все работает, но пишется разный результат. то есть b1 дает +1 и к примеру при 5 кликах (результат money 5) остается, но при клике b2 (+5) уже результат сразу 5. То есть при клике на разных кнопки, разный результат.
Как сделать автокликер по определенному button`у
Пытаюсь сделать автоклик по определенному button`y пока на странице не появится надпись Успех.
if(!$( "div:contains('Успех')" ).length)
Хотел сделать это в виде тайминтервала но он даже после появления надписи будет проверять страницу на наличие слова? Как это можно сделать по другому? И к тому же не могу разобраться как отличать кнопки друг от друга, что бы кликать не на все сразу а на одну если их там много.