Язык программирования:
Javascript
Среда программирования:
Любая
<!DOCTYPE HTML>
<html>
<head>
<title>Fun Dots</title>
<meta charset="utf-8">
<script src="pixi.js"></script>
</head>
<body style="margin: 0">
<script type="text/javascript">
var width = 800;
var height = 600;
var animTime = 100;
var crossSize = 66;
var whiteColor = 0xffffff;
var blackColor = 0x222222;
var app = new PIXI.Application(width, height, { antialias: true, backgroundColor : whiteColor}); // создание нового приложения
document.body.appendChild(app.view); //добавление canvas'a приложения в html
var graphics = new PIXI.Graphics(); //создание объекта графики(в нем будет рисоваться фон)
app.stage.addChild(graphics); //добавление графики к приложению
var crossTemplateWhite = new PIXI.Graphics();// создание шаблона для белого креста
crossTemplateWhite.beginFill(whiteColor, 1);
crossTemplateWhite.drawRect(-crossSize/6, -crossSize/2, crossSize/3, crossSize); //рисуем 2 пересекающихся прямоугольника
crossTemplateWhite.drawRect(-crossSize/2, -crossSize/6, crossSize, crossSize/3);
var crossTemplateBlack = new PIXI.Graphics(); //аналогично для черного
crossTemplateBlack.beginFill(blackColor, 1);
crossTemplateBlack.drawRect(-crossSize/6, -crossSize/2, crossSize/3, crossSize);
crossTemplateBlack.drawRect(-crossSize/2, -crossSize/6, crossSize, crossSize/3);
var crossesWhite = []; // заводим массивы для белых
var crossesBlack = []; // и черных крестов
for(var i= -height/crossSize/3; i<=width/crossSize+height/crossSize/3; i++){
for(var j= -width/crossSize/3; j<=height/crossSize+width/crossSize/3; j++){
var crossWhite = crossTemplateWhite.clone(); //клонируем шаблон
var crossBlack = crossTemplateBlack.clone();
crossWhite.position.set((i+j/3+1/3)*crossSize, (j-i/3-2/3)*crossSize); //расчитываем позиции
crossBlack.position.set((i+j/3)*crossSize, (j-i/3)*crossSize);
crossWhite.visible = false; // изначально видны только черные кресты
crossesWhite.push(crossWhite); //добавляем кресты в массивы
crossesBlack.push(crossBlack);
graphics.addChild(crossWhite); //добавляем кресты как детей графики для отрисовки
graphics.addChild(crossBlack);
}
}
var t=0; // время
var currBlack = true; //какие кресты сейчас крутятся
var crosses = crossesBlack; //массив текущих вращающихся крестов
app.ticker.add(function(){ //выполняется каждый кадр
t++;
if(t<=animTime){ //вращаем кресты текущего цвета
crosses.forEach(function(cross) {
cross.rotation =(Math.PI/2)/animTime*t*(currBlack?1:-1); //если вращаем белые то в противоположную сторону
});
} else { // переключаемся на вращение крестов другого цвета
t=0;
currBlack = !currBlack; //меняем переменную currBlack на противоположное значение
crosses.forEach(function(cross){ // делаем все текущие кресты невидимыми
cross.visible = false;
});
crosses = currBlack?crossesBlack:crossesWhite; //обновляем текущие кресты
crosses.forEach(function(cross){ // делаем их видимыми
cross.visible = true;
});
graphics.clear(); //
graphics.beginFill(currBlack?whiteColor:blackColor); // меняем цвет фона
graphics.drawRect(0,0,width,height); //
}
});
</script>
</body>
</html>| Прикрепленный файл | Размер |
|---|---|
| opryzhkoCrosses.zip | 224.41 кб |