Highlighted

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

Explorer ,
Aug 19, 2019

Copy link to clipboard

Copied

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.

TOPICS
Discussions

Views

434

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Explorer ,
Aug 19, 2019

Copy link to clipboard

Copied

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.

TOPICS
Discussions

Views

435

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 19, 2019 0
Adobe Community Professional ,
Aug 19, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 19, 2019 0
Adobe Community Professional ,
Aug 20, 2019

Copy link to clipboard

Copied

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

They are the creators of fruit ninja.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 20, 2019 0
Adobe Community Professional ,
Aug 20, 2019

Copy link to clipboard

Copied

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:

animate_cc_html5_canvas_fruit_ninja.gif

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 20, 2019 1
Explorer ,
Aug 21, 2019

Copy link to clipboard

Copied

Thanks man,

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 21, 2019 1
Adobe Community Professional ,
Aug 21, 2019

Copy link to clipboard

Copied

You're welcome.

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 21, 2019 0