Минер на странице хтмл и джава скрипт, как реализовать?

Question

[Никита Зеликов]

Доброе время суток, у меня есть верстка сайта, начал заниматься джава скриптом, не могу разобраться с правильным написания кода, прилагаю скрин и обьясню что в конечном хотелось бы получить.
Схема:
1)выбор кол-во бомб с помощью ползунка,
2)Есть игровая валюта, выбор ее кол-ва и коэффициент,
3)Сверка с балансом (Игровой валютой) и вывод сообщения если недостаточно игровой валюты,
4)Рандомное определение бомб на статической доске 5х5,
5)Сделать две константы (-1 это бомба, 1 это алмазик)

Помогите знатоки, очень хочется разобраться с данным вопросом.

Comments

[WbICHA]

Помогите знатоки, очень хочется разобраться с данным вопросом.

обьясню что в конечном хотелось бы получить

То есть ты хочешь, чтобы тут за тебя весь код написали? Извини, ты промахнулся, тубу сюда: freelance.habr.com

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

Или у тебя есть код, но нам ты его не покажешь, потому что он у бабушки в деревне?

[Никита Зеликов]

WbICHA,
Меня интересует как сделать канвас блоки 5х5, и на них подключать клики?

[t800zippygod]

gzmone, ну тут 2 варианта: 1) Наложить поверх канваса div элементы, совпадающие с ячейками на канвасе и отслеживать события на эти дивы, 2) Отслеживать клики на канвасе, а потом путём математических вычислений и сопоставления координат определять, на какую ячейку нажали.
Тут уже выбирайте исходя из того, что у вас лучше получается: верстать или считать))

[WbICHA]

t800zippygod, первый вариант ─ убогий костыль. Тем более в данном случае с элементарной квадратной сеткой.
Тем не менее тут есть альтернатива ─ использовать свг вместо канваса. Эвенты можно прямо на элементы свг повесить. Но это, имхо, имеет смысл если имеешь дело со сложными фигурами, для которых высчитывать клик тот ещё геморрой.

[Никита Зеликов]

t800zippygod, Понял, спасибо,
Создал вот так, вопрос теперь следующего характера, как сделать чтобы в клетку где пусто(нету бомбы), вставить изображение?

[t800zippygod]

gzmone, в canvas есть метод drawImage, туда надо передать картинку и координаты куда ее вставить
Картинку можно подгрузить таким скриптом:
// Создаем объект изображения
const img = new Image();

// Привязываем функцию к событию onload
// Это указывает браузеру, что делать, когда изображение загружено
img.onload = function() {
context.drawImage(img, 10, 10);
};

// Загружаем файл изображения
img.src = "face.jpg";

[Никита Зеликов]

t800zippygod, Спасибо, разобрался.