Pumpkins fall! 🎃

0kyn

Okyn

Posted on October 31, 2021

Pumpkins fall! 🎃

Happy Halloween 2021!

I challenged myself and decided to code a tiny project related to Halloween and Canvas!

screenshot

Confetti 🎊

I was looking toward a way to get a random particles generator in a canvas, and I came across this great tool confetti-js which widely inspired this project.

halloween-2021

Nearly everything stands in the app config:

const app = {
    target: 'canvas',
    images: ['./images/bat.png', './images/pumpkin.png', './images/sweet.png'],
    max: 30,
    speed: 3,
    width: window.innerWidth,
    height: window.innerHeight,
    imageMinWidth: 30,
    imageMaxWidth: 100,
}
Enter fullscreen mode Exit fullscreen mode

One helpful function:

function getRandomInt(min, max) {
    min = Math.ceil(min)
    max = Math.floor(max)
    return Math.floor(Math.random() * (max - min + 1)) + min
}
Enter fullscreen mode Exit fullscreen mode

Demo and code (which might be frightening 😱) are available.

Demo: https://0kyn.github.io/halloween-2021/
Sources: https://github.com/0kyn/halloween-2021

💖 💪 🙅 🚩
0kyn
Okyn

Posted on October 31, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Pumpkins fall! 🎃
halloween Pumpkins fall! 🎃

October 31, 2021