2025蛇年喜庆HTML5代码

最新推荐文章于 2025-01-26 14:56:17 发布

学习&实践爱好者

最新推荐文章于 2025-01-26 14:56:17 发布

阅读量1k

点赞数 3

分类专栏： HTML5与CSS3 JavaScrip技术编程实践系列文章标签： html5 前端 html

本文链接：https://blog.csdn.net/cnds123/article/details/145065617

版权

编程实践系列同时被 3 个专栏收录

191 篇文章

订阅专栏

JavaScrip技术

150 篇文章

订阅专栏

HTML5与CSS3

99 篇文章

订阅专栏

2025蛇年喜庆HTML5代码

以下是一个简单的HTML5 + CSS + JavaScript代码示例，用于庆祝2025年蛇年。

先看效果图：

源码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2025年蛇年快乐！</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #0a0a23; /* 深蓝色背景 */
            color: #ffffff; /* 白色文字 */
            text-align: center;
            margin: 0;
            overflow: hidden;
        }
        h1 {
            font-size: 3em;
            margin-top: 20px;
        }
        p {
            font-size: 1.5em;
            margin-bottom: 20px;
        }
        canvas {
            display: block;
            margin: 0 auto;
            background-color: transparent;
        }
    </style>
</head>
<body>
    <h1>2025年蛇年快乐！</h1>
    <p>祝您在新的一年里，身体健康，万事如意！</p>
    <canvas id="snakeCanvas" width="800" height="600"></canvas>

    <script>
        const canvas = document.getElementById('snakeCanvas');
        const ctx = canvas.getContext('2d');

        // 蛇的初始位置和参数
        let snake = {
            x: 400,
            y: 300,
            segments: 30, // 蛇的节数
            segmentLength: 15, // 每节的长度
            angle: 0, // 蛇的角度
            speed: 2, // 蛇的移动速度
            trail: [] // 蛇的轨迹
        };

        // 烟花数组
        let fireworks = [];

        // 烟花构造函数
        function Firework(x, y) {
            this.x = x;
            this.y = y;
            this.particles = [];
            for (let i = 0; i < 60; i++) {  // 增加粒子数量
                const angle = Math.random() * Math.PI * 2;
                const speed = Math.random() * 8 + 3;  // 增加扩散速度 *8 + 3;
                this.particles.push({
                    x: this.x,
                    y: this.y,
                    vx: Math.cos(angle) * speed,
                    vy: Math.sin(angle) * speed,
                    alpha: 1,
                    color: `hsl(${Math.random() * 360}, 100%, 50%)`
                });
            }
        }

        // 更新烟花状态
        Firework.prototype.update = function() {
            this.particles.forEach(particle => {
                particle.x += particle.vx;
                particle.y += particle.vy;
                particle.alpha -= 0.02;
            });
            this.particles = this.particles.filter(particle => particle.alpha > 0);
        };

        // 绘制烟花粒子
        Firework.prototype.draw = function() {
            this.particles.forEach(particle => {
                ctx.fillStyle = particle.color;
                ctx.globalAlpha = particle.alpha;
                ctx.beginPath();
                ctx.arc(particle.x, particle.y, 3, 0, Math.PI * 2);    // 增大粒子大小3
                ctx.fill();
            });
            ctx.globalAlpha = 1;
        };

        // 绘制蛇
        function drawSnake() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 更新蛇的角度
            snake.angle += 0.05;

            // 计算蛇头的新位置
            snake.x += Math.cos(snake.angle) * snake.speed;
            snake.y += Math.sin(snake.angle) * snake.speed;

            // 将新位置添加到轨迹中
            snake.trail.push({ x: snake.x, y: snake.y });

            // 如果轨迹长度超过蛇的节数，移除最旧的点
            if (snake.trail.length > snake.segments) {
                snake.trail.shift();
            }

            // 绘制蛇的身体
            ctx.strokeStyle = '#d9534f';
            ctx.lineWidth = 10;
            ctx.lineCap = 'round';
            ctx.beginPath();
            for (let i = 0; i < snake.trail.length - 1; i++) {
                const x1 = snake.trail[i].x;
                const y1 = snake.trail[i].y;
                const x2 = snake.trail[i + 1].x;
                const y2 = snake.trail[i + 1].y;
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y2);
            }
            ctx.stroke();

            // 绘制蛇头
            drawSnakeHead(snake.x, snake.y, snake.angle);

            // 更新并绘制烟花
            fireworks.forEach((firework, index) => {
                firework.update();
                firework.draw();
                if (firework.particles.length === 0) {
                    fireworks.splice(index, 1);
                }
            });

            // 随机生成烟花
            if (Math.random() < 0.03) {  // 控制烟花出现的频度
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height;
                fireworks.push(new Firework(x, y));
            }

            // 循环动画
            requestAnimationFrame(drawSnake);
        }

        // 绘制蛇头
        function drawSnakeHead(x, y, angle) {
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(angle);

            // 绘制头部形状（椭圆形）
            ctx.fillStyle = '#d9534f';
            ctx.beginPath();
            ctx.ellipse(0, 0, 20, 15, 0, 0, Math.PI * 2);
            ctx.fill();

            // 绘制眼睛
            const eyeOffsetX = 10; // 眼睛距离中心点的水平偏移
            const eyeOffsetY = 5; // 眼睛距离中心点的垂直偏移

            ctx.fillStyle = 'white';
            ctx.beginPath();
            ctx.arc(eyeOffsetX, eyeOffsetY, 4, 0, Math.PI * 2); // 左眼
            ctx.arc(eyeOffsetX, -eyeOffsetY, 4, 0, Math.PI * 2);  // 右眼
            ctx.fill();

            // 绘制瞳孔
            ctx.fillStyle = 'black';
            ctx.beginPath();
            ctx.arc(eyeOffsetX, eyeOffsetY, 2, 0, Math.PI * 2); // 左瞳孔
            ctx.arc(eyeOffsetX, -eyeOffsetY, 2, 0, Math.PI * 2);  // 右瞳孔
            ctx.fill();

            // 绘制舌头
            ctx.strokeStyle = 'red';
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(20, 0); // 舌头起点
            ctx.lineTo(30, -5); // 舌头分叉点 1
            ctx.moveTo(20, 0); // 回到起点
            ctx.lineTo(30, 5);  // 舌头分叉点 2
            ctx.stroke();

            ctx.restore();
        }

        // 启动动画
        drawSnake();
    </script>
</body>
</html>