Comment créer une scène de Noël magique avec des flocons de neige animés et le Père Noël en JavaScript-tutoriel CSS-php.cn

Comment créer une scène de Noël magique avec des flocons de neige animés et le Père Noël en JavaScript

Patricia Arquette

Libérer： 2024-12-04 00:47:13

original

703 Les gens l'ont consulté

How to Create a Magical Christmas Scene with Animated Snowflakes and Santa in JavaScript

La période des fêtes est arrivée, et quelle meilleure façon de répandre la joie que de créer une scène de Noël dynamique en JavaScript ? Dans ce didacticiel, nous vous guiderons dans la création d'une superbe animation sur le thème des fêtes mettant en vedette des flocons de neige qui tombent, une ville de Noël festive et le Père Noël volant dans son traîneau.

? Démo en direct https://codepen.io/HanGPIIIErr/pen/LEPVwjp

? Ce que vous créerez

Des flocons de neige animés tombant gracieusement.
Une ville de Noël festive rayonnante de l’esprit des fêtes.
Le Père Noël vole dans le ciel nocturne dans son traîneau avec un mouvement oscillant réaliste.
Ce projet utilise HTML, CSS et JavaScript (API Canvas), ce qui le rend parfait pour les développeurs débutants et expérimentés.

Configuration du HTML Nous allons commencer par une structure HTML simple :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Christmas Wonderland</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Add the CSS styles here */
    </style>
</head>
<body>
    <canvas>


<ol>
<li>Styling the Scene with CSS</li>
</ol>

<p>We use CSS to create the visual layers of the scene:</p>

<p>A gradient background to simulate the night sky.<br>
A city banner showcasing a cozy Christmas town.<br>
Layers for snow and Santa's animation.<br>
</p>

<pre class="brush:php;toolbar:false">body {
    margin: 0;
    overflow: hidden;
    background: linear-gradient(to bottom, #1e3b70, #29578a, #3a75b6, #a0d3e8);
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* Canvas for the snow and Santa */
#skyCanvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Section for the Christmas town */
#christmasScene {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50%;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* City banner */
#cityBanner {
    width: 100%;
    height: 100%;
    background: url('https://i.ibb.co/0p0Wzrk/DALL-E-2024-12-02-23-27.png') no-repeat center center;
    background-size: cover;
    background-position: bottom;
}

Copier après la connexion

Ajouter de la magie avec JavaScript

Grâce à l'API Canvas, nous donnerons vie à notre scène en :

Animer des flocons de neige avec différentes tailles, vitesses et mouvements.
Faire voler le Père Noël dans le ciel avec une trajectoire oscillante douce.

const canvas = document.getElementById('skyCanvas');
const ctx = canvas.getContext('2d');

let width, height;
let snowflakes = [];
let santa = {
    x: width,
    y: height * 0.1,
    width: 150,
    height: 80,
    image: new Image(),
    time: 0
};

// Load Santa's image
santa.image.src = 'https://i.ibb.co/rbHJDQB/DALL-E-2024-12-02-23-37-removebg-preview.png';

function init() {
    resize();
    createSnowflakes();
    animate();
}

function resize() {
    width = canvas.width = window.innerWidth;
    height = canvas.height = window.innerHeight;
    santa.x = width;
    santa.y = height * 0.1;
}

window.addEventListener('resize', resize);

function createSnowflakes() {
    let count = width / 8;
    snowflakes = [];
    for (let i = 0; i < count; i++) {
        snowflakes.push(new Snowflake());
    }
}

function Snowflake() {
    this.x = Math.random() * width;
    this.y = Math.random() * height;
    this.radius = Math.random() * 4 + 1;
    this.speedX = Math.random() * 1 - 0.5;
    this.speedY = Math.random() * 3 + 1;
    this.opacity = Math.random() * 0.5 + 0.3;
    this.swing = Math.random() * 2;
    this.swingSpeed = Math.random() * 0.05 + 0.02;
    this.angle = Math.random() * Math.PI * 2;
}

Snowflake.prototype.update = function () {
    this.angle += this.swingSpeed;
    this.x += Math.cos(this.angle) * this.swing + this.speedX;
    this.y += this.speedY;

    if (this.y > height) {
        this.y = 0;
        this.x = Math.random() * width;
    }

    if (this.x > width) {
        this.x = 0;
    }
    if (this.x < 0) {
        this.x = width;
    }
};

Snowflake.prototype.draw = function () {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);

    let gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius * 2);
    gradient.addColorStop(0, 'rgba(255, 255, 255,' + this.opacity + ')');
    gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');

    ctx.fillStyle = gradient;
    ctx.fill();
};

function updateSanta() {
    santa.time += 0.05;
    santa.x -= 3;
    santa.y = height * 0.1 + Math.sin(santa.time) * 50;

    if (santa.x + santa.width < 0) {
        santa.x = width;
    }
}

function drawSanta() {
    ctx.drawImage(santa.image, santa.x, santa.y, santa.width, santa.height);
}

function animate() {
    ctx.clearRect(0, 0, width, height);

    snowflakes.forEach((flake) => {
        flake.update();
        flake.draw();
    });

    updateSanta();
    drawSanta();

    requestAnimationFrame(animate);
}

init();

Copier après la connexion

Voyez-le en action

Découvrez la version live de ce projet :

? https://codepen.io/HanGPIIIErr/pen/LEPVwjp

Conclusion

Ce projet festif met en valeur la puissance de l'API Canvas pour créer des animations interactives. Que vous célébriez les vacances ou appreniez des techniques d'animation, ce projet est une façon amusante de pratiquer et d'améliorer vos compétences en codage.

N'hésitez pas à utiliser le CodePen et à personnaliser davantage la scène pour vous l'approprier. Bonnes vacances ! ?✨

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!