БлогNot. Делаем фейерверк на Javascript

Делаем фейерверк на Javascript

Давно просимый ребёнком "весёлый фейерверк", на JS+HTML5. Для канвы HTML5 уже есть метод createRadialGradient, а остальное - дело техники. Настройки приведены в коде, наверняка можно сделать красивей, "поиграв" с ними. А вот самое простое - "сделать окно фейерверка во всё окно браузера" на Javascript без JQuery как раз непросто, потому что screen.width и screen.height дают размеры всего экрана, а не клиентской части окна, что касается document.body.clientWidth и document.body.clientHeight, то с первым будет всё нормально, а вот высота пустого документа будет нулевой или маленькой. Так что лучше смотреть в полноэкранном режиме (клавиша F11 в "Хроме" и других популярных браузерах).

 FireWorks.html, открыть в текущей вкладке или скачать (через правую кнопку мыши) (4 Кб)

Вот полный исходник приложения на момент написания:

<!DOCTYPE html>
<html lang="ru">
<head>
 <title>Firework</title>
 <meta charset='utf-8'>
  <style type="text/css">
   html, body { margin: 0; padding: 0; overflow:hidden; }
  </style>
</head>
<body>

<div id="div" align="center">
<canvas id="canvas" style="border: 0px">
<p>Похоже, ваш браузер не поддерживает HTML5 и тег &lt;canvasas&gt;.</p>
<p>Попробуйте использовать один из следующих браузеров:</p>
<ul>
 <li>Chrome (&gt;4.0)</li>
 <li>Opera (&gt;9.0)</li>
 <li>Opera Mobile (&gt;10.0)</li>
 <li>Firefox (&gt;2.0)</li>
 <li>Safari (&gt;3.1)</li>
 <li>iOS Safari (&gt;3.2)</li>
 <li>Android Browser (&gt;2.1)</li>
 <li>Internet Explorer (&gt;=9.0)</li>
</ul>
</canvas>
</div>

<script>

var b = document.getElementById("div");
var c = document.getElementById("canvas");
var a = c.getContext("2d");
var W=c.width=document.body.clientWidth; //ширина - по размерам клиенской части окна
var H=c.height=screen.height; //высота - это не "во весь экран", а больше из-за служебных областей окна
var Objects=[];
var Colors="255,0,0;0,255,0;0,0,255;255,255,0;255,0,255;0,255,255;255,255,204;255,204,255;204,255,255".split(";");
var timeInterval=20; //частота обновления, мс
var petardColor="rgb(0,128,0)"; //цвет петарды до взрыва
var numRays=16; //количество лучей <s>чучхе</s> при взрыве
var percentAlive=60; //процент пускаемых, 0-все, 100-никто
var petardRadius=3; //начальный радиус петарды, пикс.
var fireRadius=31; //радиус для вызрыва, пикс.
var fireBallRadius=5; //радиус отдельного огонька при взрыве, пикс.

DeleteObject=function (obj,t) {
 if(t) delete Objects[obj];
 else Objects[Objects.length]=obj;
};

DrawBack=function() {
 a["globalCompositeOperation"]="source-over"; //новая фигура визуализируется поверх уже добавленных на холст
 a.fillStyle="rgba(0,0,0,.4)";
 a.fillRect(0,0,W,H);
};

ColorPath=function(x,y,r,f) {
 a.beginPath();
 a.arc(x,y,r,0,Math.PI*2,0);
 a.fillStyle=f;
 a.fill();
};

FinalDraw=function(k,x,y,g){
 this.k=k;
 this.x=k?x:(Math.random()*(W-200))+100;
 this.y=k?y:H;
 this.t=0;
 this.j=k ? 25 : 75;
 this.a=k ? Math.random()*360 : 240+Math.random()*70;
 this.s=Math.random()*3+2;
 this.g=g;

 this.thisDraw=function() {
  this.t++;
  if(this.k) { //взрыв
   f=(Math.PI/180)*this.a;
   this.x+=Math.cos(f)*this.s;
   this.y+=Math.sin(f)*this.s;
   a["globalCompositeOperation"]="lighter";
   g=a.createRadialGradient(this.x,this.y,1,this.x,this.y,fireBallRadius);
   g["addColorStop"](0,"rgba(255,255,255,.55)");
   g["addColorStop"](1,"rgba("+this.g+",.03)");
   ColorPath(this.x,this.y,fireRadius,g);
  }
  else { //пуск петарды
   f=(Math.PI/180)*this.a;
   this.x+=Math.cos(f)*5; //
   this.y+=Math.sin(f)*7.5; //увеличьте для взрывов выше
   ColorPath(this.x,this.y,petardRadius,petardColor);
  }
 }
};

setInterval(
 function() {
  DrawBack();
  for (q in Objects) {
   var obj=Objects[q];
   obj.thisDraw();
   if(obj.t>obj.j) {
    if(!obj.k) {
     h=Math.random()*Colors.length|0;
     for (c=0;c<numRays;c++) DeleteObject(new FinalDraw(1,obj.x,obj.y,Colors[h]));
    }
    DeleteObject(q,1);
   }
  }
  var c=Math.random()*100;
  if(c>percentAlive) DeleteObject(new FinalDraw);
 },timeInterval);
    
</script>
<noscript>
<p><b>Для работы приложения нужен включённый в браузере Javascript!</b></p>
</noscript>

</body></html>

Наверное, было бы нетрудно поджать исходник и до 1 Кб, как на знаменитом js1k :) Кстати, там полно красивых javascript-эффектов, которые можно запустить не только из интегрированной среды сайта, но и скопировать себе. В большинстве случаев достаточно перед "зашифрованным" исходником добавить типовые определения переменных b, c, a (в прилагаемом листинге сделано с теми же значениями этих переменных), плюс подготовить <canvas> внутри раздела <div> (как в листинге).

По идее, должно работать везде, где есть тег <canvas>, но кроссбраузерность я не проверял, только запустил в дежурном "Хроме". Предполагается кодировка документа UTF-8 (Юникод).

 Более новый "фейерверк дня" здесь

17.01.2016, 14:05 [15416 просмотров]


теги: javascript графика random детское

К этой статье пока нет комментариев, Ваш будет первым