@TheShock9 авг 2010 в 05:21

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

1 мин

6.5K

HTML *

+75

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

@KiLEX 9 авг 2010 в 05:31

Круто, думаю скоро придет время и богомерзкий флеш полностью умрет.
а в игру очень тяжело играть ТК корабль огромный и пушки стреляют по очереди по бокам корабля. реквестую стрельбу из центра или одновременно из обоих орудий :)

@TheShock 9 авг 2010 в 05:33

сделано так специально) чтобы внесту лепту неожиданности.
работает стабильно? =)

@NermaN 9 авг 2010 в 05:39

У флеша есть лишь одно преимущество которое не исчезнет — он абсолютно одинаково ведет себя во всех браузерах. С JS, думаю, потом возникнут проблемы в более сложных приложениях в разных браузерах.

@TheShock 9 авг 2010 в 05:42

JQuery ведет себя одинаково во всех браузерах. И MooTools. Есть кое-какие мелкие ньюансы, конечно. Но их очень мало

@Yaro 9 авг 2010 в 05:45

Я думаю имеется в виду больше фактор скорости работы javascript'а на различных браузнерных движках.

@TheShock 9 авг 2010 в 05:48

ну. меня, как Линуксоида, ваше заявление огорчает) да. такая ситуация есть. но с другой стороны это стимулирует конкуренцию — в каком браузере Канвас работает быстрее

@Elufimov 9 авг 2010 в 05:48

Ну это со временем сгладится, движки без оптимизации отомрут :)

@TheShock 9 авг 2010 в 05:52

да. более того, практика показывает, что оптимизировать есть куда. во многих тестах и приложениях хром показывает себя лучше фокса, а в астероидах 3.5 фокс иногда показывает себя немногим лучше хрома 6. следовательно есть куда оптимизироваться что хрому что фоксу.

@RussianNeuroMancer 9 авг 2010 в 07:48

> он абсолютно одинаково ведет себя во всех браузерах
Но не во всех ОС.

@Gospodin 9 авг 2010 в 09:55

Угу, особенно на разных платформах и в 64х браузерах.

@Drinker 9 авг 2010 в 07:25

Как только научаться играть потоковое видео без проблем — тогда флеш и умрёт. А пока — увы :(

@Drinker 9 авг 2010 в 07:31

Как только научаться играть потоковое видео без проблем — тогда флеш и умрёт. А пока — увы :(

НЛО прилетело и опубликовало эту надпись здесь

@TheShock 9 авг 2010 в 10:47

К флешу было негативное отношение задолго до Стива Джобса, просто он первым из крупных игроков бросил вызов флешу

НЛО прилетело и опубликовало эту надпись здесь

@soltpain 9 авг 2010 в 05:44

А звук нигде не регулируется? А то у корабля слишком уж противный тыр-тыр-тыр.

@TheShock 9 авг 2010 в 05:45

пока нет. сегодня прикрутим mute. )

@0lympian 9 авг 2010 в 06:57

Дааа… звук у реактивного корабля как у ушастого запорожца :D

@TheShock 9 авг 2010 в 07:01

это дизельный реактивный корабль для технических заданий в 3000 году.
на что правительство выделило деньги — на то и выделило.
остальные пошли на откаты и покупку Энтерпрайзов-лимузинов

@DarkSilence 9 авг 2010 в 06:18

На Intel Core i3 2.13 GHz, 3 Gb RAM, Mobility Radeon HD 5400 + Opera 10.61 Астероиды не более чем пошаговая стратегия, увы :(

@TheShock 9 авг 2010 в 06:25

у меня послабее Intel Core 2 Duo CPU E4500 @ 2.20GHz с устаревшим Radeon X1600 без вменямых дров в Линуксе и fps не падает.

как работает в Фоксе и Хроме? Несмотря на все тесты Опера у меня показывает себя хуже всего, хотя, впринципе, сносно. Лучше всего показывает себя Фокс

@TheShock 9 авг 2010 в 06:30

да, оперативки 2gb

@DarkSilence 9 авг 2010 в 06:48

В фоксе нормально в принципе, но есть небольшой лаг между нажатием клавиши и реакцией, в хроме просто супер — все летает и можно нормально поиграть.

@TheShock 9 авг 2010 в 06:56

можно попробовать понизить fps: libcanvas.com/asteroids?fps=15 и посмотреть.

@DarkSilence 9 авг 2010 в 15:12

Попробовал — там где тормозит, тормозит точно также. Там где летает — летает также.
Время тестировать подробнее пока нету :(

@neptune 9 авг 2010 в 07:36

а у меня в хромиуме в ubuntu просто черный экран :( Не знаете что может быть?

@TheShock 9 авг 2010 в 07:49

сейчас в личке разберемся)

@Cake_Seller 9 авг 2010 в 06:28

Странно, у меня при менее мощном компьютере (Core 2 Duo T5550 1.83 GHz и 2 Gb оперативки) в этом же браузере все выглядит довольно сносно.

@snobit 9 авг 2010 в 06:58

Safari 5.0.1 под Mac. Тормозов особых нет, но игра съела 100% CPU. Флеш пока получше.

@Tagrim 9 авг 2010 в 10:11

AMD Athlin 4200 64 X2, 1G Ram, Nvodia 8500 без кулера, Opera 10.61 идеально

@Tagrim 9 авг 2010 в 10:12

пардон, Athlon )

@Tagrim 9 авг 2010 в 10:12

и Nvidia, всю ночь за работой, мажу по клавишам :)

@r0zh0k 9 авг 2010 в 13:59

То же самое, только видео встроенное — все летает.

@VDG 9 авг 2010 в 14:43

FF 3.6.8 (2ГГ, 2ГБ) — пошаговая стратегия

@habraname 9 авг 2010 в 06:19

ЙОУ! здравствуй, понедельник! здравствуй, либканвас! здравствуй, астероидс!
прощай, работа!

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

зы: астероидс на хтмл5! теперь с трактором! ;)
не хватает только взрывающегося вертолёта

