JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://keyten.github.io/Graphics2D/js/Graphics2D.js"></script>
<script src="http://keyten.github.io/Graphics2D/examples/solarsystem/layers.js"></script>
<script src="http://keyten.github.io/Graphics2D/examples/solarsystem/sprite.js"></script>
<div id="solarsystem"></div>
JavaScript
// константы
var width = 840,
height = 840,
center = [width/2, height/2],
planetNames = [ "Selene", "Mimas", "Ares", "Enceladus",
"Tethys", "Dione", "Zeus", "Rhea", "Titan",
"Janus", "Hyperion", "Iapetus" ],
planetarray = [];
// инициализация
var app = Graphics2D.app('#solarsystem', width, height),
background = app.layer(0),
orbits = app.layer(1),
planets = app.layer(2);
// фон
background.image('http://keyten.github.io/Graphics2D/' +
'examples/solarsystem/images/sky.png', 0, 0);
background.image('http://keyten.github.io/Graphics2D/' +
'examples/solarsystem/images/sun.png',
center[0]-50, center[1]-50);
// 50,50 -- половина размеров солнца
// класс планеты
function Planet(options){
// свойства
this.radius = options.radius;
this.rotatePerMs = 360 / 100 / options.time;
this.time = options.time;
this.name = options.name;
// создание планеты
this.createOrbit(options);
this.createPlanet(options);
planetarray.push(this);
}
Planet.prototype.update = function(){
this.sprite.rotate(this.rotatePerMs, center);
this.stroke.rotate(this.rotatePerMs, center);
}
Planet.prototype.createPlanet = function(options){
// спрайт, координаты
// просто ставим планету в центр и сдвигаем на радиус по x
var sprite = planets.sprite(
'http://keyten.github.io/Graphics2D/' +
'examples/solarsystem/images/planets.png',
center[0] - 13 + options.radius, center[1] - 13);
// 13,13 - половины ширины и высоты фрейма
sprite.autoslice(26, 26); // разбиваем на фреймы
sprite.frame(options.image); // выбираем нужный фрейм
// ставим обработчики событий
sprite.mouseover(this.overPlanet.bind(this))
.mouseout(this.out.bind(this))
.click(this.click.bind(this));
sprite.cursor('pointer');
this.sprite = sprite;
sprite.rotate(this.startAngle,...