Язык программирования:
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 кб |