@Roler 9 авг 2010 в 06:22

Невероятно.
Жаль в моём Firefox тормозит, пришлось Хром загрузить.

@TheShock 9 авг 2010 в 06:26

а какой Фокс? что значит тормозит? какое железо?

@Roler 9 авг 2010 в 09:10

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

Ну именно тормозит, прыгает, дёргается.

@shifttstas 9 авг 2010 в 06:39

На последнем Dev Chrome прекрасно все работает )

@Setti 9 авг 2010 в 06:53

Вы очень крутой

@Virusmater 9 авг 2010 в 07:12

при разрешении 1024*768 игровое поле полностью не помещается на экран) приходится скролить

@TheShock 9 авг 2010 в 07:23

прошу прощения. согласно статистики только 4% пользователей не влезут в экран Астероиды)

@Virusmater 9 авг 2010 в 07:24

да ничего)

@Guria 9 авг 2010 в 10:21

browsersize.googlelabs.com/ — приводит несколько другую статистику. А даже на довольно распространённом 1280*1024 цифры Death и Time уползают за правую границу экрана.

@TheShock 9 авг 2010 в 10:30

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 %

@Lord_Daedra 9 авг 2010 в 07:21

хром, мак ос, 6.0.472.25 dev всё оч сильно тормозит, поиграть нормально не смог…

@TheShock 9 авг 2010 в 07:22

железо какое?

@Lord_Daedra 10 авг 2010 в 20:08

Аппаратные средства:

Название модели: 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)
Основной монитор: Да
Синхронизация: Выкл.
Онлайн: Да
Встроенный: Да

@TheShock 10 авг 2010 в 20:26

все дело в частоте шины, стопудово)

пс. спасибо

@Lord_Daedra 11 авг 2010 в 03:12

:-)

@egoserg 9 авг 2010 в 07:32

Если начать очень часто стрелять, то игра начинает тормозить, это только у меня или это у всех?

@TheShock 9 авг 2010 в 07:40

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

@Bonch 9 авг 2010 в 08:34

TheShock, выложи уже проект на Github, второй раз прошу. Это будет полезно для развития, поверь.

@TheShock 9 авг 2010 в 08:37

