Браузерные мини-игры. Структура документа, Canvas/iframe, реализация меню, безопасность. Каковы best-practices?
Имею несколько наработок браузерных мини-игр. Что-то на подобии Pong, Minesweeper и всего в таком духе. Поскольку одной из целей их разработки вижу самообучение, то в будущем, возможно, это будут более крупные проекты. Соответственно, делать качественно лучше начинать сразу. Именно поэтому интересуюсь лучшими вариантами, практиками разработки.
Одним из первых встающих вопросов является, конечно же, структура документа. HTML5 со всеми вытекающими предлагает удобный Canvas API, который меня (на моих ранних этапах, опять же) вполне удовлетворяет. Но. На некоторых сайтах подобного содержания встречал реализацию, в основе которой лежит iframe. Если честно, не совсем представляю, как это работает и насколько этот подход предпочтительнее (и предпочтительнее ли вовсе) использования вещей, которые специально для моих целей и предназначены (опять же тот же Canvas). Но вопрос тут, скорее, не в том, как работать с iframe'ами, а, все-таки, что использовать предпочтительнее. Возможно, для простого Pong'а мне сейчас с головой хватает Canvas, но если в будущем я захочу реализовать какую-нибудь бродилку? В общем, хотелось бы услышать мнения на этот счет с "за" и "против".
Во-вторых, меня очень интересует структура документа, отдаваемого пользователю. Я всегда стараюсь отсылать пользователю минимальный необходимый для работы HTML (+ CSS, JS). Но иногда встречаю настолько раздутые исходники, что становится не совсем понятно, зачем они вообще нужны. Отсюда, же, кстати, вытекает и третий вопрос. Например, меню. Меню для "Сапера". Его лучше сделать отдельным блоком (div, aside, section - что угодно), просто находящимся рядом с Canvas'ом и содержащим кнопку "Начать заново", таймер, например, и еще какую-нибудь информацию, или же все-таки отрисовывать весь этот функционал средствами того же Canvas? Понятно, что в сапере это особой роли не играет, поэтому, опять же, для примера берем какую-нибудь еще-не-реализованную инди-бродилку. Что лучше делать там? Когда нужно показать меню, именно его рисовать? Или надвигать модальные окна, сделанные на HTML?
4. Графика, изображения, все с этим связанное. Для того же "Сапёра" простая отрисовка ячеек становится слишком громоздкой и зачастую не оправдывает себя в плане эффективности. Поэтому приходится использовать изображения. И все бы ничего, будь это простое desctop-приложение, которое скачал один раз, установил, и играешь себе. В вебе все немного иначе. Сам вопрос. Как лучше загружать, хранить изображения (в кеше, наример)? Где их запрашивать? Внутри HTML файла или загружать скриптами? Лучше использовать один большой спрайт или грузить изображения отдельно? (Особенно в случае с SVG для последующей анимации). В общем идей много, а интересуют лучшие. Кстати, этот вопрос справедлив и для других видов ассетов. Мало ли видеозаставку сделать захочу, или катсценку :)
Не менее важным встает вопрос с безопасностью. Как известно, что попало в Интернет, то стало общим. И тут вопрос, скорее, не про лицензии и тому подобное, а про рукастых юзеров, которые захотят покапаться в твоем коде и, возможно, "начитерить" себе чего-нибудь. Как защищаетесь от этого вы?
В плюс ко всему, не стоит забывать, что на дворе уже далеко не 2000-е, и многие из нас хотят иметь возможность делать на мобильном все то же, что и на стационарных машинах. Здесь вопрос стоит больше о тач-скринах. Как позаботиться о них? Ну и про размеры экранов, конечно. Как все это дело адаптируется под различную пользовательскую аудиторию. В дополнение, мобильный трафик, который еще не успел стать безлимитным поголовно.
Заключение.
Благодарю тех, кто осилил весь этот текст. А еще больше тех, кто уже готовится дать ответ. А еще больше тех, от кого этот ответ будет действительно по делу. Интересно будет послушать как про техническую часть, так и со стороны простого пользователя: как бы вы хотели, чтобы все было устроено и к какому подходу вы бы отнеслись с большим доверием?
--------------------------------------------------------------------------------------------------
Если делать, то делать хорошо.
Простой
