JavaScript *

В продолжении популярного цикла статей о том, что 30 строк джаваскрипта достаточно каждому, предлагаю Вашему вниманию перевод статьи Мэтью P01 Генри о его последней работе:

Да, я про лавинообразный поток статей про программы на javascript в 30 строк, охвативший Хабр. Честно сказать, я и сам ярый любитель (специальной?) дисциплины код-гольфа на js, и провел не один выходной, пытаясь втиснуть функцию в твит. И хотя мне нравится дух тридцатистрочников, мне не по духу этот формат.

Почему? Ограничение в 30 sloc весьма и весьма размыто: a.pop();s+='foo' — скорее две строки, а a.pop(s+='foo') — скорее одна, хотя эти два куска кода делают абсолютно одно и то же. Да и практика показала, что даже 30 слоков не обязательное ограничение, а HTML и CSS вовсе не считаются. Иными словами, слоками померить крошечность невозможно, да и это никому не нужно.

Господа, это не серьёзно.

Но это не значит, что нужно прямо сейчас бросить недописанный к пятнице тридцатистрочник. Но когда наиграетесь, добро пожаловать в высшую лигу!

Воодушевленный последними постами на Хабре по теме написания минималистичных игр в 30 строк, решил и я попробовать «вставить свои 5 копеек», точнее, 30 строк js-кода. Наиболее подходящей кандидатом мне показался тетрис, к тому же, всегда было интерестно понять и реализовать его алгоритм, да всё руки не доходили.



Итак, к концу бессонной ночи, в мире появился еще один очередной клон тетриса. С небольшой натяжкой он втискивается в заданные рамки (30 строк), но строки эти, всё же длиннее, чем мне бы лично хотелось. Желающие опробовать в действии и посмотреть код, могут сделать это здесь.

Особенности реализации:

• Управление стрелками на клавиатуре
• Повышение уровня сложности каждые 5 строк
• Прогрессивный подсчет очков в зависимости от количества заполенных строк за раз и уровня сложности
• «Честный» поворот блоков по часовой стрелке
• «Отскок» блока при повороте от препятствий
• Разноцветные блоки
• Генерация разметки игрового поля js-кодом

Вероятно, многим уже надоели заголовки типа «ХХХ в 30 строк», но я рискну написать ещё один пост. Дабы хоть как-то сгладить злость отдельных хабралюдей, я расскажу что в этом скрипте делает каждая строка.

Собственно, продолжая тренд недели.

Ещё первый раз прочитав крошечный excel захотелось написать что либо подобное — маленькое и прикольное. Увидев змейку — понял, что стоит написать игру. Прочитав коммент — «хочу пакмана с фирменными звуками» решил что буду писать «сайтмана», на canvas, с web audio api (и вака-вака-вака) и пожиранием страниц.

Но этому было не суждено сбыться, подробнее — под катом.

Чтобы хоть как-то разбавить тенденцию к 30строчникам решил написать достаточно завершенную и, в сравнении с 30lines, объемную реализацию классической игры Asteroids.

Я не буду меряться числом строк или символов кода, т.к. в нем есть и достаточно нормальное оформление и даже комментарии.
Мир игры отрисовывается на canvas, все объекты мира унифицированы, а детектор коллизий использует попиксельный тест. Есть простая озвучка, жизни, godmod на первые секунды после появления, очки, растущая вместе с очками сложность и, конечно, разваливающиеся на куски астероиды.
Попробовать можно тут. Очень советую Chrome или хотя бы FF.

Х*ли там игры, подумал я, и давай строчить в рекавери мод. Писать будем на jQuery, да, смысл 30 строк нивелируется, зато я офигенненько так примажусь к общей феерии и срублю халявной кармы (как бы ни так, подумал читатель и смачно щелкнув мышей минусанул, да и п**уй подумал я и продолжил бредить).

Людям не шибко понравилось мое вступление, так что перефразирую: «Начнем».

Статья рассчитана на новичканов, поэтому уважаемые знатоки могут сразу скроллить.

(Если уж делать в 5 строк JS+HTML+CSS, то что-то полезное.)

