ایجاد انیمیشن فایروورک (فشفشه و بمب ذرات انفجاری) با HTML5 Canvas و JavaScript

اگر به دنبال ایجاد یک انیمیشن زیبا و جذاب فایروورک برای وب‌سایت خود هستید، استفاده از HTML5 Canvas و JavaScript یک راه حل مناسب است. در این کد، ما یک انیمیشن فایروورک پویا و پر رنگ طراحی کرده‌ایم که به صورت تصادفی ذرات رنگی را در تمامی صفحه نمایش می‌دهد.

این انیمیشن شامل تنظیماتی مثل سرعت ذرات، شعاع آن‌ها، و رنگ‌های مختلف است که به شما اجازه می‌دهد تا انیمیشن را به دلخواه خود شخصی‌سازی کنید. علاوه بر این، کاربران می‌توانند با کلیک روی صفحه، فایروورک‌های جدیدی را ایجاد کنند.

کد ارائه شده بهینه‌سازی شده است و شامل توابعی برای مدیریت اندازه صفحه، ایجاد ذرات با رنگ‌های مختلف، و حذف ذرات بعد از رسیدن به انتهای صفحه است. با استفاده از این کد، می‌توانید یک تجربه بصری جذاب و تعاملی برای کاربران وب‌سایت خود ایجاد کنید.

ویژگی‌های کد:

• پر رنگ بودن: هر ذره فایروورک رنگ تصادفی متفاوتی دارد.
• تعامل کاربری: کاربران می‌توانند با کلیک روی canvas، فایروورک‌های جدیدی را ایجاد کنند.
• پشتیبانی از اندازه‌گیری دینامیک: انیمیشن به صورت خودکار به اندازه صفحه مرورگر سازگار می‌شود.
• سازگاری با مرورگرهای مختلف: استفاده از requestAnimationFrame برای اطمینان از عملکرد بهینه در تمام مرورگرهای مدرن.

با استفاده از این کد، می‌توانید وب‌سایت خود را با یک انیمیشن جذاب و پویا تزئین کنید که توجه کاربران را به خود جلب می‌کند.

دموی این کد

کد

<style>
        #canvas {
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* اجازه دادن به کاربر برای تعامل با عناصر زیر canvas */
        }
</style>
<canvas id="canvas"></canvas>
<script>



// تعریف متغیرها
var canvas, ctx, w, h, particles = [], probability = 0.04,
    xPoint, yPoint, stopAnimation = false;

// تعریف requestAnimationFrame برای سازگاری با مرورگرهای قدیمی
window.requestAnimationFrame =
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };

// تابع اصلی برای شروع
function onLoad() {
    canvas = document.getElementById("canvas");
    if (!canvas || !canvas.getContext) {
        console.error("Canvas not supported or not found!");
        return;
    }
    ctx = canvas.getContext("2d");

    // تنظیم اندازه canvas
    resizeCanvas();

    // شروع انیمیشن
    window.requestAnimationFrame(updateWorld);

    // تنظیم تایمر برای توقف بعد از 10 ثانیه
    setTimeout(function () {
        stopAnimation = true;
        document.getElementById("canvas").style.display = 'none';
    }, 100000); // 10 ثانیه
}

// تابع برای تنظیم اندازه canvas
function resizeCanvas() {
    if (!!canvas) {
        w = canvas.width = window.innerWidth;
        h = canvas.height = window.innerHeight;
    }
}

// تابع اصلی برای به‌روزرسانی جهان
function updateWorld() {
    if (!stopAnimation) {
        update();
        paint();
        window.requestAnimationFrame(updateWorld);
    }
}

// تابع برای به‌روزرسانی ذرات
function update() {
    if (particles.length < 500 && Math.random() < probability) {
        createFirework();
    }

    var alive = [];
    for (var i = 0; i < particles.length; i++) {
        if (particles[i].move()) {
            alive.push(particles[i]);
        }
    }
    particles = alive;
}

// تابع برای رسم انیمیشن
function paint() {
    ctx.globalCompositeOperation = 'source-over';
    ctx.clearRect(0, 0, w, h); // پاک کردن تمام محتوای قبلی
    ctx.globalCompositeOperation = 'lighter';

    for (var i = 0; i < particles.length; i++) {
        particles[i].draw(ctx);
    }
}

// تابع برای ایجاد فایروورک
function createFirework() {
    xPoint = Math.random() * (w - 200) + 100;
    yPoint = Math.random() * (h - 200) + 100;

    var nFire = Math.random() * 50 + 100;

    for (var i = 0; i < nFire; i++) {
        var particle = new Particle();
        particle.color = getRandomColor(); // هر ذره رنگ تصادفی متفاوتی دارد
        var vy = Math.sqrt(25 - particle.vx * particle.vx);
        if (Math.abs(particle.vy) > vy) {
            particle.vy = particle.vy > 0 ? vy : -vy;
        }
        particles.push(particle);
    }
}

// تعریف کلاس ذرت
function Particle() {
    this.w = this.h = Math.random() * 4 + 1;
    this.x = xPoint - this.w / 2;
    this.y = yPoint - this.h / 2;
    this.vx = (Math.random() - 0.5) * 10;
    this.vy = (Math.random() - 0.5) * 10;
    this.alpha = Math.random() * .5 + .5;
    this.color; // رنگ ذره
}

// متد‌های ذرت
Particle.prototype = {
    gravity: 0.05,
    move: function () {
        this.x += this.vx;
        this.vy += this.gravity;
        this.y += this.vy;
        this.alpha -= 0.01;

        if (this.x <= -this.w || this.x >= w ||
            this.y >= h ||
            this.alpha <= 0) {
            return false;
        }
        return true;
    },
    draw: function (c) {
        c.save();
        c.beginPath();
        c.translate(this.x + this.w / 2, this.y + this.h / 2);
        c.arc(0, 0, this.w, 0, Math.PI * 2);
        c.fillStyle = this.color; // استفاده از رنگ ذره
        c.globalAlpha = this.alpha;
        c.closePath();
        c.fill();
        c.restore();
    }
};

// تابع برای تولید رنگ تصادفی پر رنگ
function getRandomColor() {
    var colors = [
        "rgb(255, 0, 0)",    // قرمز
        "rgb(0, 255, 0)",    // سبز
        "rgb(0, 0, 255)",    // آبی
        "rgb(255, 255, 0)",  // زرد
        "rgb(255, 0, 255)",  // بنفش
        "rgb(0, 255, 255)",  // آبی آسمانی
        "rgb(255, 165, 0)",  // نارنجی
        "rgb(128, 0, 128)"   // بنفش تیره
    ];
    return colors[Math.floor(Math.random() * colors.length)];
}

// اضافه کردن رویداد کلیک به document
document.addEventListener("click", function (event) {
    if (event.target.tagName === "CANVAS") {
        createFirework(); // ایجاد فایروورک جدید
    }
});

// اجرای تابع onLoad بعد از بارگذاری صفحه
window.addEventListener("DOMContentLoaded", onLoad);
</script>