извини, сегодня планировали это сделать) и в Фордж тоже. я даже структуру проекта подстроил для Форджа

@TheShock 9 авг 2010 в 13:32

github.com/theshock/libcanvas скоро будет на MooTools Forge

@Oniestel 9 авг 2010 в 08:55

FireFox 3.6.8 работает, но весьма притормаживает; Chrome 5 — только после повторной загрузки страницы, но в разы быстрее, чем FireFox. P4-3Ghz, 2Gb Ram.

@Scioner 9 авг 2010 в 09:25

Intel E5300@2.6Ghz, 3GB RAM,
win7, опера 10.60, фф 4.0b4pre

в обоих браузерах всё летает. только в файрфоксе иногда звук отстаёт.

@tenshi 9 авг 2010 в 11:28

у меня в экран не влезает

@initbit 9 авг 2010 в 11:50

основанного на MooTools

— что имел ввиду? события им перехватываешь? или еще что-то мутулс полезное даёт… я вот думаю привязываться к jquery, или делать независимый фреймворк.

@TheShock 9 авг 2010 в 12:37

Я высказывал свое мнение во второй части:

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

У мутулза отличные расширения прототипов. Есть куча возможностей, которые нужны при геймдевелопинге и вообще при рисовании Мутулз. ДжиКвери для Канваса — не нужен, а вот Мутулз — нужен:

$extend(), $merge(), $random(), Array: [getLast(), getRandom(), each(), contains(), include(), erase()]

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

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

Без мутулз было бы очень тяжело держать это все в голове. Я это знаю, так как я начинал без Мутулз и к Мутулз я пришёл. Зато теперь — очень изящный код. Достаточно посмотреть примеры)

@TheShock 9 авг 2010 в 12:44

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

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.shape, this.getStyle().fill) .stroke(this.shape, this.getStyle().stroke) .restore(); } });

@tenshi 9 авг 2010 в 21:04

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

@tenshi 9 авг 2010 в 21:20

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

@TheShock 10 авг 2010 в 04:34

я про это и говорю. у тебя пример ужасной записи. мутулз же — «облагораживает» эту запись

@tenshi 10 авг 2010 в 08:49

что в ней ужасного, кроме того, что не используется слово «класс»?

@TheShock 10 авг 2010 в 09:01

Напиши полный вариант — обсудим

@tenshi 10 авг 2010 в 09:03

полный вариант чего? фреймворка?

@TheShock 10 авг 2010 в 09:08

Полный вариант представленного выше класса для сравнения твоего варианта и варианта с Мутулзом

@tenshi 10 авг 2010 в 18:29

а так не сравнить?

@TheShock 10 авг 2010 в 20:31

тяжело сравнивать два варианта, если второй в три раза короче логически

@tenshi 9 авг 2010 в 21:24

и ты путаешь понятие интерфейсов и примесей…

@TheShock 10 авг 2010 в 04:33

я знаю, что это не те интерфейсы, которые интерфейсы в Джаве и остальных

@tenshi 10 авг 2010 в 08:57

это вообще не интерфейсы

@TheShock 3 сен 2010 в 20:43

Обсудили в команде и решили, что в твоих словах все-таки есть рациональное зерно. LibCanvas.Interfaces.* заменено на LibCanvas.Behaviors.*

@j3d1 9 авг 2010 в 11:57

мде, теперь чтобы поиграть в простенькую игрушку с нормальным фпс нужно пипец какие мощности, не маразм ли?!

@initbit 9 авг 2010 в 12:05

это лишь первые шаги

@stogerc 9 авг 2010 в 19:55

Этот вариант asteroids мне нравится больше.

@SKYnv 9 авг 2010 в 20:33

игра виснет если зажать шифт и попробовать стрелять

@TheShock 10 авг 2010 в 04:40

ну и что? вы показываете мне Астероиды. А я показываю вам фреймворк, на котором можно сделать астероиды. Ну и астероиды)

пс. я так и не смог в них играть — ну очень быстро летает корабль. да и без звука скучно)

@auror 9 авг 2010 в 20:46

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

Зарегистрируйтесь на Хабре, чтобы оставить комментарий