как сделать кликер на JS
создай кликер. Выдай на страницу квадратик, в нем цифру 0, по клику на квадрат – цифра каждый раз увеличивается на 1.
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как написать кликер
Здравствуйте. Нужно сделать кликер на .NET FrameWork 4.5. Помогите.
Кликер в фоне. Как реализовать?
Добрый день. Хочу сделать так, чтобы кликкер выполнял действия в браузере в фоне, даже допустим в.
Подскажите как исправить ошибку, программа кликер
using System; using System.Collections.Generic; using System.Linq; using System.Text; using.
Кликер
Всем привет! Подскажите кто нибудь,надо сделать чтобы программа нажимала определенную кнопку при.
1586 / 796 / 362
Регистрация: 01.02.2019
Сообщений: 1,047
Дії Даниил, Просто:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
div id="block">0div> style type="text/css"> #block display: flex; justify-content: center; align-items: center; height: 50px; width: 50px; background-color: beige; cursor: pointer; } style> script type="text/javascript"> block.onclick = () => block.innerText++; script>
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Кликер
Доброго времени суток господа, у меня возник нубский вопрос, есть расширение для гугл хрома.
Кликер
Хочу написать кликер для 1 он-лайн игрушки, но ни разу не писал кликеры. Хотел бы попросить либо.
Кликер
Привет. Я недавно захотел сделать клипер на юнити . Тема: Rust clicker. У меня вопрос? Как.
кликер
Друзья можна зделать кликер для сайта которий би кликал по силках перед которими стоит специальное.
Кликер
помогите пожалуйста перевести код на с++ using System; using System.Windows.Forms; namespace.
Кликер
Всем привет Нужна помощь. Как можно сделать програмку ниже, что бы прикрепить к конкретному окну?
JS Игра | В кликер не добавляется нужное количество
Я долго мучился со стилями и у меня получился сайт, без JS. Я добавил JS к моей игре. Игра кликер. На верху показывается счётчик кликов, ниже получить клик. Ещё ниже есть магазин клик-power, чтобы за один клик получать не один, а два, пять и больше. Я получил баг в магазине. Я начал с покупки одного клика. По логике, он должен был проверить, если кликов достаточно на покупку, то вычесть из глобальных кликов цену, clickPower отобразить на сайте. У меня получилось, но не так, как надо. Я сначала докликиваю до 5 кликов, покупаю один клик-power, и вижу, что у меня счётчик кликов обнулился. Потом я нажимаю получить клик, получаю два клика (что так и должно быть), а при повторном, получаю один. Помогите.
var clicks = 0; var clickPower = 1; var upgradeCost1 = 5; var upgradeCost2 = 25; var upgradeCost3 = 50; var upgradeCost4 = 250; var upgradeCost5 = 500; const onClick = () => < document.getElementById('clicks-count').innerText = clicks + clickPower; clicks++; >const increaseOne = () => < if (clicks >= upgradeCost1) < clicks = clicks - upgradeCost1; clickPower += 1; document.getElementById('clicks-count').innerText = clicks; >> document.getElementById('big-btn').addEventListener('click', onClick) document.getElementById('upgrade-button-1').addEventListener('click', increaseOne)body < background-color: #DFDFDF; >.app .count-back h1 < text-align: center; >.app .click-menu #big-btn:hover < transform: scale(1.1, 0.9) >.app .click-menu #big-btn < position: relative; height: 50px; width: 300px; font-size: 40px; border-radius: 25px; transition-duration: 0.3s; transition-property: unset; >.app .upgrades>ul < list-style-type: none; padding-left: 300px; >.app .upgrades>ul li < padding: 3px; >.app .upgrades>ul li span < font-size: 30px; >.app .upgrades>ul li .upgrade-button < width: 216px; height: 50px; font-size: 16px; font-weight: bold; >.app .click-power-block < padding-left: 380px; >.app .click-power-block > p < font-size: 36px; >.app .upgrades .upgrade-button < border-radius: 30px; transition-duration: 0.5s; >.app .upgrades .upgrade-button:hover
Попробовал сделать кликер на js, что не так?
Собстна, в консоли нет ошибки, проверил все, что не так, подскажите, пожалуйста.
- Вопрос задан более трёх лет назад
- 4930 просмотров
2 комментария
Простой 2 комментария
Dima Polos @dimovich85 Куратор тега CSS
Меня настораживает clearRect ПОСЛЕ того как выводите информацию на канвас. Как по мне логичнее вызвать очистку ДО вывода, то есть вначале функции.
ЗЫ Почему бы вместо канваса просто innerhtml не заюзать? Вы же ничего вроде не рисуете.
Fishka (IT-направление)
На экране в случайном месте появляется прямоугольная область – регион. Кликнув по ней мышкой, игрок получает +1 очко, а прямоугольная область перемещается в новое случайное место. У игрока есть 20 секунд чтобы успеть набрать наибольшее количество очков.
Видео с готовым результатом
Ход работы
1. Создание и подготовка проекта.
1.1. Создайте в вашей папке с сайтами новую папку «canvas-clicker» и в ней создайте такую структуру файлов и папок:
canvas-clicker
—js
—-script.js
—css
—-style.css
—index.html
Файл со стилями style.css
body, html <
margin:0;
width: 100%;
height: 100%;
background-color: #2d2d2d;
>
Файл со скриптами script.js
var canvas = document.getElementById(«canvas-main»);
canvas.width = window.innerWidth; // ширина холста занимает всю ширину экрана
canvas.height = window.innerHeight; // высота холста занимает всю высоту экрана
var WIDTH = canvas.width;
var HEIGHT = canvas.height;
var ctx = canvas.getContext(‘2d’);
2. Понятие игрового цикла
В работе с canvas мы используем анимацию. Для того, чтобы что-то изменилось на холсте, необходимо проводить такой цикл:
1) очистить весь холст
2) отрисовать объекты в их координатах
И делать это столько раз в секунду, чтобы человеку казалось это плавным. Например, базово это можно делать 25 кадров в секунду (то есть, с интервалом в 1000/25 = 40 миллисекунд).
2.1. Напишем игровой цикл в конце программы:
var ctx = canvas.getContext(‘2d’);
3. Добавление объекта – региона.
3.1. Для создания региона будем использовать функцию-конструктор
var ctx = canvas.getContext(‘2d’);
// Объявляем переменные, характеризующие свойства региона – координаты и размеры
var regionX,regionY,regionW,regionH;
function createRegion() <
regionX = Math.random()*WIDTH;
regionY = Math.random()*HEIGHT;
regionW = 20;
regionH = 20;
>
// Сразу же вызываем эту функцию
createRegion();
3.2. Напишем функцию для отрисовки региона и будем вызывать её в игровом цикле.
createRegion();
function update() <
// Очищаем холст
ctx.clearRect(0,0,WIDTH,HEIGHT);
// Отрисовываем прямоугольник
ctx.fillStyle=»green»;
ctx.fillRect(regionX,regionY,regionW,regionH);
>
setInterval(function() <
update();
>,40);
3.3. Запустите index.html и пообновляйте её несколько раз. Если всё было написано без ошибок, то вы увидите небольшой прямоугольник зелёного цвета, который каждый раз появляется в новых координатах.
4. Программируем событие нажатия мышки
setInterval(function() <
update();
>,40);
5. Добавление очков за клик по региону
5.1. Сейчас у нас за клики ничего не даётся. Негоже. Пора добавить очки. Вначале игры они равны нулю:
var ctx = canvas.getContext(‘2d’);
5.2. При каждом удачном клике по региону будем увеличивать очки на 1.
if(mouseY>=regionY && mouseY <=regionY+regionH) <
createRegion();
score = score + 1;
>
5.3. Набранные очки хранятся в памяти, но было бы круто вывести их на экран, не так ли? Всё, что мы выводим, прописываем в функции update. Дополним эту функцию.
function update() <
// Очищаем холст
ctx.clearRect(0,0,WIDTH,HEIGHT);
// Отрисовываем прямоугольник
ctx.fillStyle=»green»;
ctx.fillRect(regionX,regionY,regionW,regionH);
// Выводим количество очков
ctx.font = «20px Arial»
ctx.fillStyle=»white»;
ctx.fillText(score,30,40);
>
6. Добавление таймера
6.1. Чтобы ограничить время игры и увеличить её интересность, добавим таймер. Объявим переменную, которая будет хранить количество времени.
var ctx = canvas.getContext(‘2d’);
var score = 0;
var time = 0;
6.2. Теперь рассмотрим, каким образом можно увеличивать таймер. Мы сделали так, чтобы игровой цикл повторялся каждые 40 миллисекунд – это 25 кадров в секунду. Найдите место в коде, где это прописано. Идея в том, что если нам нужно что-то повторять с какой-нибудь периодичностью, мы можем это делать каждые N кадров. Например, если нам что-то нужно повторять каждые 3 секунды (например, генерировать врагов или пищу в игре), то мы проверяем, прошло ли 75 кадров (25 кадров * 3 секунды = 75).
С таймером увеличение будет каждые 25 кадров. Для проверки, прошло ли 25 кадров мы используем операцию остатка от деления на это количество кадров
// Объявляем переменную с кадрами, вначале их 0
var frames = 0;
setInterval(function() <
frames++; // увеличиваем количество кадров на 1
if(frames%25==0) < // Если прошло 25 кадров, то
time = time + 1;
>
update();
>,40);
6.3. Как и со счётом, нам нужно выводить время на экран. Сделайте это самостоятельно.
7. Финал игры
Добавим ограничение в 20 секунд. Если проходит 20 секунд, то на экран выведется количество набранных очков и игра окончится (кликать больше будет нельзя)
7.1. Добавим функцию проверки времени. Если время закончится, будем выводить alert (это пока что).
function checkTime() <
if(time>=10) <
alert(«Game over! You have » + score + » scores!»);
>
>
Вызываем эту функцию в игровом цикле:
if(frames%25==0) <
time = time + 1; // Увеличили время
checkTime(); // Проверили, не закончилось ли оно
>
7.2. Рассмотрим два состояния игры:
1) игра не окончена (на экране регион, на который можно кликать, увеличиваются очки и время)
2) игра окончена (больше очки не добавляются, на экране надпись об окончании игры)
За эти состояния будет отвечать переменная булева переменная isGameOver, которая вначале будет равной false, а в момент, когда время выйдет, сделаем её true.
var score = 0;
var time = 0;
var isGameOver = false;
7.3. Теперь поправим код с учётом этих двух состояний – игровой цикл будет увеличивать фреймы и осуществлять перерисовку только если игра не окончена.