Match3 игра на JavaScript

Здравствуйте. Снова я написал небольшую игрушку, которая работает в браузере. На этот раз я использовал одну из самых банальных. Выставляем по три элемента в ряд и все. Как это испортить я так и не придумал, поэтому все именно так, как у всех. Разве что плавных обменов и вылетов нету. Играть.

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

Как всегда можно взглянуть на код, в котором почти нет комментариев. До новых игр!

Воспоминания

Cегодня во время пьянки с родственниками нахлынули воспоминания о Ленинске.

Для тех кто не знает, родился я на Байконуре. В городе, откуда запускали и запускает Советская и Русская космическая программа. Именно оттуда, с одной из стартовых площадок в космос полетел первый человек в космос, Юрий Алексеевич Гагарин. Именно на космодроме Байконур он сказал свое знаменитое "Поехали!". И вот там я родился. Город много раз переименовывали. У меня в паспорте написано город Ленинск, хотя сейчас город носит название Байконур.

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

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

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

Детство как было самым счастливым временем жизни, так и осталось.

Храните эту память как можно бережней.

Математическая игра на JavaScript

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

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

Играть здесь: agegorin.ru/games/himath/.

Сам код игры как обычно открыт и смотрится здесь: agegorin.ru/games/himath/main.js.

Жду комментарии и отзывы.

Удаление всех видеозаписей из ВКонтакте

Почти сразу после предыдущего поста пишу этот. Как обычно заходим на http://vkontakte.ru/video?act=editи запускаем скрипт. Но есть одно но. В данном случае никаких изменений визуально не будет видно сразу. Итак скрипт.

javascript:a=document.getElementsByTagName("a");for(i=0;i<a.length;++i){if(a[i].innerHTML=="удалить"){ajax.post('al_video.php',{act:'delete_video',vid:a[i].onclick.toString().split("(")[2].split(",")[0],oid:a[i].onclick.toString().split("(")[2].split(" ")[1].split(",")[0],hash:a[i].onclick.toString().split("'")[1],sure:0,from:'list'});}}

Здесь как и в прошлый раз используется ajax запрос к серверу. Будем надеяться никто сильно ВКонтакте этим спамить не будет. Если что, я ни при чем =).

Ну и конечно код, в котором ничего сложного нет:

Спасибо за внимание, я пошел готовиться к экзаменам.

Удаление всех заметок из ВКонтакте

Все как всегда просто. Заходим на http://vkontakte.ru/notes и запускаем скрипт:

javascript:a=document.getElementsByTagName("a");for(i=0;i < a.length;++i){if(a[i].innerHTML=="Удалить")ajax.post('/notes',{act:'do_delete',nid:a[i].href.split("(")[1].split(",")[0],hash:a[i].href.split("\"")[1],lj:0});}

В этот раз я пошел немного дальше и разобрался, а что же вообще выполняют готовые JavaScipt функции. Так вот. Они выполняют (кто бы сомневался) ajax запрос к серверу. Так почему бы просто не отправлять запрос самостоятельно? Ну и как обычно код с разметкой:

В этот раз получилось как-то коротко, зато по делу =).

Скачиваем всю музыку из ВКонтакта разом

Серия про ВКонтакте продолжается =). Сразу после предыдущего поста @lenta4ka_red попросила сделать так, что бы можно было всю музыку из ВКонтакте закачать разом. Я подумал что это очень даже интересно и вот что у меня получилось.

Уже довольно давно известно что прямые ссылки на аудиозаписи можно получить из исходного кода странички ВКонтакте. Поэтому получить ссылки на все записи будет не так уж сложно. Другой вопрос что с этими ссылками потом делать. Один вариант составить список и скормить какой-либо программе, которая умеет массово скачивать файлы. Однако это еще надо искать такую программу. Второй вариант скачивать средствами браузера, открывая страницу для каждой аудиозаписи. Тут есть другая проблема. Chrome открывает mp3 файлы для проигрывания, а не для сохранения, поэтому в данном случае придется от него отказаться. Дальнейшие действия будут происходить с Opera. В принципе работать должно и в Internet Explorer и в Mozilla Firefox, но я проверял только для Opera.

