国庆快乐！

Q_w7742

于 2024-09-29 13:54:20 发布

阅读量129

点赞数 7

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Q_w7742/article/details/142633629

版权

谨以此代码庆祝国庆~

！！前排提示，代码并不严谨！请勿随意传播！请勿恶意解读！！

index.html文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>国庆快乐</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 id="main-title">国庆快乐</h1>
        <h2 id="slogan">庆祝中华人民共和国成立75周年</h2>

        <!-- 动态飘动的国旗 -->
        <div id="flags-container"></div>

        <!-- 烟花特效 -->
        <canvas id="fireworksCanvas"></canvas>

        <!-- 粒子背景 -->
        <canvas id="particlesCanvas"></canvas>
    </div>

    <!-- 背景音乐 -->
    <audio id="backgroundMusic" loop autoplay>
        <source src="music/national_day.mp3" type="audio/mpeg">
    </audio>

    <script src="scripts.js"></script>
</body>
</html>

scripts.js文件：

// 获取烟花和粒子画布
const fireworksCanvas = document.getElementById('fireworksCanvas');
const fireworksCtx = fireworksCanvas.getContext('2d');
resizeCanvas(fireworksCanvas);

// 获取粒子背景画布
const particlesCanvas = document.getElementById('particlesCanvas');
const particlesCtx = particlesCanvas.getContext('2d');
resizeCanvas(particlesCanvas);

// 动态飘动的国旗生成，包含星星
const flagsContainer = document.getElementById('flags-container');
for (let i = 0; i < 6; i++) {
    const flag = document.createElement('div');
    flag.className = 'flag';

    // 大星星
    // const bigStar = document.createElement('div');
    // bigStar.className = 'big-star';
    // flag.appendChild(bigStar);

    // 4 颗小星星
    // for (let j = 0; j < 4; j++) {
    //     const smallStar = document.createElement('div');
    //     smallStar.className = 'small-star';
    //     flag.appendChild(smallStar);
    // }

    flagsContainer.appendChild(flag);
}


// 创建烟花效果
let fireworks = [];
fireworksCanvas.addEventListener('click', function(e) {
    createFireworkAt(e.clientX, e.clientY);
});

function createFireworkAt(x, y) {
    const color = `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 1)`;
    fireworks.push(new Firework(x, y, color));
}

class Firework {
    constructor(x, y, color) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.particles = [];
        for (let i = 0; i < 30; i++) {
            this.particles.push(new Particle(x, y, color));
        }
    }

    update() {
        this.particles.forEach(particle => particle.update());
        this.particles = this.particles.filter(particle => particle.size > 0);
    }

    draw() {
        this.particles.forEach(particle => particle.draw());
    }
}

class Particle {
    constructor(x, y, color) {
        this.x = x;
        this.y = y;
        this.size = Math.random() * 5 + 2;
        this.speedX = (Math.random() - 0.5) * 6;
        this.speedY = (Math.random() - 0.5) * 6;
        this.gravity = 0.1;
        this.color = color;
        this.alpha = 1;
    }

    update() {
        this.speedY += this.gravity;
        this.x += this.speedX;
        this.y += this.speedY;
        this.size -= 0.1;
        this.alpha -= 0.02;
    }

    draw() {
        fireworksCtx.fillStyle = this.color.replace('1)', `${this.alpha})`);
        fireworksCtx.beginPath();
        fireworksCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        fireworksCtx.fill();
    }
}

// 烟花动画循环
function animateFireworks() {
    fireworksCtx.clearRect(0, 0, fireworksCanvas.width, fireworksCanvas.height);
    fireworks.forEach(firework => {
        firework.update();
        firework.draw();
    });
    fireworks = fireworks.filter(firework => firework.particles.length > 0);
    requestAnimationFrame(animateFireworks);
}
animateFireworks();

