Tạo hiệu ứng bắn pháo hoa bằng HTML5 và Javascript

Bước 1 : HTML

Chúng ta chỉ cần chèn thẻ

Bước 2 : CSS

body {

background: #000;

margin: 0;

}

canvas {

cursor: crosshair;

display: block;

}

Bước 3 : Javascript

Đây là phần quan trọng nhất trong bài viết, để tạo hiệu ứng bắn pháo hoa, các bạn copy toàn bộ đoạn script trên để áp dụng cho chính website hay blog của mình.

window.requestAnimFrame = ( function() {

return window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

function( callback ) {

window.setTimeout( callback, 1000 / 60 );

};

})();

var canvas = document.getElementById( 'canvas' ),

ctx = canvas.getContext( '2d' ),

cw = window.innerWidth,

ch = window.innerHeight,

fireworks = [],

particles = [],

hue = 120,

limiterTotal = 5,

limiterTick = 0,

timerTotal = 80,

timerTick = 0,

mousedown = false,

mx,

my;

canvas.width = cw;

canvas.height = ch;

function random( min, max ) {

return Math.random() * ( max - min ) + min;

}

function calculateDistance( p1x, p1y, p2x, p2y ) {

var xDistance = p1x - p2x,

yDistance = p1y - p2y;

return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );

}

// Tạo pháo hoa

function Firework( sx, sy, tx, ty ) {

this.x = sx;

this.y = sy;

this.sx = sx;

this.sy = sy;

this.tx = tx;

this.ty = ty;

this.distanceToTarget = calculateDistance( sx, sy, tx, ty );

this.distanceTraveled = 0;

this.coordinates = [];

this.coordinateCount = 3;

while( this.coordinateCount-- ) {

this.coordinates.push( [ this.x, this.y ] );

}

this.angle = Math.atan2( ty - sy, tx - sx );

this.speed = 2;

this.acceleration = 1.05;

this.brightness = random( 50, 70 );

this.targetRadius = 1;

}

Firework.prototype.update = function( index ) {

this.coordinates.pop();

this.coordinates.unshift( [ this.x, this.y ] );

if( this.targetRadius < 8 ) {

this.targetRadius += 0.3;

} else {

this.targetRadius = 1;

}

this.speed *= this.acceleration;

var vx = Math.cos( this.angle ) * this.speed,

vy = Math.sin( this.angle ) * this.speed;

this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );

if( this.distanceTraveled >= this.distanceToTarget ) {

createParticles( this.tx, this.ty );

fireworks.splice( index, 1 );

} else {

this.x += vx;

this.y += vy;

}

// Vẽ pháo hoa

Firework.prototype.draw = function() {

ctx.beginPath();

ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );

ctx.lineTo( this.x, this.y );

ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';

ctx.stroke();

ctx.beginPath();

ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );

ctx.stroke();

}

function Particle( x, y ) {

this.x = x;

this.y = y;

this.coordinates = [];

this.coordinateCount = 5;

while( this.coordinateCount-- ) {

this.coordinates.push( [ this.x, this.y ] );

}

this.angle = random( 0, Math.PI * 2 );

this.speed = random( 1, 10 );

this.friction = 0.95;

this.gravity = 1;

this.hue = random( hue - 20, hue + 20 );

this.brightness = random( 50, 80 );

this.alpha = 1;

this.decay = random( 0.015, 0.03 );

}

Particle.prototype.update = function( index ) {

this.coordinates.pop();

this.coordinates.unshift( [ this.x, this.y ] );

this.speed *= this.friction;

this.x += Math.cos( this.angle ) * this.speed;

this.y += Math.sin( this.angle ) * this.speed + this.gravity;

this.alpha -= this.decay;

if( this.alpha <= this.decay ) {

particles.splice( index, 1 );

}

Particle.prototype.draw = function() {

ctx. beginPath();

ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );

ctx.lineTo( this.x, this.y );

ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';

ctx.stroke();

}

function createParticles( x, y ) {

var particleCount = 30;

while( particleCount-- ) {

particles.push( new Particle( x, y ) );

}

function loop() {

requestAnimFrame( loop );

hue += 0.5;

ctx.globalCompositeOperation = 'destination-out';

ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';

ctx.fillRect( 0, 0, cw, ch );

ctx.globalCompositeOperation = 'lighter';

var i = fireworks.length;

while( i-- ) {

fireworks[ i ].draw();

fireworks[ i ].update( i );

}

var i = particles.length;

while( i-- ) {

particles[ i ].draw();

particles[ i ].update( i );

}

if( timerTick >= timerTotal ) {

if( !mousedown ) {

fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );

timerTick = 0;

}

} else {

timerTick++;

}

if( limiterTick >= limiterTotal ) {

if( mousedown ) {

fireworks.push( new Firework( cw / 2, ch, mx, my ) );

limiterTick = 0;

}

} else {

limiterTick++;

}

canvas.addEventListener( 'mousemove', function( e ) {

mx = e.pageX - canvas.offsetLeft;

my = e.pageY - canvas.offsetTop;

});

canvas.addEventListener( 'mousedown', function( e ) {

e.preventDefault();

mousedown = true;

});

canvas.addEventListener( 'mouseup', function( e ) {

e.preventDefault();

mousedown = false;

});

window.onload = loop;

Tin khác:

Trường Khoa Học Máy Tính & Trí Tuệ Nhân Tạo

Khoa Công Nghệ Thông Tin

Tạo hiệu ứng bắn pháo hoa bằng HTML5 và Javascript