«LibCanvas» — фреймворк для работы с Javascript Canvas, запущен сайт + игра «Asteroids»

    Здравствуйте. Я продолжаю развитие фреймворка для работы с Javascript Canvas, основанного на MooTools и предназначенного для создания анимаций, игр, ui и всего, что вы пожелаете. И сегодня — очень важный момент для этого фреймворка — публичный запуск официального сайта.

    Добро пожаловать на

    libcanvas.com



    К запуску мы с greedykid и Nutochka портировали «Asteroids» — культовую игру восьмидесятых, но с более усовершенствованной графикой, которая работает во всех современных браузерах (да-да, про ie < 9 тут ничего не было). Работа над Астероидами показала мне потенциал этой технологии. Я уверен, что это далеко не предел, у меня есть идеи и даже интересные реализации и потому я продолжу развитие этого фреймворка. Ждите новых интересных приложений.

    Для желающих помериться можно увеличить fps: libcanvas.com/games/asteroids?fps=60 и посмотреть, сколько оно выдает)
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 81

      –4
      Круто, думаю скоро придет время и богомерзкий флеш полностью умрет.
      а в игру очень тяжело играть ТК корабль огромный и пушки стреляют по очереди по бокам корабля. реквестую стрельбу из центра или одновременно из обоих орудий :)
        +2
        сделано так специально) чтобы внесту лепту неожиданности.
        работает стабильно? =)
          +6
          У флеша есть лишь одно преимущество которое не исчезнет — он абсолютно одинаково ведет себя во всех браузерах. С JS, думаю, потом возникнут проблемы в более сложных приложениях в разных браузерах.
            +1
            JQuery ведет себя одинаково во всех браузерах. И MooTools. Есть кое-какие мелкие ньюансы, конечно. Но их очень мало
              +3
              Я думаю имеется в виду больше фактор скорости работы javascript'а на различных браузнерных движках.
                +1
                ну. меня, как Линуксоида, ваше заявление огорчает) да. такая ситуация есть. но с другой стороны это стимулирует конкуренцию — в каком браузере Канвас работает быстрее
                  +3
                  Ну это со временем сгладится, движки без оптимизации отомрут :)
                    +2
                    да. более того, практика показывает, что оптимизировать есть куда. во многих тестах и приложениях хром показывает себя лучше фокса, а в астероидах 3.5 фокс иногда показывает себя немногим лучше хрома 6. следовательно есть куда оптимизироваться что хрому что фоксу.
                +5
                > он абсолютно одинаково ведет себя во всех браузерах
                Но не во всех ОС.
                  +2
                  Угу, особенно на разных платформах и в 64х браузерах.
                  +1
                  Как только научаться играть потоковое видео без проблем — тогда флеш и умрёт. А пока — увы :(
                    –1
                    Как только научаться играть потоковое видео без проблем — тогда флеш и умрёт. А пока — увы :(
                    • НЛО прилетело и опубликовало эту надпись здесь
                        +2
                        К флешу было негативное отношение задолго до Стива Джобса, просто он первым из крупных игроков бросил вызов флешу
                          –2
                          Вы видимо не застали 2008 год и эпичную историю портала top4top.ru
                          • НЛО прилетело и опубликовало эту надпись здесь
                        +2
                        А звук нигде не регулируется? А то у корабля слишком уж противный тыр-тыр-тыр.
                          +3
                          пока нет. сегодня прикрутим mute. )
                            +1
                            Дааа… звук у реактивного корабля как у ушастого запорожца :D
                              +10
                              это дизельный реактивный корабль для технических заданий в 3000 году.
                              на что правительство выделило деньги — на то и выделило.
                              остальные пошли на откаты и покупку Энтерпрайзов-лимузинов
                            +2
                            На Intel Core i3 2.13 GHz, 3 Gb RAM, Mobility Radeon HD 5400 + Opera 10.61 Астероиды не более чем пошаговая стратегия, увы :(
                              +1
                              у меня послабее Intel Core 2 Duo CPU E4500 @ 2.20GHz с устаревшим Radeon X1600 без вменямых дров в Линуксе и fps не падает.

                              как работает в Фоксе и Хроме? Несмотря на все тесты Опера у меня показывает себя хуже всего, хотя, впринципе, сносно. Лучше всего показывает себя Фокс
                                +1
                                да, оперативки 2gb
                                  0
                                  В фоксе нормально в принципе, но есть небольшой лаг между нажатием клавиши и реакцией, в хроме просто супер — все летает и можно нормально поиграть.
                                    +1
                                    можно попробовать понизить fps: libcanvas.com/asteroids?fps=15 и посмотреть.
                                      0
                                      Попробовал — там где тормозит, тормозит точно также. Там где летает — летает также.
                                      Время тестировать подробнее пока нету :(
                                    0
                                    а у меня в хромиуме в ubuntu просто черный экран :( Не знаете что может быть?
                                      +1
                                      сейчас в личке разберемся)
                                    +4
                                    Странно, у меня при менее мощном компьютере (Core 2 Duo T5550 1.83 GHz и 2 Gb оперативки) в этом же браузере все выглядит довольно сносно.
                                      +4
                                      Safari 5.0.1 под Mac. Тормозов особых нет, но игра съела 100% CPU. Флеш пока получше.
                                        0
                                        AMD Athlin 4200 64 X2, 1G Ram, Nvodia 8500 без кулера, Opera 10.61 идеально
                                          0
                                          пардон, Athlon )
                                            0
                                            и Nvidia, всю ночь за работой, мажу по клавишам :)
                                          0
                                          То же самое, только видео встроенное — все летает.
                                            +1
                                            FF 3.6.8 (2ГГ, 2ГБ) — пошаговая стратегия
                                            +2
                                            ЙОУ! здравствуй, понедельник! здравствуй, либканвас! здравствуй, астероидс!
                                            прощай, работа!

                                            там выше спрашивали про скорость работы… принято считать, что в хромоклонах она выше за счёт встроенного в8 и конкуренты им только опера, ибо запилили свой шустрый транслятор. на деле зависит от конкретной платформы, сборки итп. тесты есть и на хабре habrahabr.ru/blogs/browsers/82362/ habrahabr.ru/blogs/ie/97302/

                                            зы: астероидс на хтмл5! теперь с трактором! ;)
                                            не хватает только взрывающегося вертолёта
                                              +1
                                              Невероятно.
                                              Жаль в моём Firefox тормозит, пришлось Хром загрузить.
                                                +1
                                                а какой Фокс? что значит тормозит? какое железо?
                                                  +1
                                                  Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8
                                                  Железо: ADM Athlon 4200 2x, 3GB RAM, GeForce 9600GT.
                                                  Всё под WinXP 32 SP3

                                                  Ну именно тормозит, прыгает, дёргается.
                                                +1
                                                На последнем Dev Chrome прекрасно все работает )
                                                  +8
                                                  Вы очень крутой
                                                    +2
                                                    при разрешении 1024*768 игровое поле полностью не помещается на экран) приходится скролить
                                                      +1
                                                      прошу прощения. согласно статистики только 4% пользователей не влезут в экран Астероиды)
                                                        0
                                                        да ничего)
                                                          0
                                                          browsersize.googlelabs.com/ — приводит несколько другую статистику. А даже на довольно распространённом 1280*1024 цифры Death и Time уползают за правую границу экрана.
                                                            +1
                                                            1280x1024  31,25 %
                                                            1680x1050  16,76 %
                                                            1280x800   10,70 %
                                                            1440x900   10,13 %
                                                            1920x1080   7,53 %
                                                            1366x768    4,45 %
                                                            1024x768    4,02 %
                                                            1920x1200   3,46 %
                                                            1600x900    2,04 %
                                                            2704x1050   1,80 %

                                                        +1
                                                        хром, мак ос, 6.0.472.25 dev всё оч сильно тормозит, поиграть нормально не смог…
                                                          +1
                                                          железо какое?
                                                            0
                                                            Аппаратные средства:

                                                            Название модели: iMac
                                                            Идентификатор модели: iMac8,1
                                                            Имя процессора: Intel Core 2 Duo
                                                            Скорость процессора: 2.66 ГГц
                                                            Количество процессоров: 1
                                                            Общее количество ядер: 2
                                                            Кэш 2-го уровня: 6 МБ
                                                            Память: 4 ГБ
                                                            Частота шины: 1.07 ГГц

                                                            Слоты памяти:

                                                            ECC: Откл.

                                                            BANK 0/DIMM0:

                                                            Размер: 2 ГБ
                                                            Тип: DDR2 SDRAM
                                                            Скорость: 800 МГц
                                                            Статус: ОК
                                                            Производитель: 0x7F98000000000000

                                                            BANK 1/DIMM1:

                                                            Размер: 2 ГБ
                                                            Тип: DDR2 SDRAM
                                                            Скорость: 800 МГц
                                                            Статус: ОК
                                                            Производитель: 0x7F98000000000000

                                                            ATI Radeon HD 2600 Pro:

                                                            Модель набора микросхем: ATI Radeon HD 2600 Pro
                                                            Тип: GPU
                                                            Шина: PCIe
                                                            Ширина полосы PCIe: x16
                                                            VRAM-память (всего): 256 МБ
                                                            Производитель: ATI (0x1002)
                                                            ID устройства: 0x9583
                                                            Ревизия: 0x0000
                                                            Ревизия ROM: 113-B2250L-259
                                                            Версия драйвера EFI: 01.00.259
                                                            Мониторы:
                                                            iMac:
                                                            Разрешение: 1680 x 1050
                                                            Пиксельная глубина: Цвет 32-бит (ARGB8888)
                                                            Основной монитор: Да
                                                            Синхронизация: Выкл.
                                                            Онлайн: Да
                                                            Встроенный: Да
                                                              0
                                                              все дело в частоте шины, стопудово)

                                                              пс. спасибо
                                                        +1
                                                        Если начать очень часто стрелять, то игра начинает тормозить, это только у меня или это у всех?
                                                          +1
                                                          я играю с зажатым пробелом)
                                                          разве что когда очень много камней разлетаются на щепки — оно кеширует сильно. впринципе, через минуту игры нагрузка на проц должна упасть.
                                                          +1
                                                          TheShock, выложи уже проект на Github, второй раз прошу. Это будет полезно для развития, поверь.
                                                            +1
                                                            извини, сегодня планировали это сделать) и в Фордж тоже. я даже структуру проекта подстроил для Форджа
                                                              +2
                                                              github.com/theshock/libcanvas скоро будет на MooTools Forge
                                                              +1
                                                              FireFox 3.6.8 работает, но весьма притормаживает; Chrome 5 — только после повторной загрузки страницы, но в разы быстрее, чем FireFox. P4-3Ghz, 2Gb Ram.
                                                                0
                                                                Intel E5300@2.6Ghz, 3GB RAM,
                                                                win7, опера 10.60, фф 4.0b4pre

                                                                в обоих браузерах всё летает. только в файрфоксе иногда звук отстаёт.
                                                                  –1
                                                                  у меня в экран не влезает
                                                                    +1
                                                                    основанного на MooTools

                                                                    — что имел ввиду? события им перехватываешь? или еще что-то мутулс полезное даёт… я вот думаю привязываться к jquery, или делать независимый фреймворк.
                                                                      +4
                                                                      Я высказывал свое мнение во второй части:
                                                                      Я очень люблю jQuery. Прям души не чаю в нем. Он прекрасен. Изумителен. Но…
                                                                      Он совершенно не подходит для разработки на canvas. Что есть, что нету. jQuery == DOM
                                                                      Сначала я делал свой миниатюрный фреймворк для этой библиотеки, но потом осознал, что я изобретаю MooTools. Я успел полюбить этот фреймворк за время работы с ним (а узнал я его после jQuery), и я вам скажу, что он не менее прекрасен! Конечно, для работы с DOM jQuery подходит значительно лучше, но для таких целей, как рисование в канвас без него было бы очень сложно. Каждый класс, каждый метод в LibCanvas просто пропитан мутулзом и без него это все не получилось бы так красиво и изящно

                                                                      У мутулза отличные расширения прототипов. Есть куча возможностей, которые нужны при геймдевелопинге и вообще при рисовании Мутулз. ДжиКвери для Канваса — не нужен, а вот Мутулз — нужен:
                                                                      $extend(), $merge(), $random(), Array: [getLast(), getRandom(), each(), contains(), include(), erase()]

                                                                      очень понравился метод .bind у ф-ции, который позволяет задать контекст.

                                                                      а чего стоит работа с классами. у меня сейчас в LibCanvas — 37 полноценных классов. многое строится на множественном наследовании — от тех же LibCanvas.Interfaces.*.

                                                                      Без мутулз было бы очень тяжело держать это все в голове. Я это знаю, так как я начинал без Мутулз и к Мутулз я пришёл. Зато теперь — очень изящный код. Достаточно посмотреть примеры)
                                                                        +4
                                                                        вот пример объекта, который можно двигать, прилинковывать к другим объектам, кидать в другие объекты, ловить все события мыши, а еще он меняет стиль зависимо от состояния — синий при нажатии, зеленый при наведении и красный в обычном состоянии. без Мутулз, имхо, было бы не так изящно
                                                                        Interface.Shape = new Class({
                                                                           Extends : 
                                                                        LibCanvas.Interfaces.Drawable,
                                                                           Implements : [
                                                                              
                                                                        LibCanvas.Interfaces.MouseListener,
                                                                              
                                                                        LibCanvas.Interfaces.Draggable,
                                                                              
                                                                        LibCanvas.Interfaces.Clickable,
                                                                              
                                                                        LibCanvas.Interfaces.Linkable,
                                                                              
                                                                        LibCanvas.Interfaces.Moveable,
                                                                              
                                                                        LibCanvas.Interfaces.Droppable
                                                                           
                                                                        ],
                                                                           
                                                                        getStyle : function () {
                                                                              return (
                                                                        this.active && { fill "#99f"stroke "#006"})
                                                                                  || (
                                                                        this.hover  && { fill "#9f9"stroke "#060"})
                                                                                  ||                 { 
                                                                        fill "#f99"stroke "#600"};
                                                                           },
                                                                           
                                                                        draw : function () {
                                                                              var 
                                                                        ctx this.libcanvas.ctx.save();

                                                                              
                                                                        this.lineWidth && ctx.set('lineWidth'this.lineWidth);

                                                                              
                                                                        ctx.fill(this.shapethis.getStyle().fill)
                                                                               .
                                                                        stroke(this.shapethis.getStyle().stroke)
                                                                               .
                                                                        restore();
                                                                           }
                                                                        });

                                                                          0
                                                                          (Shape= function(){
                                                                          }).prototype= new function(){
                                                                          MouseListener.prototype.apply( this )
                                                                          //…
                                                                          Droppable.prototype.apply( this )
                                                                          this.getStyle= function(){… }
                                                                          this.draw= function(){… }
                                                                          }

                                                                            0
                                                                            ;(Shape= function(){
                                                                            }).prototype= new function(){
                                                                            MouseListener.prototype.constructor.apply( this )
                                                                            //…
                                                                            Droppable.prototype.constructor.apply( this )
                                                                            this.getStyle= function(){… }
                                                                            this.draw= function(){… }
                                                                            }
                                                                              +1
                                                                              я про это и говорю. у тебя пример ужасной записи. мутулз же — «облагораживает» эту запись
                                                                                –1
                                                                                что в ней ужасного, кроме того, что не используется слово «класс»?
                                                                                  0
                                                                                  Напиши полный вариант — обсудим
                                                                                    0
                                                                                    полный вариант чего? фреймворка?
                                                                                      0
                                                                                      Полный вариант представленного выше класса для сравнения твоего варианта и варианта с Мутулзом
                                                                                        0
                                                                                        а так не сравнить?
                                                                                          0
                                                                                          тяжело сравнивать два варианта, если второй в три раза короче логически
                                                                            0
                                                                            и ты путаешь понятие интерфейсов и примесей…
                                                                              +1
                                                                              я знаю, что это не те интерфейсы, которые интерфейсы в Джаве и остальных
                                                                                0
                                                                                это вообще не интерфейсы
                                                                                0
                                                                                Обсудили в команде и решили, что в твоих словах все-таки есть рациональное зерно. LibCanvas.Interfaces.* заменено на LibCanvas.Behaviors.*
                                                                          0
                                                                          мде, теперь чтобы поиграть в простенькую игрушку с нормальным фпс нужно пипец какие мощности, не маразм ли?!
                                                                            0
                                                                            это лишь первые шаги
                                                                            –1
                                                                            Этот вариант asteroids мне нравится больше.
                                                                              0
                                                                              игра виснет если зажать шифт и попробовать стрелять
                                                                                +2
                                                                                ну и что? вы показываете мне Астероиды. А я показываю вам фреймворк, на котором можно сделать астероиды. Ну и астероиды)

                                                                                пс. я так и не смог в них играть — ну очень быстро летает корабль. да и без звука скучно)
                                                                                +1
                                                                                Поразительно. Когда я начинал играть в игры, о такой графике даже нельзя было мечтать.
                                                                                А о том, что это в будет в браузере…

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

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