Leaderboard

obj.className - это свойство объекта, а не сам объект и равно оно у вас строке 'open menu'

Шаг 3. Теперь добавим цвета. Я не стал ничего изобретать, а просто зашел в поиск по картинкам гугла и вбил запрос "minesweeper number colors", первая же картинка мне идеально подошла. Открываем её в фотошопе и вырезаем клетку. Для этого выберите инструмент прямоугольного выделения (M), выделите клетку (ширина и высота выделения у меня получились 128х128) и скопируйте выделение (CTRL+C если у вас винда). Затем переключитесь назад на наш макет и вставьте скопированное (CTRL+V). Теперь макет должен выглядеть так: Очевидно, что клетка слишком большая, нам нужно её уменьшить. Для этого нажмите CTRL+T или выберите в меню Edit > Transform > Scale. Чтобы при уменьшении не потерялся пиксельный стиль клетки, в меню трансформации в выпадающем меню интерполяции выберите режим Nearest Neighbor. Уменьшите клетку до размера 56х56 пикселей и перетащите её в верхний левый угол нашего поля. Такой размер я выбрал потому, что в сапёре всё-таки нет зазоров между клетками и я тоже решил их не делать. После всех этих операций надобавляйте оставшихся клеток, копируя получившуюся, слейте полученные слои (Layer > Merge Down или CTRL+E) и переименуйте слой с клетками в "Cells": Теперь вернёмся к документу с картинкой из гугла и вырешем иконки флажка и цифр. Для этого воспользуемся инструментом Magic Wand (волшебная палочка - W). В настройках палочки снимите галку с чекбокса Anti-alias и установисе галку в чекбокс Contiguous: Иконки флажка и мины - двухцветные, поэтому кликать палочкой на них нужно зажав Shift, чтобы добавлять выделение к уже существующему. Выделите флажок и вырежте его на наше игровое поле (так же как клетку). После этого уменьшите его (CTRL+T). Чтобы сохранить пропорции нужно включить опцию Maintain aspect ratio. Я уменьшил иконку до сорока процентов от первоначального размера. Переместите иконку в левый верхний угол игрового поля. И проделайте всё тоже самое для остальных иконок. Теперь наш документ выглядит так: Ссылка на макет.

Вынос мозга... Сервер CSS? Перенос сервера на хостинг? WTF?

ну да

ну раз у вас все формы сразу на странице - что очень не очень можно прямо в calc передавать нужные данные https://jsfiddle.net/gh7bhd4d/1/ А вообще я бы данную всплывающую форму сделал одну и передавал бы в нее массивы данных на основе которых она бы выводила нужные данные в нужном виде.

если обработчик вешался так: $('ul').on('click','li',foo) то убрать его можно только так: $('ul').off('click','li',foo) если вы хотите обработчик убирать по классу, можно сделать так: 1. внести в вашу функцию проверку на этот класс 2. привязывать обработчик к каждому конкретному объекту

Шаг 4. Теперь будем готовить спрайт для собственно игры. Создайте новый макет (CTRL+N) с размерами 672х56 пикселей. 56 потому, что это высота клетки, а 672 потому что вариаций клеток у нас 12 штрук, если считать пустую (56 * 12 = 672). Для удобства позиционирования измените размер грида до 56х56 (см. предыдущие шаги), жмём Edit > Preferences > Guides, Grids & Slices... и в поле Gridline Every вводим 56. Далее копируем все клетки по очереди, для удобства копирования можно на предыдущем макете слить слои в один (Layer > Merge Visible). Вот что получилось у меня: Мина, флажок и пустая клетка находятся в конце потому что так будет удобней раздавать индексы клеткам: единица будет означать едницу, двойка - двойку и т.п., индекс 12 будет означать пустую клетку. Часть 2: устанавливаем Phaser. Phaser - это игровой HTML5-движок, написанный на JS, который использует в качестве рендера другой движок Pixi. В принципе можно написать игру используя только Pixi, но поверьте, с фазером всё становится гораздо проще. Там где это возможно, Phaser использует для рендера WebGL, если браузер не поддерживает эту технологию, то используется тупо Canvas с 2D-контекстом. Тем, кто первый раз слышит про Phaser рекомендую пролистать примеры того, что на нём можно сделать. Самым большим минусом этого движка я считаю неудобную документацию, поиск по которой может быть очень затруднительным. Однако этот недостаток компенсируется отличным коммюнити (если вы понимаете английский конечно), мало того, на форуме частенько даёт ответы автор движка. Фазер из коробки имеет три физических движка: Arcade Physics, Ninja Physics и P2 Physics. Arcade Physics идеален для простых игр, если вам требуется обработка коллизий AABB, то это то что вам нужно. Ninja Physics идеален для платформеров и других игр, основанных на тайлах. P2 Physics - это уже полноценный опенсорсный физический движок, альтернатива известному Box2D, у него есть отдельный репозиторий на гитхабе, если вы решили делать клона Angry Birds, то это ваш выбор. Если вам этого показалось мало, то за деньги можно приобрести плагин, добавляющий поддержку Box2D. Для установки движка Phaser вам достаточно зайти на страницу закачки и либо клонировать проект с гитхаба, либо скачать архив, либо просто скачать файл .js (минифицированный или обычный). Я предпочитаю последний вариант, вы же делайте как привыкли. После того как вы закачали файл, подключаем его обычным способом: Моя структура файлов: Game ---- assets ----------- js ----------- img ---- index.html index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Minesweeper</title> <style> body { margin: 0; } </style> <!-- Game Engine --> <script src="assets/js/phaser.min.js"></script> </head> <body> </body> </html>