Для того, что бы все работало максимально быстро и без нашего вмешательства необходимо отключить блокировку всплывающих окон и задать сохранение по умолчанию для mp3 файлов. Что бы отключить блокирование всплывающих окон, надо зайти в Общие настройки на вкладку основные. Теперь надо указать единое место для сохранения mp3 файлов что бы Opera нас не спрашивала каждый раз куда сохранять. Это делается в Общих настройках на вкладке Расширенные. Там в разделе Загрузки необходимо найти запись для mp3.

Если такая запись уже есть, то мы ее редактируем, если нет, то создаем и тоже редактируем =). Стоит отметить, что MIME-тип должен быть именно "audio/mpeg". Устанавливаем "Сохранить на диске", "Сохранять на диске без запроса в папку:". Папку выбираем на свое усмотрение.

Теперь осталось только запустить скрипт. Заходим на vkontakte.ru/audio, открываем нужный вам альбом, ищем нужную вам музыку, или просто оставляем все как есть и вставляем в строку запроса следующее:

javascript:a=document.getElementsByTagName("input");for(i=0;i<a.length;++i){if(a[i].id.substring(6,10)=="info")open(a[i].value.split(",")[0])}

Ждем пока все загрузится. Радуемся всей музыке у себя на компьютере.

Внимание! Во-первых не стоит забывать вернуть настройку блокировки всплывающих окон в изначальное положение. Во-вторых я не знаю как отреагирует администрация ВКонтакте, на то что вы будете активно скачивать музыку. Естественно я не буду нести никакой ответственности за то что вы воспользуетесь этим методом.

Ну и для тех кому интересен JavaScript:

Удаление всех диалогов из ВКонтакте

В продолжении предыдущей статьи решил разобраться с тем, как удалять все сообщения. В итоге получился скрипт, для строки запроса. Правда в Opera скрипт работать не захотелось, но его можно вставить напрямую в консоль (Ctrl + Shift + I, затем иконка ">_"). Перед выполнением скрипта надо зайти на http://vkontakte.ru/im.

javascript:var a=document.getElementsByTagName("div");var b=[];for(i=0;i<a.length;++i){if(a[i].className=="dialogs_row "||a[i].className=="dialogs_row"){b.push(a[i].id.substring(9));}}i=0;c=setInterval(function(){IM.selectDialog(b[i]);setTimeout(function(){IM.deleteHistory(b[i++]);},500);setTimeout(function(){d=document.getElementsByTagName("button");j=0;while(d[j++].parentNode.className!="button_blue");d[j-1].click();},1000);if(i>b.length)clearInterval(c)},2000);

Если посмотреть повнимательнее на диалоги, в каждом диалоге можно найти "Действие" -> "Очистить историю сообщений". Эта ссылка вызывает функцию IM.deleteHistory(id), где id - это идентификатор диалога. Однако эта функция работает только в том случае, если соответствующий диалог открыт. Открывается этот диалог функцией IM.selectDialog(id). Получить же все необходимые идентификаторы можно на странице всех диалогов. Вот собственно код:

Id диалогов записаны в элементах, имеющих одинаковый класс. Так как JavaScript не умеет делать выборку элементов по классу, то это делается отсеиванием из div-ов. Кстати, почему-то одинаковые элементы могут иметь класс отличающийся на символ пробела. Может быть это специально для чего-то сделано? У каждого элемента нужного нам класса есть поле id, которое содержит значение типа im_dialog######, где ###### - нужный нам номер диалога. С помощью функции sbstring этот номер и вырезается.

Дальше сложнее. Теперь для каждого диалога нам надо сначала выбрать его с помощью IM.selectDialog(id), потом подождать пока диалог загрузится, затем вызвать удаление диалога с помощью IM.deleteHistory(id), снова подождать, а затем еще и подтвердить удаление. Все это сделано с задержкой, так как сервер ВКонтакте не всегда быстро реагирует. Кстати с подтверждением все не так просто. Кнопка, нажатие которой необходимо сымитировать, отличается только тем, что она синяя. Даже текст "Удалить" внутри и тот не уникален. Поэтому кнопка проверяется по значению класса родителя.

