Разработка на коленке

"тут должна быть красивая цитата о программировании"

Разработка игр на javascript + html5, пробую Phaser

2014-06-25 22:10

Последнее время я стал очень много писать на javascript, в связи с этим меня заинтересовала возможность делать небольшие браузерные игры на html5, вроде бы это сейчас входит в тренд.

Пробежался по списку движков, выбрал комбайн пообъёмистее - phaser. В целом я рассуждал так: сперва разберусь, как это делается вообще, а там можно будет переходить к микрофреймворкам или писать самому на голом javascript, рисуя на canvas.

В качестве физического движка выставил p2js, вроде он умеет работать с окружностями, а arcade - нет, разберусь со временем.

Сделал игровой мир с гравитацией, направленной вверх. По клику появляются камменые блоки, которые под действием гравитации летят вверх. Количество блоков ограниченно, когда их слишком много - старые удаляются. Что интересно - на мобильном тоже работает, проверял в хроме на андроиде.

Ну и исходник

(function() {
    var boxes = [];
    var maxBoxesNumber = 8;

    var preload = function () {
        game.load.image('box', 'box.png');
    };

    var create = function() {
        game.stage.backgroundColor = '#554400';
        game.physics.startSystem(Phaser.Physics.P2JS);
        game.physics.p2.gravity.y = -250;
        game.input.onDown.add(click, this);
    };

    var click = function(pointer) {
        if (boxes.length > maxBoxesNumber) {
            var boxToRemove = boxes.shift();
            boxToRemove.kill();
        }
        var box = game.add.sprite(pointer.position.x, pointer.position.y, 'box');
        game.physics.p2.enable(box);
        boxes.push(box);
    };

    var game = new Phaser.Game(
        $(window).width(), $(window).height(), Phaser.CANVAS, '',
        {preload: preload, create: create});

})();
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>HelloBoxes</title>
    <style type="text/css" media="all">
    * {
        margin: 0;
        padding: 0;
    }
    </style>
</head>
<body>
    <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="phaser.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="helloboxes.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>