Так называемый Color Picker предназначен для копирования в буфер обмена HEX-кода одного из 216 цветов «безопасной» веб-палитры одним кликом и Ctrl-C.

Пикер умеет много гитик:
1) показывает код цвета по наведению мыши;
2) предоставляет код для копирования по клику;
3) переформатируется в другое количество цветов и ячеек без изменения объёма кода.

<body onload="var H=512,D=51,s='',h=function(a){return a.toString(16).substr(1)},r=256,g,b,v;for(;r<H;r+=D){for(g=256;g<H;g+=D)for(b=256;b<H;b+=D)s+='&lt;b style=&quot;background-color:'+(v=h(r)+h(g)+h(b))+';display:inline-block;width:8px;height:8px;border:1px solid;margin:-1px&quot;onmouseover=this.title=\''+v+'\' onclick=prompt(\'\',\''+v+'\') >&lt;/b>';s+='&lt;br>'}document.body.innerHTML+=s">

Гитхаб-демо (фиддл поддерживать это не умеет)

30 ноября в Одессе состоится VI специализированная техническая конференция FOSS Sea: back-end на базе свободных и открытых технологий. Она будет проходить в два параллельных потока:

• «Облака» – на этом потоке участники обсудят технические вопросы настройки, администрирования и поддержки облачных инфраструктур;
• «JavaScript на бекенде» — здесь речь пойдет об использовании различных решений, таких как: node.js, express.js, jscala и других.

Конференция будет интересна системным администраторам, JavaScript разработчикам, руководителям IT отделов и компаний, а также всем, кто интересуется современными облачными технологиями и использованием JavaScript на бекенде.

С докладами на конференции выступят сотрудники таких компаний как: Mirantis, DataArt, Infobox Cloud, ЛанТек, Lohika, GradSoft, RootUA Media, Европейское Агентство Высоких Технологий, GlobalLogic и других.