// 创建粒子背景效果
let particles = [];
function createParticles() {
    for (let i = 0; i < 100; i++) {
        particles.push(new BackgroundParticle());
    }
}

class BackgroundParticle {
    constructor() {
        this.x = Math.random() * particlesCanvas.width;
        this.y = Math.random() * particlesCanvas.height;
        this.size = Math.random() * 2 + 1;
        this.speedX = (Math.random() - 0.5) * 2;
        this.speedY = (Math.random() - 0.5) * 2;
        this.color = `rgba(255, 255, 255, ${Math.random()})`;
    }

    update() {
        this.x += this.speedX;
        this.y += this.speedY;
        if (this.x < 0 || this.x > particlesCanvas.width) this.speedX *= -1;
        if (this.y < 0 || this.y > particlesCanvas.height) this.speedY *= -1;
    }

    draw() {
        particlesCtx.beginPath();
        particlesCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        particlesCtx.fillStyle = this.color;
        particlesCtx.fill();
    }
}

// 粒子背景动画循环
function animateParticles() {
    particlesCtx.clearRect(0, 0, particlesCanvas.width, particlesCanvas.height);
    particles.forEach(particle => {
        particle.update();
        particle.draw();
    });
    requestAnimationFrame(animateParticles);
}

createParticles();
animateParticles();

// 背景音乐控制
const backgroundMusic = document.getElementById('backgroundMusic');
backgroundMusic.volume = 0.3;

// 调整画布尺寸
function resizeCanvas(canvas) {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

window.addEventListener('resize', () => {
    resizeCanvas(fireworksCanvas);
    resizeCanvas(particlesCanvas);
});

styles.css文件：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    font-family: 'Arial', sans-serif;
    background: radial-gradient(circle, #09203f, #000000);
    color: white;
    overflow: hidden;
}

.container {
    position: relative;
    text-align: center;
    z-index: 1;
}

#main-title {
    font-size: 80px;
    margin-top: 8%;
    color: #FFD700;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
    animation: glow 2s infinite alternate;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 5px;
}

#slogan {
    font-size: 40px;
    color: #FF4500;
    margin-top: 0;
    text-shadow: 0 0 20px rgba(255, 69, 0, 0.8);
    animation: float 3s ease-in-out infinite alternate;
}

/* 添加国旗容器位置调整 */
#flags-container {
    position: absolute;
    top: 180%; /* 适当下移位置 */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

/* 国旗样式 */
.flag {
    width: 120px;
    height: 80px;
    background-color: red;
    position: relative;
    border: 2px solid gold;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.8);
    animation: flag-waving 5s linear infinite;
}

/* 大星星 */
.flag .big-star {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: yellow;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* 小星星 */
.flag .small-star {
    width: 10px;
    height: 10px;
    position: absolute;
    background-color: yellow;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* 小星星具体位置与旋转角度 */
.flag .small-star:nth-child(2) {
    top: 3px;
    left: 35px;
    transform: rotate(-30deg);
}

.flag .small-star:nth-child(3) {
    top: 15px;
    left: 42px;
    transform: rotate(-15deg);
}

.flag .small-star:nth-child(4) {
    top: 30px;
    left: 40px;
    transform: rotate(0deg);
}

.flag .small-star:nth-child(5) {
    top: 38px;
    left: 25px;
    transform: rotate(15deg);
}

@keyframes flag-waving {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}



#fireworksCanvas, #particlesCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

@keyframes glow {
    from {
        text-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700, 0 0 30px #FFD700, 0 0 40px #FFD700, 0 0 50px #FFD700;
    }
    to {
        text-shadow: 0 0 20px #FF4500, 0 0 30px #FF4500, 0 0 40px #FF4500, 0 0 50px #FF4500;
    }
}

@keyframes float {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-10px);
    }
}

@keyframes flag-waving {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}

！！再次提示，代码并不严谨！请勿随意传播！请勿恶意解读！！不完善内容请自行完善！！