Визуальный язык программирования 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
                                      +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 и получится ответ как тут

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

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