I was at LILiK today, helping a friend of mine preparing a project for promoting the LILiK Day.
The project, really interesting, is about a browser version of the famous game “Fruit Ninja” working on real fruit. Crazy, right?

Actually, to make the fruit explode you have to touch real fresh natural fruit connected with a wire to the pc where this game run.

It’s just a prototype, but this is the first preview:

Fruit Ninja Clone

Fruit Ninja Clone

I thought it could be awesome to build an explosion effect using some tricky HTML5  with CANVAS.


Shooted particles

Shooted particles

Searching here and there on the web, I’ve found something good and put everything together here (DEMO after the code):

Let’s try the effect here:






Post a comment
  1. Raf #
    June 4, 2014


    Thanks for the awesome effect, I am working on a html game similar to fruit Ninja and decided to copy your effect, after pasting it on my page, when clicking anywhere on the screen my fruit game disappears and the screens turns white just to display your effect!

    I’d like to use the effect without over raiding my content with a white background.


    • Some Guy #
      June 27, 2017

      Are you drawing the rest of the game with the particles? On line 122 it’s clearing the canvas to draw the next frame. It sounds like you’re drawing your fruit and then when clicking the canvas is getting cleared and erasing whatever you had drawn before.

      • September 18, 2017

        if I remember correctly I delete everything at every frame in every case.

Leave a Reply

Basic HTML is allowed. Your email address will not be published.

Subscribe to this comment feed via RSS

By continuing to use the site, or scrolling, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.