Создание игры на Javascript Canvas


    Здравствуйте! Я предлагаю вам со мной создать небольшую казуальную игру на нескольких человек за одним компьютером на Javascript Canvas.
    В статье я пошагово разобрала процесс создания такой игры при помощи MooTools и LibCanvas, останавливаясь на каждом мелком действии, объясняя причины и логику добавления нового и рефакторинга существующего кода.


    p.s. К сожалению, Хабр обрезает большие раскрашенные статьи где-то на шестидесятитысячном символе, потому я была вынуждена вынести пару участков кода из статьи на pastebin. Если вы хотите прочитать статью, не бегая по ссылках в поисках кода — можно воспользоваться зеркалом.

    Правила


    Управляем игроком (Player), который должен поймать наживку (Bait) — и при этом увернуться от появляющихся «хищников» (Barrier).
    Цель игры — поймать максимальное количество наживок, не соприкоснувшись с хищниками.
    При соприкосновении с одним из хищников все они(хищники) пропадают, а очки — обнуляются, что, фактически, равносильно началу игры с нуля.

    HTML файл


    Создаем начальный файл, на котором будет наше канвас-приложение. Я воспользовалась файлами, размещенными на сайте libcanvas, но это — не обязательно. JavaScript-файлы добавлялись в процессе создания игры, но я не хочу больше возвращаться к этому файлу, потому объявлю их сразу.

    [[ Код ./index.html на pastebin ]]



    Создаем проект


    Для начала создадим сам проект. Нам нужно сделать это только тогда, когда документ будет готов — воспользуемся предоставленным mootools событием "domready"
    Также создадим объект LibCanvas.Canvas2D, который поможет нам с анимацией.

    ./js/start.js
    window.addEvent('domready', function () {
        
    // с помощью Мутулз выберем первый елемент канвас на странице
        
    var elem = $$('canvas')[0];
        
    // На его основе создадим елемент LibCanvas
        
    var libcanvas = new LibCanvas.Canvas2D(elem);
        
    // Перерисовка будет осуществлятся каждый кадр, несмотря на наличие или отсутствие изменений
        
    libcanvas.autoUpdate true;
        
    // Будем стремится к 60 fps
        
    libcanvas.fps        60;

        
    // Стартуем наше приложение
        
    libcanvas.start();
    });


    Добавляем пользователя


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

    [[ Код ./js/Player.js на pastebin ]]



    Добавим в ./js/start.js перед libcanvas.start();:
    libcanvas.listenMouse();

    var 
    player = new Player().setZIndex(30);
    libcanvas.addElement(player);

    = Шаг 1 =



    Можно заметить, что результат не совсем такой, как мы ожидали, потому-что после каждого из кадров холст не очищается автоматически.
    Необходимо добавить очищающий и заливающий черным препроцессор в ./js/start.js

    libcanvas.addProcessor('pre',
        new 
    LibCanvas.Processors.Clearer('#000')
    );

    = Шаг 2 =



    Добавляем наживку


    [[ Код ./js/Bait.js на pastebin ]]



    Добавим в ./js/start.js:
    // Возьмем индекс поменьше, чтобы наживка рисовалась под игроком
    var bait = new Bait().setZIndex(20);
    libcanvas.addElement(bait);


    Рефакторинг — создаем родительский класс


    У нас очень похожие классы Bait и Player. Давайте создадим класс GameObject, от которого у нас они будут наследоваться.

    Для начала вынесем createPosition из конструктора класса Player:
    ./js/Player.js
    var Player = new Class({
        
    // ...
        
    initialize : function () {
            
    // ..
                
    this.shape = new LibCanvas.Shapes.Circle({
                    
    center this.createPosition()
            
    // ...
        
    },

        
    createPosition : function () {
            return 
    this.libcanvas.mouse.point;
        },


    Теперь создадим класс GameObject

    [[ Код ./js/GameObject.js на pastebin ]]



    После этого можно облегчить другие классы:

    ./js/Bait.js
    var Bait = new Class({
        Extends : 
    GameObject,

        
    radius 15,
        
    color '#f0f'
    });


    ./js/Player.js
    var Player = new Class({
        Extends : 
    GameObject,

        
    radius 15,
        
    color '#080',

        
    createPosition : function () {
            return 
    this.libcanvas.mouse.point;
        },

        
    draw : function () {
            if (
    this.libcanvas.mouse.inCanvas) {
                
    this.parent();
            }
        }
    });


    Смотрим, ничего ли не сломалось:

    = Шаг 3 =



    Ура! Все везде работает, а код стал значительно легче.

    Дружим игрока с наживкой


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

    Пишем в конец ./js/start.js:
    (function(){
        
    bait.isCatched(player);
    }.
    periodical(30));


    Теперь надо реализовать метод isCatched в ./js/Bait.js:
    isCatched : function (player) {
        if (
    player.shape.intersect(this.shape)) {
            
    this.move();
            return 
    true;
        }
        return 
    false;
    },

    move : function () {
        
    // перемещаем в случайное место
        
    this.shape.center this.createPosition();
    }

    = Шаг 4 =



    Почти отлично, но мы видим, что перемещение грубовато и раздражающе. Лучше было бы, если бы наживка плавно убегала.
    Для этого можно воспользоваться одним из поведений ЛибКанвас. Достаточно добавить одну строчку и слегка поменять метод move:

    Теперь надо реализовать метод isCatched в ./js/Bait.js:
    var Bait = new Class({
        Extends : 
    GameObject,
        Implements : [
    LibCanvas.Behaviors.Moveable],

        
    // ...

        
    move : function () {
            
    // быстро (800), но плавно перемещаем в случайное место
            
    this.moveTo(this.createPosition(), 800);
        }
    });


    Очень просто, правда? А результат мне нравится намного больше:

    = Шаг 5 =



    Добавим хищников



    ./js/Barrier.js:
    var Barrier = new Class({
        Extends : 
    GameObject,

        
    full null,
        
    speed null,
        
    radius 8,
        
    color '#0ff',

        
    initialize : function () {
            
    this.parent();
            
    this.speed = new LibCanvas.Point(
                
    $random(2,5), $random(2,5)
            );
            
    // Через раз летим влево, а не вправо
            
    $random(0,1) && (this.speed.*= -1);
            
    // Через раз летим вверх, а не вниз
            
    $random(0,1) && (this.speed.*= -1);
        },
        
    move : function () {
            
    this.shape.center.move(this.speed);
            return 
    this;
        },
        
    intersect : function (player) {
            return (
    player.shape.intersect(this.shape));
        }
    });


    Также чуть изменим ./js/start.js, чтобы при ловле наживки появлялись хищники:
    bait.isCatched(player);
    // меняем на
    if (bait.isCatched(player)) {
        
    player.createBarrier();
    }
    player.checkBarriers();


    Реализуем добавление барьеров для игрока, ./js/Player.js и двигаем их все каждую проверку:
    barriers : [],

    createBarrier : function () {
        var 
    barrier = new Barrier().setZIndex(10);
        
    this.barriers.push(barrier);
        
    // Надо не забыть добавить его в наш объект libcanvas, чтобы хищник рендерился
        
    this.libcanvas.addElement(barrier);
        return 
    barrier;
    },

    checkBarriers : function () {
        for (var 
    this.barriers.lengthi--;) {
            if (
    this.barriers[i].move().intersect(this)) {
                
    this.die();
                return 
    true;
            }
        }
        return 
    false;
    },

    die : function () { },;

    = Шаг 6 =



    Отлично, появилось движение в игре. Но мы видим три проблемы:
    1. Хищники улетают за игровое поле — надо сделать «отбивание от стен».
    2. Иногда наживка успевает схватиться дважды, пока улетает — надо сделать небольшой таймаут «неуязвимости».
    3. Не обработан случай смерти.

    Хищники отбиваются от стен, наживка получает небольшое время «неуязвимости»


    Реализовать отбивание от стен проще простого. Слегка меняем метод move класса Barrier, в файле ./js/Barrier.js:

    [[ Код Barrier.move на pastebin ]]



    Исправить проблему с наживкой тоже не очень сложно — вносим изменения в класс Bait, в файле ./js/Bait.js

    [[ Код Bait.makeInvulnerable на pastebin ]]



    = Шаг 7 =



    Реализуем смерть и подсчёт очков


    Т.к. очки — это сколько раз поймана наживка и она равная количеству хищников на экране — сделать подсчёт очков очень легко:
    Чуть расширим метод draw в классе Player, файл ./js/Player.js:
    draw : function () {
        
    // ...
        
    this.libcanvas.ctx.text({
            
    text 'Score : ' this.barriers.length,
            
    to : [201020040],
            
    color this.color
        
    });
    },

    // Т.к. очки - это всего-лишь количество хищников - при смерти достаточно удалить всех хищников
    die : function () {
        for (var 
    this.barriers.lengthi--;) {
            
    this.libcanvas.rmElement(this.barriers[i]);
        }
        
    this.barriers = [];
    }


    Одиночная игра — закончена!

    = Шаг 8 — одиночная игра =



    Реализуем многопользовательскую игру за одним компьютером


    Движение с клавиатуры


    Для начала — перенесем управление с мышки на клавиатуру. В ./js/start.js меняем libcanvas.listenMouse() на libcanvas.listenKeyboard()
    В нем же в таймаут добавляем player.checkMovement();.
    В ./js/Player.js удаляем переопределение createPosition, в методе draw удаляем проверку мыши и реализуем движение с помощью стрелочек:

    speed 8,
    checkMovement : function () {
        var 
    pos  this.shape.center;
        if (
    this.libcanvas.getKey('left'))  pos.-= this.speed;
        if (
    this.libcanvas.getKey('right')) pos.+= this.speed;
        if (
    this.libcanvas.getKey('up'))    pos.-= this.speed;
        if (
    this.libcanvas.getKey('down'))  pos.+= this.speed;
    },

    = Шаг 9 =



    Неприятный нюанс — игрок заползает за экран и там может заблудиться.
    Давайте ограничим его передвижение и немножко отрефакторим код, вынеся получение состояния клавиши в отдельный метод
    isMoveTo : function (dir) {
        return 
    this.libcanvas.getKey(dir);
    },
    checkMovement : function () {
        var 
    pos  this.shape.center;
        var 
    full this.getFull();
        if (
    this.isMoveTo('left')  && pos.0          pos.-= this.speed;
        if (
    this.isMoveTo('right') && pos.full.width pos.+= this.speed;
        if (
    this.isMoveTo('up')    && pos.0          pos.-= this.speed;
        if (
    this.isMoveTo('down')  && pos.full.heightpos.+= this.speed;
    },


    Также слегка изменим метод isMoveTo — чтобы можно было с легкостью изменять клавиши для управления игроком:

    control : {
        
    up    'up',
        
    down  'down',
        
    left  'left',
        
    right 'right'
    },
    isMoveTo : function (dir) {
        return 
    this.libcanvas.getKey(this.control[dir]);
    },

    = Шаг 10 =



    Вводим второго игрока


    Изменяем файл ./js/start.js:

    var player = new Player().setZIndex(30);
    libcanvas.addElement(player);

    // =>

    var players = [];
    (
    2).times(function (i) {
        var 
    player = new Player().setZIndex(30 i);
        
    libcanvas.addElement(player);
        
    players.push(player);
    });

    // Меняем стиль и управление второго игрока
    players[1].color '#ff0';
    players[1].control = {
        
    up    'w',
        
    down  's',
        
    left  'a',
        
    right 'd'
    };


    Содержимое таймера оборачиваем в players.each(function (player) { /* * */ });

    = Шаг 11 =



    Осталось сделать небольшие поправки:
    1. Сдвинуть счёт второго игрока ниже счёта первого игрока.
    2. Раскрасить хищников разных игроков в разные цвета.
    3. Ради статистики ввести «Рекорд» — какой максимальный счёт каким игроком был достигнут.

    Вносим соответствующие изменения в ./js/Player.js:
    var Player = new Class({

        
    // ...

        // Красим хищников в соответствующий игроку цвет:
        
    createBarrier : function () {
            
    // ...
            
    barrier.color this.barrierColor || this.color;
            
    // ...
        
    },

        
    // Реализуем подсчет максимального рекорда
        
    maxScore 0,
        die : function () {
            
    this.maxScore Math.max(this.maxScorethis.barriers.length);
            
    // ...
        
    },

        
    index 0,
        
    draw : function () {
            
    this.parent();
            
    this.libcanvas.ctx.text({
                
    // Выводим максимальный рекорд:
                
    text 'Score : ' this.barriers.length ' (' this.maxScore ')',
                
    // Смещаем очки игрока на 20 пикселей вниз зависимо от его индекса:
                
    to : [2010 20*this.index20040],
                
    color this.color
            
    });
        }
    });


    Вносим коррективы в ./js/start.js:

    (2).times(function (i) {
        var 
    player = new Player().setZIndex(30 i);
        
    player.index i;
        
    // ...
    });

    players[0].color '#09f';
    players[0].barrierColor '#069';

    // Меняем стиль и управление второго игрока
    players[1].color '#ff0';
    players[1].barrierColor '#960';
    players[1].control = {
        
    up    'w',
        
    down  's',
        
    left  'a',
        
    right 'd'
    };


    Поздравляем, игра сделана!

    = Шаг 12 — игра на двоих =



    Добавляем третьего и четвертого игрока


    При желании очень просто добавить третьего и четвертого игрока:

    players[2].color '#f30';
    players[2].barrierColor '#900';
    players[2].control = {
        
    up    'i',
        
    down  'k',
        
    left  'j',
        
    right 'l'
    };

    // players[0] uses numpad
    // players[3] uses home end delete & pagedown
    players[3].color '#3f0';
    players[3].barrierColor '#090';
    players[3].control = {
        
    up    '$',
        
    down  '#',
        
    left  'delete',
        
    right '"'
    };

    = Шаг 13 — игра на четверых =

    Поделиться публикацией

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

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

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

      +4
      Спасибо, давно собирался посмотреть на ЛибКанвас
        –1
        Посмотрите лучше в сторону processing.js.
        Более продвинутая библиотека. Имхо.
          +2
          Хм… оно глобальный неймспейс загаживает сотней имён, или я чего-то не понял?
            +2
            А можете объяснить, пожалуйста — чем она более продвинутая?
            Я посмотрел код — лично меня что-то не впечатлило.
              –3
              Посмотрите хотя-бы примеры на сайте. В этой библиотеке реализован больший функционал.
                +3
                OK, давайте посмотрим Reference на сайте processing.js.

                Что есть в processing.js / сравнение с LibCanvas:
                1) Расширение стандартных прототипов / Прототипы расширяет MooTools
                2) Подсчет framerate'а / LibCanvas.Utils.FpsMeter
                3) 2D-примитивы — эллипсы, квадраты, треугольники / LibCanvas.Shapes.*
                4) Кривые Безье / LibCanvas.Shapes.Path
                5) Построение полигонов через vertex / LibCanvas.Shapes.Polygon
                6) Ввод с клавиатуры и мыши / LibCanvas.Interfaces.MouseListener, LibCanvas.Core.Keyboard
                7) Трансформации матриц / встроено в классы Shapes
                8) Загрузка и отображение картинок / LibCanvas.Context2D.drawImage, LibCanvas.Utils.ImagePreloader

                Это все, что есть в Processing.js.
                Чего там нет, и что есть в LibCanvas (и это только начало): анимация спрайтов, отрисовка частей изображений (полезно для спрайтов), буферизации и кэширования спрайтов, поведений Linkable, Clickable, Draggable, Droppable, предварительной загрузки изображений.

                Теперь, внимание, просьба и одновременно вопрос — покажите мне пожалуйста, в каком месте у processing.js реализован больший функционал?
                  0
                  Вот вы перечислили некоторые функции LibCanvas, но на libcanvas.com я не нашел ни одного дока об этом. Может подскажите, где почитать? Или рыться в коде?
                    0
                    Дока на самом деле сейчас один из важных векторов для нас и активно пишется. Например: libcanvas.com/tutorial/behaviors
                    Да и примеров кода куча. Поверьте, то, что описано в статье — это только вершина айсберга втроенных в ЛибКанвас возможностей.
          +2
          CPU 100% для такой игрушки не многовато?
          Safari 5.0.1, Mac OS 10.6.4
            0
            А что вы хотели от canvas?
            Svg менее прожорлива.
              +3
              Так там всего-то несколько кружочков. Полагаю, дело в том, что фпс не ограничивается сверху. Автор бы фпс вывел.
                +10
                Ну то есть вывела ;-)
                +2
                SVG менее прожорлива? а на ней можно нарисовать что-то кроме парочки линий?
                Сделайте habrahabr.ru/blogs/javascript/101273/ на СВГ, я хочу посмотреть просто, насколько она менее прожорлива.
                  0
                  С помощью SVG можно нарисовать всё то, что иллюстратор может нарисовать в Adobe Illustrator и Corel Draw, плюс есть куча эффектов, smil и javascript, вставка растровых изображений. Возможности просто неограничены. Тормозни точно не будет — обработка идёт нативно, а не через JS с костылями. Игры делать мне лень, извините. Но примеров в инете много:

                  Кстати, SVG может в вебе заменить почти весь CSS3, если ребята из Mozilla научатся вставлять SVG фоном через CSS, а разработчики Webkit поправят пару багов.
                    +2
                    это все только в теории. на практике я не видел ничего стоящего на SVG.
                      +1
                      даже запрос в Гугле ничего интересного не находит
                        0
                        svg showcase попробуйте. Игр никто и не делал особо, а вот картографических коммерческих приложений — тонны.

                        Всё как всегда упирается в поддержку браузерами. На данный момент самая вменяемая поддержка есть только в Opera. Увы…
                          +1
                          оооу. то вы про статические картинки. ну ясно тогда.
                          покажите хоть одно достаточно динамичное приложение на СВГ с постоянным обновлением состояния. Ато сравнивать один раз отрендеренную картинку с постоянно обновляющейся — очень круто.
                            –2
                            Скажите, вы троллите или у вас гугл сломался?
                            svg-wow.org/audio/animated-lyrics.html
                              0
                              отличный пример))) проц загружен, что происходит — непонятно.
                              все только для того, чтобы написать одну строчку текста, плавно увеличивающуюся.
                              особо в сравнении с астероидами — очень круто))
                                –2
                                Ну сделайте на канвасе схожую штуку, раз там «написать одну строчку текста, плавно увеличивающуюся». Я понимаю, что вы далеки от программирования и что такое рендеринг текста по путям не знаете, но вы попробуйте — вдруг что выйдет хорошее.
                                  +1
                                  только после того, как сделаете Астероиды.
                                    0
                                    Уже давно всё сделали:

                                    ie.microsoft.com/testdrive/Graphics/35SVG--oids/Default.xhtml
                                    www.apple.com/downloads/dashboard/games/asteroidswidget.html

                                    Дружите с гуглом, оок? И хотя бы вики почитайте, а то такую хуйню несёте…
                                      –1
                                      хахаха. я знаю. вы под видом троллинга хотите всем показать насколько SVG ущербен для создания таких вещей по сравнению с Канвасом.

                                      сравниваете летающие многоугольнички с libcanvas.com/games/asteroids
                                      такие многоугольнички, как вы показали были где-то на первой стадии разработки наших астероидов.
                                      а проц на свг грузят не меньше, чем полноценная анимированная версия на канвас.
                                      кончайте троллить, вы постоянно failитесь
                                        +1
                                        Во-первых, постоянно фейлитесь вы. То, что вы друг друга плюсуете и минусуете меня не делает вас ни на грамм умнее.

                                        Во-вторых, я нигде не писал, что SVG — замена Canvas. Не надо придумывать то, чего я не говорил. И да, ваши астероиды отличаются от SVG-шных только тормознёй и наличием звука. Графика? Да какая разница что вращать? Вставьте в пример от Microsoft свою графику — визуально результат будет один в один как у вас.

                                        В-третьих, SVG создан для манипуляции векторными обьектами. Использовать его для работы с растром глупо. Использовать Canvas для работы с вектором тоже глупо.

                                        В-четвёртых, в SVG есть куча готовых фильтров, таких как размытие Гаусса, блендинг, матричные преобразования цвета и т.д. Всего этого в случае канваса нету и надо писать самому. И тут вылезает проблема производительности. Наверняка вам будет интересно добавить в свой LibCanvas такие фишки, как Shift Hue. Вот добавите и сравните производительность нативной реализации и вашей на JS. Я вам даже сразу подсказку дам на тему оптимизации — менять Hue, Saturation и Lightness быстрее через цветовую модель YIQ, подробнее тут — beesbuzz.biz/code/hsv_color_transforms.php

                                        В-пятых, сделать что-либо серьёзное игровое с помощью Canvas невозможно. Почитайте блог немцев, ссылку я уже давал — blog.dextrose.com/en

                                        Вобщем, когда сделаете что-нибудь серьёзное — приходите, поговорим. А пока нам с вами разговаривать не о чём.
                                          0
                                          Графика? Да какая разница что вращать? Вставьте в пример от Microsoft свою графику — визуально результат будет один в один как у вас.

                                          «Игрушка в топике отличается от Фоллаута 3 только графикой. Какая разница что двигать? Вставте в эту игрушку спрайты из Фолла и результат будет один-в-один как у Беседы»

                                          Вот вставте, запрограммируйте, а потом рассказывайте. Ато только абстрактные «на свг можно сделать очень пиздато» пока что и выскакивают.

                                          за немцев я очень рад.

                                          пока что вы не показали ничего более серьезного на СВГ.
                                          тем более если вы думаете, что мне крайне важно ваше одобрение, то в этом вы очень ошибаетесь. считайте как хотите.
                                        +2
                                        > ie.microsoft.com/testdrive/Graphics/35SVG--oids/Default.xhtml

                                        Опера 10.6, загрузка процессора — 50%, тормозит даже больше чем Канвасная версия.
                                        Или вы хотели показать, что векторная графика лучше растровой? :)
                      +1
                      продвинутые градиенты, мягкие края, прозрачность. некоторые векторные дизайнеры весьма удивлялись качеству отрисовки бесплатного inkscape (и просмотру картинки в любом браузере), и говорили, что coreldraw так красиво не может.
                        +1
                        Никто и не спорит, что SVG хорош как язык разметки векторной графики. Но зачем его вспоминать в каждом топике про растровый канвас?)
                          0
                          Почему-то вспоминают. Может потому, что общее у них есть. Ну и главное, SVG ближе к Flash, а Flash это то, чему противопоставляется canvas. Хотя по логике как раз эту роль должен н играть SVG.
                            –1
                            наверно потому, что канвас совсем не подходит для рисования интерактивных объектов в отличие от свг.
                            +2
                            пс. слышал огромное количество положительных отзывов про Inkscape и практически не слышал отрицательных
                              –2
                              я его один раз запустил, ужаснулся и стёр %-)
                                +3
                                Я его один раз запустил и понял, что его возможностей мне вполне хватает для выполнения моих задач. И стёр пиратский Corel Draw. Но я не исключаю возможности возвращения к Корелу (уже есть лицензионный) в том случае, если мне не будет хватать возможностей Inkscape.
                        –1
                        у меня под 60%, xp, firefox, core 2 duo. Как-то не очень шустро прямо скажем (
                          +2
                          XP SP3, Opera 10.6, ноутбучный процессор Pentium Dual-Core T4400 — никаких лагов или тормозов не замечено.
                          Интересно получается — очень большой разброс по результатам скорости у Canvas — у кого-то очень сильно тормозит даже на сильных компьютерах, а у кого-то летает на средних.
                          Видимо, это можно объяснить только тем, что HTML5 все-таки еще драфт :)
                            –1
                            Нет, это обьясняется тем, что Firefox чертовски тормозной. В моих тестах по обработке тяжёлой графики Firefox в десять-двадцать раз медленнее чем Opera и Chrome. Его производительность на уровне встроенного в гуглофон браузера на движке WebKit. А ведь в гуглофоне всего гигагерцовый проц, против моего двух-гигагерцового Dual Core в настольнике.
                              +2
                              моя практика показывает прямо противоположные результаты
                                –2
                                Я не знаю, что значат ваши циферки.
                                  +1
                                  загрузка процессора на одном приложение в разных версиях браузеров
                                    –3
                                    На каком? Если говорить про игру из поста, то у меня с ней все браузеры кушают целиком одно ядро. Разница в том, что в Opera картинка плавная, а в FF всё дёргается.

                                    Если говорить про игру из поста, то авторы пока что не знают, что такое оптимизация.
                                      +2
                                      > Если говорить про игру из поста, то авторы пока что не знают, что такое оптимизация.

                                      Вы хоть скажите, где оптимизировать-то. В коде браузеров? Или автор статьи ответственен за то, что примеры, использующие по большей части экспериментальный компонент Canvas (вы, кстати, в курсе, что релиз HTML5 состоится только в течение 10 следующих лет?) тормозят в вашем браузере и на вашем компьютере?

                                      Как всегда — эксперты на проводе, по делу абсолютно ничего — зато напускной важности — хоть отбавляй.
                                        –1
                                        Во-первых, надо хотя бы почитать хоть какую-то инфу по теме игростроя.

                                        В 2D играх непринято перерисовывать всю картинку 60 раз в секунду без необходимости. Во-вторых, математику надо дёргать как можно реже — все эти кружочки можно закешировать и выводить только результат. Использование back-buffer и прочих прелестей — обязательно.

                                        Посмотрите на работу немцев — www.dextrose.com/ Они легко рисуют тысячи статичных и сотни анимированных обьектов не перегружая процессор и уже сейчас всё вменяемо работает на iPhone.
                                          +1
                                          Тема оптимизации канвас тянет на отдельную статью. И так пришлось укорачивать её на четверть, чтобы влезла в хабр.

                                          Например
                                          Отрисовка картинок будет быстрее, чем заливка путей-окружностей.

                                          Конечно,
                                          можно было бы написать про то, что не надо обновлять канвас, если ничего не изменилось, когда его обновлять, как его обновлять. Хотя, если есть хотя бы один «хищник» изменения всё равно происходят каждый кадр.
                                          Тут вообще много чего можно было бы добавить.

                                          А отрисовка через back-buffer в ЛибКанвасе происходит автоматически. Об этом даже не надо задумываться.
                            +2
                            У меня тоже core 2 duo. Но я в Линуксе — 20-30% в фоксе(1 пиксель ширины — 2 секунды).
                              +1
                              w7, Fx 3.6.8, Turion X2 Dual-Core. Загрузка не более 15%
                            –2
                            Эта печатная машинка иллюстрирует уже третью статью. Где же прогресс?
                              +2
                              Вы на Хабре статьи читаете, или только картинки смотрите? :)
                                +1
                                Простите, а какие статьи она ещё иллюстрировала?
                                –2
                                Загрузил бы что-ли спрайты с космическими кораблями!
                                  +2
                                  Загрузите, код открыт.
                                    +5
                                    ЗагрузилА. Автор — девушка :)
                                    +19
                                    Эх, помню год назад тоже баловался canvas — получилось вот это galaxy.artklen.ru/
                                    К сожалению скорость работы canvas очень печальна (
                                      +2
                                      Недурно вообще. Кстати, у меня кажет 180fps, так что для такой игры вполне приемлемая скорость :-)
                                        +5
                                        Убил минут 20 :) Спасибо
                                          +4
                                          Отличная реализация, спасибо.
                                            0
                                            Ваша игрушка игрушка грузит мой Mac Mini всего на 40%. Видимо с HTML 5 будет все тоже самое, что и со флешем,
                                            говнокод будет убивать все производительность.
                                            +3
                                            хорошая игра получилась, и как пример тоже пригодится. спасибо вам.
                                              +2
                                              Остановился только когда занял третье место :)
                                              Спасибо, в обед отлично помогла отвлечься!
                                              0
                                              розовый шарик постоянно кудато уббегает при при касании с ним. может(
                                                –1
                                                if (this.isMoveTo('left') && pos.x > 0 ) pos.x -= this.speed;

                                                за пределы экрана всё-равно можно залезть
                                                  +1
                                                  Я знаю, это специально. Учёт скорости и радиуса сделать не тяжело.
                                                    –3
                                                    наглая ложь
                                                      –1
                                                      толстый тролль
                                                        –4
                                                        тупое быдло
                                                  0
                                                  Прикольная игрушка, по началу не оторваться :) Радует, что все-же есть такие вот интузиасты!
                                                    +3
                                                    На древнем нетбуке с Atom N270 полет нормальный, но из-за разрешения 1024х600 все поле не помещается в высоту и появляется полоса прокрутки. И управление стрелочками совсем уже не радует.
                                                      0
                                                      Да. Неплохо было бы делать игры на libcanvas не в статическом разрешении, а подгонять под размер окна браузера пользователя (естественно, в разумных пределах)
                                                      +1
                                                      спасибо, нужная статья. буду очень рад продолжению.
                                                        +3
                                                        Хорошая статья. Было бы очень здорово, если бы кто-нибудь из вашей команды написал статью об опыте использования . Осветили возможные подводные камни при разработке и тд и тп. У вас это как ни у кого другого хорошо получиться — не плохая библиотека вами написана.
                                                          +2
                                                          парер съел тег) "… об опыте использования" canvas.
                                                            +1
                                                            Спасибо)
                                                            Хорошо, сделаем!)
                                                            0
                                                            классно!

                                                            у меня небольшое замечание по самой игре, небольшой чит
                                                            когда наживка отлетела, «player» на пути к её новому местоположению должен уворачиваться от хищников
                                                            но если «player» стоит в более-менее безопасном месте (скажем, нет хищников, траектория которых заденет его в ближайшие секунды),
                                                            то игрок может нажать правую кнопку мыши — и тогда «player» остаётся на месте, a курсор мыши может спокойно подойти к наживке напрямую
                                                            левый клик — и наживка поймана, причём игрок обходит хищников на пути к наживке
                                                              0
                                                              Я понимаю, что почти год прошел, но ссылки умерли, однако
                                                                0
                                                                да, дайте пожалуйста новые ссылки

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

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