Обновить
256K+

JavaScript *

Прототипно-ориентированный язык программирования

270,14
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Roguelike/RPG на JavaScript (30 строк кода)

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

image

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

Читать дальше →

20 и 1 примочка Javascript, которые я никак не могу запомнить

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

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

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

Пианино в 24 строки на Javascript: если играть, то музыку

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

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

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

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

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

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

image

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

Nx = N1 × 2x-1, где:
  • N – название ноты;
  • x — номер октавы (от 0 до 8);
  • Nx, соответственно, частота звука, соответствующая ноте N октавы x;

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

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

Tetris на javascript (в 30+ строк)

Время на прочтение2 мин
Охват и читатели59K
Решил поддержать тему!
image
Тетрис в 30+ строк js кода.
  • Знает все фигуры тетриса
  • Управление с клавиатуры
  • ВВЕРХ — фигурки крутятся по часовой стрелке
  • ВНИЗ — ускорить падение
  • Скорость падания постепенно увеличивается
  • Очки подсчитываются

ссылка на jsfiddle
Читать дальше →

Pong на javascript

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

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

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

Читать дальше →

Гоночка на JavaScript (30 строк кода)

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



Ссылка на fiddle.
Читать дальше →

Крошечный арканоид на JavaScript (30 строк кода)

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


Читать дальше →

Крошечная змейка на JavaScript (30 строк кода)

Время на прочтение2 мин
Охват и читатели113K
Прочитав статью про excel в 30 строк, я загорелся глупой идеей — написать что-нибудь на 30 строк. Не долго думая остановился на змейке.

Особенности:
  • 30 строк необычного JavaScript (задача была уместить в 30 строк, так что код похлеще чем на ночных хакатонах)
  • Использованные библиотеки: отсутствуют



Читать дальше →

cnCt — клиентский js шаблонизатор

Время на прочтение5 мин
Охват и читатели5.8K
Рано или поздно шаблонизация перемещается на клиент. На данный момент существует несколько общепринятых клиентских шаблонизаторов ими являются mustache и underscore.template или что-нибудь подобноедоклад(ах) Сергея Бережного можно найти ещё). Несмотря на огромное количество клиентских шабнизаторов большинство, за редким исключением, являются строчными.
По многим причинам работать с ними тяжело

Использование Google Spreadsheet как JSON бэкенд

Время на прочтение2 мин
Охват и читатели38K
При написании простого веб приложения или прототипировании чего-нибудь, иногда хочется иметь быстрое и простое средство хранения, редактирования и извлечения данных.
Например, ты пишешь простой блог и тебе совсем не хочется строить бэкенд, дабы записывать, редактировать и хранить там посты, но ты хочешь удобно собирать эти данные как JSON — Google Drive поможет тебе с этим.
Читать дальше →

Продвинутая JavaScript отладка при помощи console.table()

Время на прочтение2 мин
Охват и читатели44K
Вчера узнал об одной изящной возможности отладки в «Инструментах разработчика Chrome». На конференции "Web Developer Conference Compact" Маркус Росс (Marcus Ross — @zahlenhelfer) рассказывал о различных инструментах отладки, реализованных в Chrome, об одном из который я хочу рассказать.
Читать дальше →

DOM MutationObserver — реакция на изменение DOM не убивая производительность браузера

Время на прочтение3 мин
Охват и читатели67K
DOM Mutation Events в свое время казались отличной идеей — веб-разработчики начали создавать более динамичные приложения, и казалась естественной та радость с которой были встречены новые возможности прослушивать изменения DOM и реагировать на них. На практике, однако, оказалось, что у DOM Mutation Events имеются серьезные проблемы с производительностью и стабильностью. Не удивительно, что спецификация через год получила статус “устаревшей”.

Но сама идея, лежащая в основе DOM Mutation Events казалась привлекательной и поэтому в сентябре 2011 г. группа инженеров Google и Mozilla представила предложение о DOM MutationObserver, с похожей функциональностью, но улучшенной производительностью. Это новое DOM-API доступно начиная с версий: Firefox 14, Chrome 18, IE 11, Safari 6 (остальные браузеры — caniuse.com/mutationobserver)
Читать дальше →

Аппаратное ускорение рендеринга в браузере Chrome

Время на прочтение7 мин
Охват и читатели46K

Введение


Для большинства веб-разработчиков фундаментальным представлением веб-странницы является DOM. В то время как процесс преобразования этого представления в изображение на экране (далее рендеринг) часто покрыто пеленой непонимания. В последние годы разработчики браузеров активно оптимизируют этот процесс, перекладывая часть работы на плечи графических процессоров: то что называется “аппаратным ускорением (hardware acceleration)”. Мы рассмотрим рендеринг в контексте обычных страниц, исключая Canvas2D и WebGL. Эта статья попытается пролить свет на фундаментальную концепцию использования аппаратного ускорения при генерации изображения веб-контента в браузере Chrome.
Читать дальше →