Вообще все, что может делать пользователь на ВКонтакте реализовано через JavaScript объекты, содержащие все необходимые функции. Так для работы с аудио-файлам это был AudioEdit, для старой системы сообщений - mail, для новых диалогов - IM. Поскольку это JavaScript, то естественно код открыт и можно спокойно смотреть и исследовать возможности этих объектов. Достаточно просто иметь браузер.

На этом пока все. Что бы вы хотели еще удалить из ВКонтакте? =) Или вам надо автоматизировать какой-то другой набор повторяющихся действий?

Удаление всех аудиозаписей из ВКонтакте

Для затравки рабочий код для строки запроса. Сначала надо зайти на страницу http://vkontakte.ru/audio?act=edit
javascript:as=document.getElementsByTagName('a');bv=new Array();j=0;for(i=0;i<as.length-1;i++){if(as[i].name!=""){bv[j++]=as[i].name}}i=0;inter=setInterval(function(){AudioEdit.deleteAudio(bv[i++]);if(i>j)clearInterval(inter)},500); Смотри UPD.
На днях ВКонтакте сделали шаг против приватности, давая возможность скрывать только 15 своих друзей, вместо всех сразу. Почему-то все сразу забыли недавние положительные обновления и сразу стали ругать Дурова. Ругать я не собираюсь, как и хвалить и защищать тоже.
Как-то раз у меня накрылся винчестер. На нем было очень много музыки. И я стал слушать музыку из ВКонтакта. В итоге мой плейлист там вырос до 200 композиций. Не так много, как у некоторых, но все же не мало. И сегодня возник вопрос, а как бы все это сразу и не напрягаясь удалить.
Поиск в интернете дал всего два результата. Первый - использовать VKBot, который надо скачивать себе на компьютер. Второй - скрипт на PHP. По поводу первого у меня сработал параноик, который ненавидит качать что-попало и вводить туда пароли даже от ВКонтакта, а по поводу второго сработал перфекционист, который считает что PHP предназначен все-таки немного не для этого.
Так же в интернете нашлись подборки JavaScript-ов для различных плюшек. К сожалению скрипта для удаления всех записей там не было. Пришлось писать самому. =)
Начинать надо естественно с исходного кода страницы.
Здесь прекрасно видно, что песня удаляется методом deleteAudio объекта AudioEdit. На вкладке Консоль инструментов разработчика в этом можно спокойно удостовериться. Так же видно что параметром передается id песни. То есть нам необходимо найти id каждой песни и вызвать функцию столько же раз.
Как же мы будем искать id?
Разработчики ВКонтакте сделали пустые ссылки в начале каждого блока песни, якоря на которых и есть id песни. Осталось их собрать.
Дальше можно пойти разными способами. Например с помощью регулярных выражений выбрать все теги <a> где якорь имеет восьми-символьное цифровое значение. Но как это сделать я не придумал =). Поэтому просто сделал выборку всех ссылок на странице, после чего отсеял только те, что имели якорь. Получилось то что надо.
Дальше появилась еще одна проблема. ВКонтакте либо специально, либо в силу архитектуры имеет ограничение по количеству запросов в секунду. Для человека это не заметно, но для программ существенно. Поэтому, что бы все удалилось пришлось делать задержку.

UPD Разработчики ВКонтакте немного поменяли код и теперь объект AudioEdit называется просто Audio, поэтому рабочий код выглядит теперь так:
javascript:as=document.getElementsByTagName('a');bv=new Array();j=0;for(i=0;i<as.length-1;i++){if(as[i].name!=""){bv[j++]=as[i].name}}i=0;inter=setInterval(function(){Audio.deleteAudio(bv[i++]);if(i>j)clearInterval(inter)},500);

Круги, JavaScript и Canvas

