android 小鸡走动动画,使用Matter.js实现的小鸡掉落动画
JavaScript
语言：
JaveScriptBabelCoffeeScript
确定
var chickenContainer = document.getElementById('chicken-container');
// Matter module aliases
var Engine = Matter.Engine,
World = Matter.World,
Body = Matter.Body,
Bodies = Matter.Bodies,
Common = Matter.Common,
Composites = Matter.Composites,
MouseConstraint = Matter.MouseConstraint;
// window height and width
var width = $(window).width();
var height = $(window).height();
// create a Matter.js engine
var engine = Engine.create(chickenContainer, {
render: {
options: {
showAngleIndicator: false,
wireframes: false,
background: 'transparent',
width: width,
height: height
}
}
});
// add a mouse controlled constraint
var mouseConstraint = MouseConstraint.create(engine, {
constraint: {
render: {
visible: false
}
}
});
World.add(engine.world, mouseConstraint);
var offset = 10,
options = {
isStatic: true,
render: {
visible: false
}
};
engine.world.bodies = [];
// these static walls will not be rendered in this sprites example, see options
World.add(engine.world, [
Bodies.rectangle(width / 2, height - offset, width, offset, options), // bottom
Bodies.rectangle(width, height / 2, offset, height, options), //right
Bodies.rectangle(0, height / 2, offset, height, options), //left
Bodies.rectangle(0, -300, width, 15, { isStatic: true, render: {visible: true}, angle: Math.PI * 0.2 }),
Bodies.rectangle((width / 10) * 10, -300, width, 15, { isStatic: true, render: {visible: true}, angle: Math.PI * -0.2 })
]);
var stack = Composites.stack(350, 40, 5, 20, 20, 20, function(x, y, column, row) {
return Bodies.circle(x, y, Common.random(25, 25), {
restitution: 0.55,
render: {
sprite: {
texture: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/180245/hen.svg'
}
},
position: {
y: -250
}
});
});
World.add(engine.world, stack);
var renderOptions = engine.render.options;
// run the engine
Engine.run(engine);
// function cluck() {
// //clucking
// var videoPlayer = document.getElementById("clucking");
// videoPlayer.load().play;
// }
// var mickey = Composites.stack(350, 2, 1, 1, 20, 20, function(x, y, column, row) {
// return Bodies.rectangle(x, y, 220, 120, {
// restitution: 0.9,
// render: {
// sprite: {
// texture: 'https://upload.wikimedia.org/wikipedia/en/d/d4/Mickey_Mouse.png'
// }
// }
// });
// });
// World.add(engine.world, mickey);
// module aliases
var Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Body = Matter.Body,
Bodies = Matter.Bodies,
Common = Matter.Common,
Composites = Matter.Composites,
MouseConstraint = Matter.MouseConstraint;
var width = 800;
var height = 600
// create an engine
var engine = Engine.create();
// create a renderer
var render = Render.create({
element: document.body,
engine: engine,
options: {
width: 800,
height: 600,
background: 'transparent',
wireframes: false,
showShadows: true
}
});
// create two boxes and a ground
var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
// add all of the bodies to the world
World.add(engine.world, [boxA, boxB, ground]);
var offset = 10,
options = {
isStatic: true,
render: {
visible: false
}
};
engine.world.bodies = [];
// these static walls will not be rendered in this sprites example, see options
World.add(engine.world, [
Bodies.rectangle(width / 2, height - offset, width, offset, options)
]);
var stack = Composites.stack(350, 40, 5, 20, 20, 20, function(x, y, column, row) {
return Bodies.circle(x, y, Common.random(25, 25), {
restitution: 0.55,
render: {
sprite: {
texture: '/uploads/161001/hen.svg'
}
},
position: {
y: -250
}
});
});
World.add(engine.world, stack);
// run the engine
Engine.run(engine);
// run the renderer
Render.run(render);