CODEWITHSUNDEEP
javascriptcanvashtml5-canvas
Guy
Guy

Reputation: 13336

canvas: create a game-like exploding stars effect for gamification purposes

Coming from the backbone side of web development we are trying to find a solution for a request to add visual and sound effects to our task management web application. For starters - we are looking for a way to create an exploding stars effect like you see in games.

Can this be done with HTML5 canvas? Should we use flash? Any ideas how to start?

Upvotes: 3

Views: 2490

Answers (1)

Jeffrey Sweeney
Jeffrey Sweeney

Reputation: 6124

By now, just about anything Flash can do visually can be done by the HTML5 canvas on modern browsers.

For a 'star burst' visual effect, it sounds like a simple matter of creating a random array of objects that move away in random pre-set directions every time the canvas updates.

Example: http://jsfiddle.net/amDAW/ (click on the canvas to create a starburst)

As for sounds, this isn't handled in the canvas, but rather either the Audio tag or the fairly new WebAudio API. If you go with the former (more browser support), your biggest concern will be with resource preloading, but there are some helper libraries that can abstract this away (shameless advertising: https://github.com/jsweeneydev/ResourceLoader).

Upvotes: 6

Related Questions