Визуальный язык программирования Google Blockly

    Blockly — визуальный язык программирования с веб-интерфейсом. Создание программы осуществляется путём соединения блоков.



    Некоторые демки:
    Maze — используйте Blockly, чтобы пройти лабиринт.
    Code — экспорт программы Blockly в JavaScript, Dart, Python или XML.

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



    После экспорта в JavaScript:
    var n;
    var A;
    var i;
    var x;
    var j;
    
    n = 100;
    A = [];
    for (i = 0; i <= n; i++) {
      A[i - 1] = true;
    }
    var i_end = Math.sqrt(n);
    for (i = 2; i <= i_end; i++) {
      if (A[i - 1] == true) {
        j = Math.pow(i, 2);
        while (j <= n) {
          A[j - 1] = false;
          j = (j || 0) + i;
        }
      }
    }
    for (x = 2; x <= n; x++) {
      window.alert([x,': ',A[x - 1]].join(''));
    }
    Метки:
    Поделиться публикацией
    Похожие публикации
    Комментарии 152
    • +52
      Почему-то вспомнились блок-схемы на уроках по программированию, которые я всегда рисовал уже по написанному коду :)
      • +3
        Где ты «ЛОГО» с черепашкой
        • +1
          Здесь msdn.microsoft.com/en-us/devlabs/cc950524.aspx. Это сайт Майкрософтовского Small Basic, в котором существует API для реализации функций Turtle Logo.
          И здесь logo.codeplex.com/
          • +1
            ЛОГО — мульти-парадигмальный язык, на котором можно обучать как императивному, так и функциональном программированию. А Basic…

            «Практически невозможно научить хорошему стилю программирования студентов, которые раньше имели дело с Бейсиком; в качестве программистов они умственно покалечены без надежды на восстановление». Дейкстра.
          • 0
            Scratch куда более занятная (чем какой-то там Basic) вещь.
        • +81
          Ха-ха. Надо выпускать пазлы для программистов. «От 2 до 4 лет опыта С/С++»
          • +2
            Кто возьмется писать синтаксический анализатор с компилятором под андроид/iOS/WP7? Чтобы фотографировать пазл и дебажить его :}
        • +12
          Авторы явно вдохновлялись языком Scratch
          • 0
            Или Stencyl
            • +1
              Со страницы Stencil:

              Our drag-and-drop gameplay designer pays homage to the successful MIT Scratch project. We extend Scratch's simple block-snapping interface with new functionality and hundreds of ready-to-use blocks, including special blocks for native iOS features.
            • +2
              Еще, помнится, в начале 2k был такой игровой движок — Virtool. Позволял код писать как вручную, так и путем составления блоков. Какое-то время с ним баловался — забавная штука.
              arduino.tw/wp-content/uploads/Image/0001-1280x998.png
            • +5
              Выбрался из лабиринта!
              • +6
                А я так:
                • +21
                  По всей видимости, мой вариант самый короткий)
                  image
                  • +53
                    Какой-то наприличный жест получился ;)
                  • +1
                    not убрать еще можно
                    • 0
                      Разве он в кольце не зациклится?
                      • +3
                        Я про трансформацию

                        if not A then B else C == if A then C else B


                  • 0
                    мм… почти копия юзера.
                    image
                    • +2
                      Правда он в стену постоянно ходит :)
                      • +2
                        Если я ничего не путаю, то из представленных решений, при минимальном количестве элементов, по общепроходной эффективности он тре-тий(2), а для конкретно этого лабиринта — второй(2).
                        №1 дает — 63 хода на 8 элементов.
                        №2 дает(2) — 27 ходов на 6 элементов.
                        Мой (трансформированный alno) дает — 27 ходов на 8 элементов.
                        При этом все его проходят.
                        Так что баланс выдержан по фэн-шую)
                        з.ы. самый заточеный вроде этот — минимальные 15 ходов на 11 элементов.
                        • 0
                          Поворот это ход?
                          тут сколько?
                          <img src="" alt=«image»/>
                          • 0
                            Конечно, отдельное действие. 39.
                          • 0
                            Лучшим был бы вариант, имхо, который ни разу не «тыркнется» в стену и с минимальным числом ходов. Но в любом случае для универсального алгоритма обхода лабиринта не хватает списков, которые есть только в полной версии Blockly.
                            • 0
                              Ну вот я ведь вам уже ответил. Этот ни разу не тыркается, минимальное число ходов, а проще этого, похоже, вообще не придумать.
                              • 0
                                можно сделать минимальное количество ходов, НО в данном лабиринте, в другом этот же алгоритм покажет себя не лучшим образом и выиграет другой алгоритм. Все же я считаю что алгоритм должен быть универсальным.
                                • 0
                                  Так речь и не идет о минимуме ходов, главное в стену не пытаться идти :)
                                  А для универсального алгоритма нужна поддержка списков.
                            • 0
                              Вот вам тогда гирляндочный вариант ;)
                              image
                              • 0
                                а зачем два раза ходить вперед? так же можно пропустить поворот
                                • 0
                                  Да блин, это конкретная реализация под данный лабиринт.
                              • 0
                                Кто сделает проще?) Минимальные 15 ходов на 8 элементов.
                                image
                                • +2


                                  ps. Не смотря на то, что использовал 7 элементов, лично мне такой вариант не по душе.
                                  • 0
                                    Кажется, эффективнее уже некуда. Действительно. Вы отобрали первенство)
                                    • 0
                                      Еще можно repeat убрать.
                                      • +2
                                        Ай, нельзя точно, бес попутал (
                                        Читать, читать, проверять, потом только писать (
                                    • 0
                                      не универсальное решение… а если маршрут немного изменится…
                                  • 0
                                    и заработает наверное только на данном лабиринте?
                                    вообще в идеале чтобы лабиринт генерить можно было бы рандомный
                            • 0
                              Ух как вас занесло… На каком языке пишете?
                              • НЛО прилетело и опубликовало эту надпись здесь
                                • 0
                                  мой вариант image
                              • +14
                                мои 3 варианта
                                • +16
                                  Третий вариант особо суровый.
                                  • +58
                                    И пусть хоть кто-то скажет, что задача не решена :))
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                      • 0
                                        А этот вариант не считается? ;)
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                          • 0
                                            Извините, но учитывая, что Вы написали „ни одного лишнего движения”, я не понимаю — причём тут условия и циклы? Ведь изначально Вы имели ввиду „скорости прохождения лабиринта”, а не „скорости выполнения кода”.
                                      • 0
                                        Я так и сделал. Дизайнер, блин)
                                      • –2
                                        Наглядное представление различия в мышлении программиста и обычного человека. (Не сарказм )
                                        • +6
                                          >и обычного человека
                                          Ну конечно, какой уж тут сарказм. Это пафос называется :} Малаца)
                                        • 0
                                          Аналог:

                                          : Р
                                        • 0
                                          выглядит, как будто в лабиринте человечек, дойдя до значка, вешается на нём)
                                          интересно, что они этим хотели сказать
                                        • 0
                                          не хавтает кармы на картинку

                                          habrastorage.org/storage2/572/3db/c0a/5723dbc0a9e271b3e1c1fd5ea59a6d4f.png
                                          • +4

                                            Алгоритм левой руки :)
                                            Надеюсь, без ошибок. А вообще, неправильно они подошли к графическому представлению. В таком виде оно не сильно помогает понять ход программы.
                                            • +1
                                              Ох блин, ahead можно было поменять на to the left. Не догадался :)
                                              • +1
                                                Мне кажется моя интерпретация этого правила не так лаконична, но более правильна:
                                                • +1
                                                  Или вот так, если хотим, чтобы наш герой не бился об стены:
                                                  • 0
                                                    Посмотрите внизу, у меня не бьётся, проходит любой лабиринт, меньше блоков… И правило всё то же.
                                                    • 0
                                                      Да, уже увидел. Красиво.
                                                    • 0
                                                      Да говорю же, не знал о том что можно проверять стену по сторонам, поэтому пришлось извернуться :) Неочевидно сделали. turn left и turn right есть отдельными блоками, а wall только ahead.
                                                      • +1
                                                        Надо было сделать, чтобы после трех ударов головой об стену, к примеру, человечек погибал. Тогда было бы интереснее.
                                                        PS. это решение похоже на моё =).
                                                    • 0
                                                      Интересно применять такое в образовании
                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                        • +1
                                                          Предлагаю такой вариант:
                                                          • +2
                                                            Эээ… Ну, наверно, это должно быть интересно…
                                                            Но у меня, честно говоря, впечатление, что это недоGUI и недоСредаРазработки… Может быть, конечно, это дело привычки. Но программирование оно программирование же. Текст то бишь.
                                                            Есть, конечно, то же визуальное программирование в Robotics Developer Studio, но там это похоже скорее на блок-схему. А тут как-то слишком много картинок на квадратный пиксель. Ну и да, ядрёные цвета-то какие! :)
                                                            • –22
                                                              но зачем?
                                                              • +4
                                                                На хабре очень не любят эту картинку почему-то :)
                                                                • +11
                                                                  Из-за фразы после многоточия. Как это ЗАЧЕМ? Затем что это интересно :3 (я не конкретно про троллейбус, а про сборку различных вундервафль из подручных материалов)
                                                                  • +5
                                                                    Троллейбус из подручных материалов — это тоже интересно
                                                                  • +8
                                                                    Потому что ее вставляют где ни попадя ;)
                                                                    • +1
                                                                      Да задолбала эта картинка уже.
                                                                  • 0
                                                                    Я так понимаю все предложенные выше варианты программы выходят из конкретно этого лабиринта?
                                                                    Если его отразить зеркально (или в программе поменять left на right), то работать не будет?
                                                                    Кто-то уже написал универсальный алгоритм? ;)
                                                                    • +1
                                                                      Половина предложенных вариантов используют классический алгоритм обхода правой(левой) руки. Но не все лабиринты можно пройти подобным способом, можно попасть в бесконечный цикл. Поэтому, если наложить на лабинт некоторые ограничения, то можно считать эти решения универсальными.
                                                                      • –1
                                                                        Вот и я о том, что если поменять правило, то человечек погибнет с голоду в левом верхнем углу.
                                                                        А рука для правила выбрана только глядя на лабиринт.
                                                                        Т.е. если бы в ладиринте был такой же закоулок справа, то хана человечку. решения нет?
                                                                        • +1
                                                                          Выше писали алгоритм по «правилу левой руки». Для односвязных лабиринтов он универсален.
                                                                          • 0
                                                                            Почему не правой?
                                                                            • +2
                                                                              они одинаковы, берите любую)
                                                                              • 0
                                                                                Докажите ;)
                                                                                Сравните
                                                                                image
                                                                                и

                                                                                Во втором варианте человечек погибает…
                                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                                  • 0
                                                                                    Объясните разницу в алгоритмах и дополнительный move forward?
                                                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                                                      • 0
                                                                                        Да я знаю теорию. Вот только в Вашем алгоритме человечек, дойдя до в хода в кольцевую, разворачивается, а по правилу левой руки должен держаться стены и зайти в кольцевую…
                                                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                                                          • +1
                                                                                            Действительно.
                                                                                            Даже скопипастить не смог %(
                                                                                            Еще бы можно было делать ссылки на «программы»…
                                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                                    • 0
                                                                                      Перефразирую свой вопрос: у кого получилось вывести человечка из левого верхнего угла, если он туда попал?
                                                                                      • 0
                                                                                        У меня, смотрите ниже мой комментарий.
                                                                                        • 0
                                                                                          Спасибо! Это именно оно.
                                                                          • 0
                                                                            Например, мой вариант подходит только для этого лабиринта. Но вместо универсальности, я выбрал скорость и простоту — человек идёт прямо к финишу за считанные секунды, не останавливаясь/поворачиваясь там где этого не нужно.

                                                                            Но, если Вы хотите универсальный вариант, можно использовать правилу левой/правой руки. Однако, в таком случае быстро его (лабиринт) не пройти.
                                                                          • +4
                                                                            Это невозможно читать, никому
                                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                                • 0
                                                                                  Мой вариант не быстрее?
                                                                                  image
                                                                                  • +4
                                                                                    • +1
                                                                                      Можно поэкспериментировать со стороной, по которой будет обойдет лабиринт:
                                                                                      • +2
                                                                                        И даже прогуляться по кольцевой:
                                                                                  • –9
                                                                                    Скорее бежим регистрировать домен «говнопаззл.ру»
                                                                                    • +3
                                                                                      Кстати, рекомендую флеш-игру LightBot.
                                                                                      • 0
                                                                                        Да, крутая мозгодробилка)
                                                                                        • +1
                                                                                          Прошел. 185 очков. 10-й уровень показался самым сложным.
                                                                                        • +1
                                                                                          Уровней бы побольше эдак на пару порядков.
                                                                                        • +2
                                                                                          Если убрать цветные блоки и оставить только текст, разве не будет понятнее? Даже для начинающих. Не будет ли их смущать это цветовая мельтешня?
                                                                                          • +1
                                                                                            Мне кажется для совсем начинающих цвет тоже может немного помочь, по нему можно отличить классы методов (действия, математические операции, работа с выводом и т.д.), другое дело что всё это получается довольно громоздко и нечитабельно.
                                                                                          • +1
                                                                                            А я вот так выбрался :)
                                                                                            image
                                                                                            • 0
                                                                                              В моем варианте Человечек никогда не бьется об стены. А в вашем?
                                                                                              • 0
                                                                                                Неа, тоже не бьется вроде как ) сейчас лень собирать по новой
                                                                                            • +1
                                                                                              Очевидно же, что это обучающий язык и предназначен для знакомства с программированием, а не для реальной разработки. Так что и цвета в тему и построение блоков :)
                                                                                              • 0
                                                                                                Будто нельзя для обучения подобрать приятные цвета :)
                                                                                              • 0
                                                                                                Напомнило язык Piet
                                                                                                • 0
                                                                                                  ИМХО, разве что яркими цветами :) Хотя в Piet не обязательно яркие использовать, вроде.
                                                                                                • 0
                                                                                                  напомнило в школе кенгуренка. Он мог еще хвостом рисовать (опустить \ поднять хвост). И чем--то Логомиры на маке.

                                                                                                  Здорово, на самом деле. Деткам должно понравится. Не понял только почему именно эти языки выбраны (js, dart и питон). Есл есть js, то с дартом понятно. Но питон… И почему не другие
                                                                                                  • 0
                                                                                                    В гугле любят питон и яву. Ну в яву переводить не слишком целесообразно, зато понятно почему питон.
                                                                                                  • 0
                                                                                                    В Maze только один лабиринт? Интересно получилось, поигрался, порешал. Добротная почти полноценная игра получилась.
                                                                                                    • 0
                                                                                                      Бьсюь об заклад, что нормальный девелопер напишет кусок кода на своем языке в разы быстрее, чем дергать мышкой туда-сюда.

                                                                                                      Так в чем же прикол?

                                                                                                      P.S. Визуальное программирование годится только для того, что бы упростить процесс обучения программированию детей. Но, по-моему Scratch с этими целями весьма отлично справляется.

                                                                                                      P.P.S. А для обмена языко-платформо-независимыми данными вполне отлично можно пользоваться такими вещами, как XML/JSON/What ever else.
                                                                                                      • 0
                                                                                                        мой вариант поиска выхода из лабиринта:
                                                                                                        image
                                                                                                        • 0
                                                                                                          Действительно интересная штуковина) Соглашусь с обучением, агитировал бы в школьную программу!
                                                                                                          Было бы меньше прицепов в универах, которым приходилось построчно рассказывать что написано в коде.

                                                                                                          зы: еще проснулась ностальгия по eJay (хоть и другая тема… но моторика перетаскивания блоков у меня зародилась именно там).
                                                                                                          • 0
                                                                                                            Меня одного смутил «экпортированный» js-код?

                                                                                                            • 0
                                                                                                              Глюки(
                                                                                                              код:
                                                                                                              for (i = 0; i <= n; i++) {
                                                                                                                A[i - 1] = true;
                                                                                                              }

                                                                                                            • +1
                                                                                                              Выглядит очень интересно, но есть одно НО: очень похожая вещь (по крайней мере, похожая в основном функционале, не считая экспорт в JS и т.д.) давно уже существует: Scratch Programming Language, разработан в MIT: scratch.mit.edu/ и достаточно популярен на Западе, используется для обучения программированию в младших классах в школах. IDE программы — на локальном компьютере, но скомилированную программу можно конвертировать в нечто Java class — подобное, загрузить на веб-сайт проекта и запускать из браузера. Я бы посоветовал связаться с разработчиками Scratch и продолжать работать вместе с ними (MIT, как ни как).
                                                                                                              • 0
                                                                                                                А я вот создал AI для бойца прикрывающего отход отряда от догоняющих зомби. Передвигается всегда смотря назад, когда попадает в тупик, контратакует до ближайшего перекрёстка и затем опять возвращается в роль прикрывающего.
                                                                                                              • 0
                                                                                                                Что-то вроде этого получилось:
                                                                                                                • 0
                                                                                                                  У вас алгоритм работает только в условиях конкретно данного лабиринта, по-правильному всегда нужно придерживаться одной стороны стены.
                                                                                                                  • 0
                                                                                                                    Видимо я чего то не понимаю… Если лабиринт поменять на другой до конца может не дойти ни у кого. Поправьте меня, если я ошибаюсь, но разве можно написать универсальный алгоритм прохода по лабиринту, без запоминания пройденного пути?
                                                                                                                    • 0
                                                                                                                      не знаю… но по сути это просто перебор всех вариантов и один из них явно будет выигрышным
                                                                                                                      • 0
                                                                                                                        Может и не быть, ведь если закольцевать ветку лабиринта он всегда будет по кругу ходить…
                                                                                                                      • 0
                                                                                                                        Да, есть алгоритмы для решения этих задач, там выше давали ссылку на их описание. И я привёл пример реализации.

                                                                                                                        Вкратце — нужно идти по лабиринту так, чтобы правая (или левая) рука постоянно касалась стенки, тогда дойдя к кольцу вы пройдёте по нему и пойдёте дальше под противоположной стеной. Недостаток — не лучшее время решения задачи.
                                                                                                                  • 0
                                                                                                                    Есть подобное на русском?
                                                                                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                      • +2
                                                                                                                        Мой 6ти летний племянник так не считает.
                                                                                                                        • 0
                                                                                                                          Попробуйте Scratch, у него есть русский интерфейс.
                                                                                                                          Перевод, правда, иногда вызывает вопросы.
                                                                                                                      • 0
                                                                                                                        Ну примеры и в нем есть на русском
                                                                                                                        Там же пощелкайте по ссылкам:

                                                                                                                        Puzzle — Learn how blocks work while solving this simple country quiz.
                                                                                                                        Maze — Use Blockly to solve a maze.
                                                                                                                        Turtle — Drawing with Blockly.
                                                                                                                        Graph — Blockly's graphing calculator.
                                                                                                                        Code — Export a Blockly program into JavaScript, Python or XML.

                                                                                                                        у меня все открывались в русском языке(у всех был выбор языка).
                                                                                                                      • +2
                                                                                                                        Не удержался и попробовал сделать свой вариант :)
                                                                                                                      • 0
                                                                                                                        Ох, как жаль, что я узнал об этом так поздно. Жена бы в школе заюзала на уроках информатики.
                                                                                                                        • 0
                                                                                                                          Через год, другой закроют эту «игрушку».
                                                                                                                          • 0
                                                                                                                            Правило правой руки:
                                                                                                                            • 0
                                                                                                                              Много лишних движений, после каждого шага поворачивать и потом выравнивать позицию…
                                                                                                                            • 0
                                                                                                                              Прочитав заголовок подумал: «LabVIEW от Google...» и ужаснулся т.к. до жути не любил его в университете, но эта штука будет по-интереснее…
                                                                                                                              • 0
                                                                                                                                Вот мой вариант прохождения:
                                                                                                                                image
                                                                                                                                • 0
                                                                                                                                  Не заметил, можно убрать If и получится ответ как тут

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