Ho fatto un Doodle per Pasqua in Javascript e HTML5

April 02, 2021

1 min read

Ho fatto un Doodle per Pasqua in Javascript e HTML5. Vediamo come creare un’ animazione in Javascript e HTML5 per festeggiare la Pasqua. L’animazione sarà posizionata su una scritta che augurerà Buona Pasqua, ottenuta dalla sovrapposizone di due scritte in modo da creare un effetto ombra. Sopra la scritta facciamo rimbalzare varie uova di pasqua colorate.

Risultato

Sorgente

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Doodle</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div style="text-align: center;">
            <canvas id="canvas" width="850" height="200"></canvas>
        </div>

        <script src="assets/js/main.js"></script>
    </body>
</html>

main.js

"use strict";

const cnv = document.getElementById("canvas");
const ctx = cnv.getContext("2d");

const logo = new Image();
logo.src = "assets/img/logo.png";

let egg = new Array();

function eggJumpClass(x, speed, cost){
    this.egg = new Image();
    this.egg.src = "assets/img/uovo"+ cost +".png";
    this.eggY = cnv.height;
    this.eggX = x;
    this.speed = speed;

    this.mov = function(){
        this.eggY -= this.speed;
        this.speed = ((this.speed * 10) - (0.2 * 10)) / 10;

        if(this.speed < -20){
            this.eggY = cnv.height;
            this.eggX = getRandomIntInclusive(50, 800);
            this.speed = getRandomIntInclusive(6, 10);
            this.egg.src = "assets/img/uovo"+ getRandomIntInclusive(1, 16) +".png";
        }
    }

    this.draw = function(){
        ctx.drawImage(
            this.egg, 
            this.eggX, 
            this.eggY, 
            80,
            100
        );
    }

}

function getRandomIntInclusive(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min; //Il max è incluso e il min è incluso
}

function logic(){
    for(let i = 0; i < egg.length; i++){
        egg[i].mov();
        console.log(egg[i].eggX);
    }
}

function draw(){

    ctx.fillStyle = "#fff";
    ctx.fillRect(0,0, cnv.width, cnv.height);
    ctx.stroke();

    ctx.save();
    ctx.globalAlpha = 0.1;

    ctx.drawImage(logo, 
        (cnv.width/2) - (logo.width/2), 
        (cnv.height/2) - (logo.height/2));

    ctx.restore();

    ctx.textAlign = "center";

    ctx.save();
    ctx.filter = "blur(4px)";

    ctx.fillStyle = "rgba(0,0,0,0.5)";
    ctx.font = "120px Snell Roundhand";
    ctx.fillText("Buona Pasqua", (cnv.width/2)+3, ((cnv.height/2) + 50)+5);

    ctx.restore();

    ctx.fillStyle = "#d4af37";
    ctx.font = "120px Snell Roundhand";
    ctx.fillText("Buona Pasqua", cnv.width/2, (cnv.height/2) + 50);

    for(let i = 0; i < egg.length; i++){
        egg[i].draw();
    }
}

function gameLoop(){
    logic();
    draw();

    requestAnimationFrame(gameLoop);
}

function init(){
    for(let i = 0; i < 6; i++){
        egg[i] = new eggJumpClass(
            getRandomIntInclusive(50, 800),
            getRandomIntInclusive(6, 10), 
            getRandomIntInclusive(1, 16)
        );
    }
}

init();
gameLoop();

Progetto su Github