Визуальный язык программирования 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? Чтобы фотографировать пазл и дебажить его :}
              0
              крутая идея!
            +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
                      Какой-то наприличный жест получился ;)
                        +5
                        =) А я и не заметил.
                        +1
                        not убрать еще можно
                          0
                          Разве он в кольце не зациклится?
                            +3
                            Я про трансформацию

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


                              0
                              Да, вы правы.
                          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
                                          0
                                          west coast
                                            0
                                            ???
                                        +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
                                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                                          0
                                                                                          Мой вариант не быстрее?
                                                                                          image
                                                                                            +4
                                                                                              +1
                                                                                              Можно поэкспериментировать со стороной, по которой будет обойдет лабиринт:
                                                                                                +2
                                                                                                И даже прогуляться по кольцевой:
                                                                                                  0
                                                                                                  Вот оно! ;)
                                                                                              –9
                                                                                              Скорее бежим регистрировать домен «говнопаззл.ру»
                                                                                                +3
                                                                                                Кстати, рекомендую флеш-игру LightBot.
                                                                                                  0
                                                                                                  Да, крутая мозгодробилка)
                                                                                                    +1
                                                                                                    Прошел. 185 очков. 10-й уровень показался самым сложным.
                                                                                                      +1
                                                                                                      А еще LightBot 2.0
                                                                                                        0
                                                                                                        Ого, круто!
                                                                                                          0
                                                                                                          Спасибо! Придется играть :)
                                                                                                        +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 и получится ответ как тут

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

                                                                                                                                              Самое читаемое