В issues хрома за последние несколько дней появилось несколько issue, в которых описывается примерно следующий сценарий: используется тяжелый css3 селектор, в результате чего идет некорректное обращение. В том числе может некорректно работать селектор к нескольким объектам через запятую (#a, #b, #c etc.), однозначно некорректно работает nth-last-child. Гарантированно выявлен баг с ним.
Проблема, судя по всему, находится в механизме css-запросов, так как document.querySelector также некорректно адресуется. Что самое неприятное — jQuery так же опирается на нативные функции (если они существуют). Таким образом, сложные jQuery-запросы также перестали отрабатывать корректно.
Если в ваших проектах используется nth-last-child, подробности бага под катом

В продолжение 30-ти строчного мема, выкладываю реализацию известной игры Жизнь на LiveScript (язык, транслируемый в Javascript).

Всем привет, решил приобщиться к общему безумию. В 30 строк уже написали почти все, что могли, но старого доброго сокобана я не нашел (возможно, плохо искал), так что хочу восполнить этот пробел.



Ссылка на fiddle

Сегодня я хотел бы анонсировать js-фреймворк, позволяющий создавать диалоговые микро-приложения в несколько строк js-кода, разделяемого между клиентом и сервером.

К сожалению, у автора проекта не хватило мужества довести его до ума. Простите.



Идея простого, удобного и специализированного под диалоговые решения фреймоворка родилась после нескольких лет работы нашей команды с интерактивными приложениями. Нам хотелось создать простой конструктор интерактивных виджетов, не перегруженный сложным функциналом и максимально заточенный под конкретную задачу. В итоге мы пришли к решению перекроить наши наработки и немного изменить концепцию продукта.

В отличие от большинства фреймворков, WidLib не претендует на универсальность: он предназначен для быстрого создания многостраничных диалоговых приложений.

После серии постов про реализацию простеньких игрушек на JavaScript в 30 строчек, решил попробовать себя в этом «соревновании». Посидев вечер, получилось создать «полноценную» Roguelike/RPG (я не слишком разбираюсь в жанрах, но вышло что-то в этом направлении). Заодно поизучал JavaScript (до этого на нем никогда не писал, как-то все C++ балуюсь).



Особенности:

• Случайно генерируемый мир
• Прокачка персонажа
• 3 вида врагов и финальный босс
• Инвентарь с бутылочками зелья и магазин для их пополнения

Статья описывает особенности Javascript ES3, которые имеют свойство забываться. Одни из них — странности языка, а другие просто свойства, которые, по-моему, труднозапоминаемы. Я постарался собрать здесь не те из них, по которым можно дать просто ссылку на описание языка (как по различиям между apply и call), а о которых мало сказано в руководствах.

Прежде чем начать, хочу уточнить 3 момента, которые я не стараюсь доказать этой статьёй:

1. Я не говорю, что эти особенности забываются всеми или что они такие по сути. Я их нахожу трудными лично для меня (например, забываются детали, если их не освежать в памяти). Они могут быть лёгкими для вас. Тем не менее, думаю, что этот сборник может быть полезен не только мне.

Пока производители телефонов меряются, у кого тоньше, программисты продолжают меряться, у кого короче.

Я тоже решил принять участие в этой специальной спонтанной олимпиаде кодерского мастерства, и вспомнил фразу одной моей подруги-музыканта: «Если уж играть, то на пианино». И решил: да будет так. Вместо игры напишу пианино. И написал.

Оговорюсь сразу: я ни разу не музыкант, моё музыкальное образование ограничивается десятком блатных песенок на расстроенной гитаре, так что, с терминологией могу и обязательно буду безбожно врать, но буду чертовски рад, если вы меня будете в этом поправлять.

Итак, начнем.

Клавиатура классического фортепиано состоит из 88 клавиш, покрывающих диапазон от A0 (Ля суб-контр-октавы, частота звучания 27.5 Гц) до C8 (До пятой октавы, частота 4186 Гц). Каждая октава на клавиатуре состоит из двенадцати нот:
До, До-диез, Ре, Ре-диез, Ми, Фа, Фа-диез, Соль, Соль-диез, Ля, Ля-диез/Си-бемоль, Си. Жирным выделены клавиши верхнего ряда, они на клавиатуре обычно бывают черного цвета.

Собственно, вот так выглядит одна октава:



Просто взглянув на таблицу частот звучания нот, становится очевидной закономерность: каждая последующая октава ровно вдвое выше предыдущей. Таким образом, можно сказать, что:

Nx = N1 × 2^x-1, где:

• N – название ноты;
• x — номер октавы (от 0 до 8);
• Nx, соответственно, частота звука, соответствующая ноте N октавы x;

В формуле фигурирует N1 вместо N0 лишь потому, что часть нот суб-контр-октавы (N0) имеет частоту звучания ниже порога слышимости человеческим ухом (< 20 Hz).

Чтобы ноты получались чистыми, нам нужны достаточно точные значения частот нот контроктавы, от которой мы начинаем считать. Собственно, вот они:

Решил поддержать тему!

Тетрис в 30+ строк js кода.

• Знает все фигуры тетриса
• Управление с клавиатуры
• ВВЕРХ — фигурки крутятся по часовой стрелке
• ВНИЗ — ускорить падение
• Скорость падания постепенно увеличивается
• Очки подсчитываются

ссылка на jsfiddle

Решил поддержать серию постов «Делаем XXX на JS в 30 строк». Взял для примера Pong в приближенному к классическому оформлении:

Вышло не совсем в 30 строк, а целых 38, т.к. логики вышло прилично, а совсем убивать читаемость или сжимать минимизаторами/обфускаторами не хотелось.

В демке:

• Управление по Up/Down;
• ИИ противника;
• Ускорение мяча с каждым отскоком;
• Обработка клавиатуры, не зависящая от перемещения мяча;
• Ожидание нажатия клавиш для запуска мяча;
• Поддержка практически любого размера поля и высоты «игроков»;
• Ведение статистики.

В продолжение недели ненормального программирования (как заметил phpcmsdev) решил написать игру в 30 строк кода. Так как тетрис, змейка и арканоид уже были сделаны, выбор пал на гоночки, которые входили в стандартный набор портативной игры.



Ссылка на fiddle.

Наблюдая за тем, как люди в 30 строк джаваскрипта умещают excel и змейку, я решил не отставать от прогресса, и создать что-нибудь подобное.
Итак, дамы и господа — 30ти строчный арканоид на чистом JS.