Делаем фейерверк на 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 и тег <canvasas>.</p>
<p>Попробуйте использовать один из следующих браузеров:</p>
<ul>
<li>Chrome (>4.0)</li>
<li>Opera (>9.0)</li>
<li>Opera Mobile (>10.0)</li>
<li>Firefox (>2.0)</li>
<li>Safari (>3.1)</li>
<li>iOS Safari (>3.2)</li>
<li>Android Browser (>2.1)</li>
<li>Internet Explorer (>=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 [16056 просмотров]