DEV Community

Okyn
Okyn

Posted on

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

Top comments (2)

Collapse
 
mayankav profile image
mayankav

Good start! Keep the posts coming

Collapse
 
0kyn profile image
Okyn

Thanks for kind words! I'll try :)