Последнее время я стал очень много писать на 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>