Зашел я тут на днях на очень хороший сайт hellodesigners.ru и увидел там следующее завораживающее чудо:

Awesome circles

На меня это сильно подействовало, почти как гипножаба, и мне захотелось сделать что-нибудь похожее. В итоге получилось вот это.

Написано на JavaScript + Canvas, как на самых доступных технологиях как для программиста, так и для пользователя. Кода для этого много писать не пришлось. Для интересующихся посмотреть его можно здесь. Код даже полноценно прокомментирован. В принципе не откажусь от критики.

Для себя я смог вынести как задавать двумерные массивы в JavaScript и узнал о функциях toString() и toFixed().

1 Ижевский и 4 Казанский Startup Point

Иногда приходит желание на время исчезнуть из привычной обстановки. Выключить телефон, забыть про всех и все что надо сделать, пропасть из поля видимости. А еще иногда желания сбываются. Вот так во вторник 1 марта мой хороший знакомый предложил мне съездить в Казань на Java Day. Заодно упомянул что там будет Startup Point. Первое меня не особо заинтересовало из-за незнания объекта обсуждений, а вот второе заинтересовало. Через пять минут я уже был зарегистрирован на StartupPoint.ru и увидел что аналогичное мероприятие пройдет и в Ижевске в пятницу. Об этом всем дальше и пойдет речь.

Вообще что такое Startup Point? Startup – какой-то небольшой или ограниченный проект. Обычно созданный на деньги из карманов создателей. Главная особенность в том, что создатели очень заинтересованны в том, что они делают. Startup Point – мероприятие и сайт, нацеленные на помощь стартапам в поиске инвесторов. Если быть точнее Startup Point является посредником между маленькими проектами и серьезными дядечками, готовыми вкладывать свои деньги.

Ижевск, ИжГТУ, 2 корпус, аудитория 420. Первый Ижевский Стартап Пойнт проходил в Механе, возможно поэтому большинство представляющих свои проекты были именно студентами, магистрантами или аспирантами ИжГТУ. Главным спонсором мероприятия выступил Центр Высоких Технологий, который уже упомянул о мероприятии в своем блоге. Правда ЦВТ рассказали лишь о том что они помогли одному неплохому, но некомерческому проекту онлайн-музея. Главный фурор же был произведен Стартапом HuMotion представляющую из себя рабочую модель распознования движений человека. Так же достаточно интересными проектами оказались сайт Dolzhnikoff.net, позволяющий упростить систему напоминай своим должникам, проект Графического поиска чертежей по образцу и проект Облачных вычислений в интрасети. А еще я увидел @miss_udacha вживую ;-).

Казань. IT-park. Для начала расскажу что такое IT-park. Если кратко – это такая Кремнивая долина в уменьшенном варианте.Поподробней – супер современное здание, предназначенное для сдачи в аренду офисов IT-компаниям. Основная идея такого парка в том, что люди из разных компаний могут свободно общаться, увеличивать контакты и, в конечном итоге, создавать общие интересные и прибыльные проекты. В том числе это хорошая площадка для проведения различных конференций. В этот раз это была конференция посвященная Java и, соответсвенно, устроенная Oracle. На первый доклад Java 7(8) мы к сожалению опоздали (электричка приходит в 11.45, а доклад начинался в 12.00). Второй доклад был посвящен оптимизациям, которым подвергается Java-программа перед запуском в Java Virtual Machine. Здесь все было понятно даже человеку, далекому от Java. Основная идея – не надо выдумывать, JVM лучше оптимизирует банальный код, чем тот, что по вашему мнению, будет работать быстрее. Дальше конференция разделилась на несколько площадок. В одном месте продолжались доклады, так или иначе связанные с Java, в другом проводились мастер-классы, естественно на Java. В третьем месте проходил Startup Point, куда я собственно и пошел.

