Фонтан, который не заткнётся, он же на Javascript :)

Скрипт, чем-то похожий на фейерверк, только это фонтан, с учётом гравитации для "капель". Кое-что вынесено в настройки, кое-что нет, исходник, как всегда, можно посмотреть под катом, он прост и содержит комментарии к основным действиям, а вот скрипт непосредственно в работе:

Если "притормаживает" при открытии ленты, это связано с загруженностью её другими скриптами, на отдельной странице не должен :)

<div align="center">
 <canvas id="fountainCanvas" width="400" height="600" style="background-color:black;"></canvas>
</div>
<script type="text/javascript">
 var canvas = document.getElementById('fountainCanvas');
 var ctx = canvas.getContext('2d');
 var width = canvas.width;
 var height = canvas.height;
 var sprites = [];
 var spritesNumber = 250; //количество спрайтов
 var gravity = 0.11; //гравитация, значение из интервала ]0;1[
 var xStartPosition = 0.5,  //начальная позиция по осям в долях размера канвы
     yStartPosition = 0.125; //от её левого верхнего угла, значения ]0;1[

 function generateColor () { //случайный цвет, только светлые
  return '#'+(0x1CCCCCC+(Math.random())*0x333333).toString(16).substr(1,6);
 }

 function initSprites() { //создавать спрайты не все сразу :)
  for (var i = 0; i < spritesNumber; i++) setTimeout (createSprite, Math.floor(spritesNumber/10)*i, i);
 }

 function createSprite (i) { //функция создания спрайта
  var x = width*xStartPosition;
  var y = height*yStartPosition;
  var opacity =  0.5 + Math.random()*0.5;
  var deltaX = Math.random()*4-2; //сначала спрайт немного сдвинут влево или вправо
  var deltaY = -3*Math.random(); //...и вверх
  var size = 5+Math.random()*5;
  var color = generateColor();

  var p = new Sprite(x, y, deltaX, deltaY, size, color, opacity);
  sprites.push(p);
 }

 function Sprite (x, y, deltaX, deltaY, size, color, opacity) { //функция обновления спрайта
  function reset() { //сброс состояния
   x = width*xStartPosition;
   y = height*yStartPosition;
   opacity = 0.5 + Math.random()*0.5;
   deltaX = Math.random()*4-2;
   deltaY = -3*Math.random();
  }
  
  this.update = function() { //контроль состояния
   if (opacity - 0.005 > 0) opacity -= 0.005 ;
   else reset(); //перестал быть видимым - сброс
   x += deltaX;
   deltaY += gravity; y += deltaY; //в Y-координате учесть гравитацию
  }
  
  this.draw = function() { //отрисовка
   ctx.globalAlpha = opacity;
   ctx.fillStyle = color;
   ctx.fillRect (x, y, size, size);
  } 
 }

 function render() { //рендеринг
  ctx.clearRect (0, 0, width, height);
  for (var i = 0; i < sprites.length; i++) {
   sprites[i].update();
   sprites[i].draw();
  }
  requestAnimationFrame (render); //не забываем синхронизировать!
 }

 initSprites();
 render();
</script>
<noscript>Нужен включённый Javascript для работы приложения</noscript>

Даже синхронизировать с помощью requestAnimationFrame не забыл :)

06.12.2017, 12:52 [1988 просмотров]