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);