В отличии от Ижевска, в Казани стартаперы в среднем оказались постарше. Да и сами стартапы выглядели более закончено, хотя в плане хороших идей выигрывает все равно Ижевск. Здесь самым интересным проектом был Подвезешь, для тех кто хочет найти попутчиков что бы добраться до работы. Из неплохих проектов можно отметить Housage, нацеленный на продажу недвижимости зарубежом иmbkn.ru – современный портал для молодых предпринимателей. В качестве фейлов: aviavi.ru – думаете видео сервис? Нет! Это сервис покупки авиабилетов; а вот представитель Small Business Toolkit сказала, что они ищут программиста потому что «наш программист ушел – он нашел себе девушку».

Оба Startup Point-а прошли очень интересно, в основном из-за генерального директора Startup Point-аВиталия Акимова. Виталий прекрасно себя чувствует в роли ведущего мероприятия. Без него пойнт в Ижевске просто был бы пустым событием. К сожалению большинство выступавших не знали зачем нужна презентация на экране и не имели навыка говорить речь и тем более отвечать на вопросы. Одноко это не всегда было необходимо. Например, в случае с проектом графического поиска чертежей это было не принципиально, так как человек предлагал очень интересный проект. Другим очень важным недостатком проектов была неправильно или недоконца сформулированная проблема. Когда стартаперов спрашивали «кому это будет нужно» и «что будет решать ваш проект», они либо не могли внятно ответить, либо шли в противоречие с тем, что они предлагали. Возможно многим не хватало критики на стадии проработки идеи, которой, к слову, было достаточно на Startup Point. Это, кстати, еще одна причина участвовать в таком мероприятии. Так же для инвесторов важен такой вопрос, как монетизация. В Ижевске зачастую это был самый сложный вопрос. Правда некоторые сразу говорили, что им нужны не столько деньги, сколько возможность работать над проектом дальше.

Для себя из этих мероприятий я вынес следующие идеи:

  1. Нужно учиться правильно и красиво говорить, делать доклады, уметь отвечать на вопросы.
  2. Нужно научиться правильно использовать презентации. Давно уже думал пересмотреть презентации со Стивом Джобсом и Стивом Балмером.
  3. Нужно придумать свой проект.
  4. При проработки своего проекта уделить достаточно внимания для формулировки проблемы, которую проект будет решать.
  5. Брать в команду девушек-программистов. ;-)
  6. Более подробно изучать особенности тех или иных языков программирования, технологий, фреймворков и так далее.
  7. Никогда больше не набирать HTML-код в Microsoft Word. Он заменяет все кавычки другим знаком кавычек.

Фотографии с пойнтов можно посмотреть на Facebook.

Тетрисоподобная игра на JavaScript

Одна из главных особенностей HTML5, это возможности тега <canvas>. Как только появилась возможность его использовать многие люди начали сразу же экспериментировать. Этого факта естественно не обошла и корпорация Google, когда в один день их логотип превратился в кучу шариков, разлетающихся от курсора. Затем появился портал Chrome Experiments большинство экспериментов на котором, как раз используют Canvas. Еще и Internet Explorer 9 тоже поддерживает этот тег.

С другой стороны некоторое время назад я понял, что каждый программист должен хоть раз в своей жизни написать Тетрис. Естественно просто Тетрис писать было не интересно. Надо было придумать свою механику игры.

Если сопоставить два предыдущих абзаца, то получится то, что получилось у меня. С название я не придумал ничего хорошего, поэтому называется просто Tetroid Project. Суть игры осталась такая же как в Тетрисе - необходимо складывать фигуры, но управляете вы не теми фигурами, которые падают, а теми, что уже упали. Игра запускается по ссылке Play. Управление осуществляется стрелками на клавиатуре.

Разве что стоит упомянуть немного про код. Язык программирования JavaScript. Файл с кодом содержит 331 строку. Вся основа игры описана одним объектом. Пять функций используют прямую рекурсию. Расчеты и прорисовка разнесены по разным функциям и не пересекаются. Игра не останавливается за счет особенности JavaScript, которая позволяет вызывать процедуры через определенные промежутки времени. Сам код естественно можно посмотреть здесь. Там присутствуют минимальные комментарии.

Ну и под конец еще раз: Играть.