I want to implement fruit ninja like animation for my html5 banner

[danielo33771543]

Fruit Ninja HTML5 Canvas

I wanted to borrow some animation from the above demo and some assistance would be helpful, i wanted for mine fruits to be dropping from the top and the user has to cut them, the user will only need to cut three fruits maximum, there are no bombs dropping just fruits dropping. Once the user slashes 3 fruits, it brings the second and final frame.

[kglad]

send an email to the author and ask.  or use public domain art.

[Nicktendo28]

Talk to Halfbrick Studios and they might be able to help you. Halfbrick Studios

They are the creators of fruit ninja.

[JoãoCésar]

Hi.

Here is a very simple and raw sample using Animate CC. Hopefully it is going to help you get started.

Live demo:

index

Preview:

JS code:

var root = this;
var fruits = [];
var particles = [];
var container = root.container;
root.randomRange = function(min, max)
{
    return Math.random() * (max - min + 1) + min;
};
root.lerp = function(start, end, ratio)
{
    return (1 - ratio) * start + ratio * end;
};
// particle prototypes
function Particle(color, radius, index, scaleRatio)
{
    createjs.Shape.call(this, new createjs.Graphics().beginFill(color).drawCircle(0, 0, radius));
    this.ratio = index + 1;
    this.alpha = 1 / this.ratio;
    this.scaleX = this.scaleY = 1 / this.ratio * scaleRatio;
};
Particle.prototype = Object.create(createjs.Shape.prototype);
Particle.prototype.constructor = Particle;
Particle.prototype.move = function()
{
    this.x = root.lerp(this.x, stage.mouseX / stage.scaleX, 1 / this.ratio);
    this.y = root.lerp(this.y, stage.mouseY / stage.scaleY, 1 / this.ratio);
    this.alpha -= 0.1;
};
Particle.prototype.reset = function()
{
    for (var i = particles.length - 1; i >= 0; i--)
        particles.alpha = 1;
};
// fruits prototypes
lib.Fruit.prototype.getReady = function()
{
    this.hit = false;
    this.x = root.randomRange(this.nominalBounds.width * 0.5, canvas.width / stage.scaleX - this.nominalBounds.width * 0.5);
    this.y = this.parent.spawnY + this.nominalBounds.height * 0.5;
    this.vY = 0;
    this.forceY = root.randomRange(30, 40);
    this.frictionY = 0.95;
    this.rotationSpeed = root.randomRange(-10, 10);
    this.half0.x = 0;
    this.half0.y = -15;
    this.half0.rotation = 0;
    this.half0.vX = 0;
    this.half0.forceX = 0;
    this.half0.frictionX = 0;
    this.half0.rotationSpeed = 0;
    this.half1.x = 0;
    this.half1.y = 15;
    this.half1.rotation = 0;
    this.half1.vX = 0;
    this.half1.forceX = 0;
    this.half1.frictionX = 0;
    this.half1.rotationSpeed = 0;
};
lib.Fruit.prototype.launch = function()
{
    this.offscreen = false;
    this.visible = true;
    this.vY -= this.forceY;
};
lib.Fruit.prototype.spawn = function()
{
    setTimeout(function(scope)
    {
        scope.getReady();
        scope.launch();
    }, root.randomRange(this.parent.minDelay, this.parent.maxDelay), this);
};
lib.Half.prototype.moveX = function()
{
    this.vX *= this.frictionX;
    if (!isNaN(this.vX) && this.vX !== undefined)
        this.x += this.vX;
};
lib.Fruit.prototype.moveY = function()
{
    this.vY += this.parent.gravity;
    this.vY *= this.frictionY;
    this.y += this.vY;
};
lib.Fruit.prototype.checkCollision = function(explosionLinkage)
{
    var point = this.globalToLocal(this.stage.mouseX, this.stage.mouseY);
    if (!this.hit && this.stage.mouseInBounds && this.hitTest(point.x, point.y))
    {        
        var explosion = new lib[explosionLinkage]();
        explosion.x = this.x;
        explosion.y = this.y;
        container.addChild(explosion);
        this.hit = true;
        this.rotationSpeed = 0;
        this.half0.vX += root.randomRange(-10, -30);
        this.half0.forceX = root.randomRange(40, 60);
        this.half0.frictionX = 0.85;
        this.half0.rotationSpeed = root.randomRange(-15, 15);
        this.half1.vX += root.randomRange(10, 30);
        this.half1.forceX = root.randomRange(40, 60);
        this.half1.frictionX = 0.85;
        this.half1.rotationSpeed = root.randomRange(-15, 15);
    }
};
lib.Fruit.prototype.checkIfOffscreen = function()
{
    if (!this.offscreen && this.y > this.stage.canvas.height / stage.scaleY + this.nominalBounds.height * 0.5)
    {
        this.offscreen = true;
        this.spawn();
    }
};
lib.Fruit.prototype.anim = function()
{
    this.moveY();
    this.half0.moveX();
    this.half1.moveX();
    if (!isNaN(this.rotationSpeed) && this.rotationSpeed !== undefined)
        this.rotation += this.rotationSpeed;
    if (!isNaN(this.half0.rotationSpeed) && this.half0.rotationSpeed !== undefined)
        this.half0.rotation += this.half0.rotationSpeed;
    if (!isNaN(this.half1.rotationSpeed) && this.half1.rotationSpeed !== undefined)
        this.half1.rotation += this.half1.rotationSpeed;
};
// start
root.start = function()
{
    document.body.style.backgroundColor = "#222";
    root.totalParticles = 10;
    container.totalFruits = 5;
    container.gravity = 0.5;
    container.minDelay = 3000;
    container.maxDelay = 6000;
    container.spawnY = canvas.height / stage.scaleY;
    root.createParticles();
    root.createFruits();
    createjs.Ticker.on("tick", root.tickHandler);
    stage.on("stagemousemove", root.stageMouseMoveHandler);
};
root.createParticles = function()
{
    for (var i = 0; i < root.totalParticles; i++)
    {
        var particle = new Particle("#fff", 8, i, 0.75);
        root.addChild(particle);
        particles = particle;
    }
};
root.createFruits = function()
{
    for (var i = 0; i < container.totalFruits; i++)
    {
        var fruit = new lib.Fruit();
        fruit.hit = true;
        container.addChild(fruit);
        fruit.visible = false;
        fruit.spawn();
        fruits = fruit;
    }
};
root.tickHandler = function(e)
{
    var i;
    for (i = 0, total = fruits.length; i < total; i++)
    {
        var fruit = fruits;        
        fruit.anim();        
        fruit.checkCollision("Explosion");        
        fruit.checkIfOffscreen();        
    }
    for (i = 0, total = particles.length; i < total; i++)
        particles.move();
};
root.stageMouseMoveHandler = function(e)
{
    for (var i = particles.length - 1; i >= 0; i--)
        particles.reset();
};
root.start();

FLA / source / files download:

adobe/animate cc/html5_canvas/fruit_ninja at master · joao-cesar/adobe · GitHub

Regards,

JC

[danielo33771543]

Thanks man,

[JoãoCésar]

You're welcome.