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 :)