Ближайшие события

Google выкатила замену Javascript — язык Dart

Время на прочтение2 мин
Охват и читатели79K
Тех, кто так долго ждал этого, я могу поздравить. Тем, кто совсем не ждал, мне сказать нечего, ведь это всё равно свершилось. Сегодня (15 ноября) Google представила первую стабильную версию языка программирования Dart.
Читать дальше →

Крошечный Excel на чистом JavaScript (30 строк кода)

Время на прочтение2 мин
Охват и читатели139K
Особенности:
  • Около 30 строк обычного JavaScript
  • Использованные библиотеки: отсутствуют
  • Синтаксис как в Excel (формулы начинаются с "=")
  • Поддерживаются произвольные выражения(=A1+B2*C3)
  • Обнаруживаются циклические ссылки
  • Автоматическое сохранение в localStorage

image
Читать дальше →

Enyo 2. Введение

Время на прочтение4 мин
Охват и читатели5.2K

Историческая справка:


Enyo — JavaScript framework.
Разрабатывался для замены Mojo (еще один JS framework) в недрах Palm и HP.
Первые версии входили в состав WebOS, а позднее выделился в отдельный проект.
Читать дальше →

Пишем свой JavaScript шаблонизатор

Время на прочтение5 мин
Охват и читатели24K
На тему шаблонизаторов статей написано великое множество, в том числе и здесь, на хабре.
Раньше мне казалось, что сделать что-нибудь своё — «на коленке» — будет очень сложно.
Но, случилось так, что прислали мне тестовое задание.
Напиши, мол, JavaScript шаблонизатор, вот по такому сценарию, тогда придёшь на собеседование.
Требование, конечно, было чрезмерным, и поначалу я решил просто игнорить.
Но из спортивного интереса решил попробовать.
Оказалось, что не всё так сложно.

Собственно, если интересно, то под катом некоторые заметки и выводы по процессу создания.

Для тех, кому только глянуть: the result, the cat.

Читать дальше →

Змейка на Canvas

Время на прочтение5 мин
Охват и читатели14K
Приветствую уважаемое хабра-сообщество. После прочтения поста «Создаём игру, используя canvas и спрайты» в день его выхода, решил углубить свои познания в Canvas. Так, как пока в работе не приходилось сталкиваться с этим элементом, пришлось пробежаться на скорую руку по API.
Конечно, рисование линий, прямоугольников, треугольников и полукругов весьма занимательное занятие. Но для приобретения реального опыта была поставлена задача – создать что-то функциональное и простое.

Вот так родилась идея написать собственную игру, всем знакомую змейку.
Читать дальше →

js2js: компилятор из JavaScript в JavaScript

Время на прочтение2 мин
Охват и читатели27K
JavaScript — это ассемблер Веба. В мире существуют десятки проектов, которые компилируют код на C++, Java, C#, Python, Ruby или любом другом языке в JavaScript. Практически не осталось языка, который невозможно скомпилировать в JavaScript. Ну разве что кроме… самого JavaScript!
image
Мы решили исправить эту ситуацию. Встречайте: js2js — революционный компилятор, который компилирует JavaScript в JavaScript!

Ключевые особенности проекта


Контроль: вы получаете полный контроль над каждой строчкой результирующего кода. Вы даже можете скомпилировать неработающую программу на JavaScript в идентичную ей неработающую программу.
Нулевой оверхед: js2js не замедлит исполнение кода, скомпилированный код будет иметь точно такую же производительность как и исходный.
Интеграция: js2js работает с любой другой существующей технологией связанной с JavaScript: AngularJS, Emscripten, Vanilla JS, jQuery, CoffeeScript, TypeScript, и даже Dart.
Совместимость: код, сгенерированный js2js поддерживает все виды стационарных, мобильных устройств и браузеров. Даже если вы пишете под Netscape 2.0, вы можете скомпилировать свой код в js2js.
Читать дальше →

jBone. Замена jQuery для Backbone или 2kb для DOM манипуляций

Время на прочтение3 мин
Охват и читатели12K
NPM version

jBoneПриветствую всех.

jBone — микро библиотека (2кб gzipped) для работы с DOM в современных браузерах. Она частично имплементирует интерфейсы jQuery для основных методов необходимых для корректной работы Backbone, но может использоваться и независимо.

Проблема


jBone родился при решении конкретной задачи — разработки мобильного приложения. Основными требованиями были отзывчивость UI и скорость загрузки приложения. Очень скоро стало ясно, что почти половину всего кода у нас занимает jQuery, причем решались с помощью него очень простые задачи.
Читать дальше →