5
Replies
Hi.
Here is a very simple and raw sample using Animate CC. Hopefully it is going to help you get started.
Live demo:
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
AdChoices