Пример анимации с квадратами на javascript
Квадраты вылетают из левого верхнего угла прямоугольной области с различной скоростью и падают на нижнюю границу под действием силы тяжести. При этом возможны столкновения с вертикальными границами.
В <body></body> поместим <canvas id="itmathrepetitor"></canvas>.
В <head></head> добавим
<style>
body {margin:0px ; padding: 0px}
canvas {display:block}
</style>
B затем в теги <script></script> поместим следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
window.onload = function() { // привязываем переменную сtx к canvas c id=itmathrepetitor var canvas = document.getElementById("itmathrepetitor"); var ctx = canvas.getContext("2d") var W = window.innerWidth, // ширина окна H = window.innerHeight; // высота окна // устанавливаем размеры canvas canvas.width = W; canvas.height = H; // класс Box function Box(_x,_y) { // координаты this.x = _x; this.y = _y; // скорость по каждой координате this.xVel = 10 + Math.random()*20; this.yVel = 1; // размеры квадрата (box) this.width = 20 this.height = 20; // случайный цвет квадрата (три компоненты в rgb) this.r = Math.round(Math.random()*255); this.g = Math.round(Math.random()*255); this.b = Math.round(Math.random()*255); // цвет в полной записи this.rgba = "rgba("+this.r+","+this.g+","+this.b+",1)"; // отрисовка квадрата this.draw = function() { ctx.fillStyle = this.rgba; // цвет заполнения // рисуем прямоугольник ctx.fillRect(this.x,this.y,this.width,this.height); this.update(); } // реализация движения this.update = function() { // проверка на выход границу if(this.x < 0) { this.x = 0; this.xVel *= -1; // отскок (изменение направления) } // проверка правой границы if(this.x > W - this.width) { this.x = W - this.width; // установка координаты в 0 this.xVel *= -1; // отскок } // проверка верхней границы if(this.y < 0) { this.y = 0; this.yVel *= -1; } if(this.y < H - this.height) this.yVel += .25; // проверка нижней границы if(this.y > H - this.height) { this.xVel *= .5 this.yVel *= .5 this.y = H - this.height; this.yVel *= -1; } this.x += this.xVel; this.y += this.yVel; } } // массив квадратов var boxes = []; // рисуем фон и квадраты function draw() { // фон ctx.globalCompositeOperation = "source-over"; ctx.fillStyle = "rgba(0,0,0,0.5)" ctx.fillRect(0,0,W,H); ctx.globalCompositeOperation = "lighter" // перебор квадратов и отрисовка каждого for(i=0; i < boxes.length; i++) boxes[i].draw(); update(); } // анимация function update() { // перебор всех квадратов и анимация каждого for(i=0; i < boxes.length; i++) boxes[i].update(); } // каждую минуту добавляем в массив квадратов новый квадрат setInterval(function(){ boxes.push( new Box(0,0)) },1000); // каждые 30 мс обновляем экран setInterval(draw,30); } |
thecodeplayer.com/walkthrough/bouncing-squares-particle-system-basic-gravity